It\u2019s been a crazy week. Just crazy. Not only did Google Tag Manager<\/a> introduce Workspaces<\/a>, arguably one of its most important releases ever for GTM, but they also revamped the user interface! So very big changes have been underfoot, and I\u2019m so happy to be writing about them, because in my completely biased opinion these changes are amazing and well worth the long wait.<\/p>\n In this article, I want to quickly walk you through what I think are the most meaningful changes in the interface. A lot has changed, but the underlying mechanisms of GTM are still the same. You\u2019re still creating Tags, Triggers, and Variables, and you\u2019re still debugging the container using Debug Mode. However, the new user interfaces enhances and streamlines the various creation processes in the container, and the new Abandon \/ View Changes<\/a> feature allows you to debug and diff the changes you or your team has made.<\/p>\n \n \n Subscribe to the Simmer newsletter<\/a> to get the latest news and content from Simo Ahava into your email inbox!\n <\/p>\n <\/span><\/p>\n The new interface, starting with its flashy account selector menu, just reeks<\/em> of Material Design<\/a>. The added third dimension to navigation provides a completely novel experience for GTM veterans.<\/p>\n A historical pet peeve in GTM had been that if you\u2019re in the middle of the Tag creation process and you notice that you need to configure a new Trigger or Variable, you were taken away (or had to leave) the Tag view in order to configure the secondary asset in a separate part of the container. Even though this was largely fixed a while ago, it still leaves a clunky feeling with the page transitions and the staggered workflow.<\/p>\n With the overlays, you will never leave the location you are in. The overlays fly in so that they do not cover the whole page, so you\u2019ll always know where you started off from.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Moving back in history is as easy as clicking the X<\/strong> in the top left corner of any overlay or just clicking the shaded area in the left-hand side of the screen.<\/p>\n This, in my opinion, will save time and grey hairs. These overlays will take time to get used to, but it\u2019s well worth it. You can zip and zap through a Tag creation workflow in a fraction of the time it used to take.<\/p>\n The Overview screen has been slightly revamped, especially if you\u2019ve already started working with Workspaces<\/a>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n It\u2019s not \u201cContainer\u201d anymore in the navigation bar, it\u2019s \u201cWorkspace\u201d now. Makes a lot of sense, since you will always be working in a Workspace.<\/p>\n<\/li>\n You don\u2019t add notes to Versions anymore. Instead, you modify the Description of a Workspace.<\/p>\n<\/li>\n The center panel used to hold information about the current version. Now, it tells you what\u2019s going on in the current Workspace.<\/p>\n<\/li>\n The panel to the right used to be solely about the Published Version. Now it\u2019s split into two, giving you the run-down on the Live Version (i.e. the Published Version) as well as the Latest Container Version. The latter is very important for Workspaces, as the Latest Container Version is what your workspaces will merge to\/with. Clicking either half will take you to the respective version page.<\/p>\n<\/li>\n The large center area is reserved for changes in your Workspace when compared to the Latest Container Version<\/em>. Every change you make in Workspace is a divergence from the Latest Container Version.<\/p>\n<\/li>\n The Activity History used to be for the whole container, but now it\u2019s just for the current Workspace. To see activity history for the container, you will need to go through the Versions section of the container.<\/p>\n<\/li>\n The PUBLISH menu is now red when you have pending changes, and next to it is a counter with the number of changes the current Workspace has introduced. If you click the Container ID (GTM-XXXXX), you\u2019ll see an overlay with the container snippet and instructions for its installation.<\/p>\n<\/li>\n<\/ol>\n Note also the \u201cCurrent Workspace\u201d selector in the left-hand navigation. There\u2019s more details about this in my Workspaces guide<\/a>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n This is minor but still major. You know how irritating it always was to just see relative timestamps instead of proper ones? \u201c3 days ago\u201d as a Last Modified time isn\u2019t that informative, right? Well, we\u2019ve been offered an olive branch. By hovering over any relative timestamp, you\u2019ll see the actual timestamp in a tooltip.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n You can argue that it would be better to only have the actual timestamp visible and none of this relative timestamp bullcrap, but this is a step in the right direction, definitely.<\/p>\n There\u2019s just one important change to the Versions view itself. What used to be \u201cEdit as New Version\u201d is now \u201cSet as the Latest Version\u201d. This is, again, because of Workspaces.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n When you set a version as the Latest Version, it has implications for all active Workspaces, as they will all need to be updated with the changes in this Latest Version. So don\u2019t be cavalier when using this feature!<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The biggest change to the Version page itself, apart from the new UI, is that there\u2019s both \u201cVersion Changes\u201d and \u201cActivity History\u201d. Version Changes describes the changes in this version compared the previous Latest Container Version. Activity History is a more detailed list of what things were done in the version and, importantly, by whom.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n So, now to the juicy part. As I said in the beginning, the workflow has been streamlined to the maximum. There\u2019s lots of little changes here, so I\u2019m sure I won\u2019t be able to cover them all. These, however, are the ones I\u2019ve found most meaningful.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Things have certainly changed! On top of the view, the underlined Undefined Tag<\/strong> is what you edit to modify the Tag name. Next to it is the Folder icon, which lets you assign the Tag to a folder<\/a>.<\/p>\n The view is dominated by the two boxes. The first is where you create and configure the Tag itself, and the second is where you attach Triggers<\/a> and Exceptions to the Tag.<\/p>\n When you click \u201cChoose a tag to being setup\u2026\u201d, a new overlay pops out, offering you an impressive list of Tag templates to choose from.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n After selecting the Tag type, the creation process itself is pretty much the same as it used to be.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n As for Triggers, once you click the Trigger creation panel, a more complex overlay pops out. I\u2019ll go over these steps in the next chapter.<\/p>\n Do note that you will not be able to add an Exception until you have added at least one Trigger (makes sense).<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Note that if you open any Tag, Trigger, or Variable for editing, and that asset has already been edited (or newly created) in this Workspace, you will see a new selection in the view, allowing you to Abandon and\/or View the changes that have been committed to the asset.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n I\u2019ve covered Abandoning and Viewing changes in more detail in the Workspaces guide<\/a>.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n To save an asset, just click the blue SAVE button in the top-right corner of the overlay. Similarly, if you\u2019ve opened a previously created asset, you can click the little dot menu next to the SAVE button to duplicate, delete, or view changes to the asset.<\/p>\n Trigger selection is more robust now. The full table gives you all the information you need at a glance.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n If you click anywhere on the Trigger row (except the little (I) icon to the right which opens the respective Trigger configuration), it will add the Trigger to the Tag.<\/p>\n The magnifying glass icon opens a search field which lets you do a filter search on the Trigger list.<\/p>\n The (+) button lets you create a new Trigger. When you click it, the process is very similar to creating a new Tag. You\u2019ll see a new overlay with the same types of options you had when creating a new Tag.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n When you choose the Trigger type, the iconography has been completely revamped.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n I actually miss the color-coding GTM used to have for Triggers, but the icons are much clearer and easier to interpret.<\/p>\n Configuring a Trigger hasn\u2019t had any real technical changes, but the user interface has changed for some of them, especially the ones which need a separate enabling<\/em> condition (e.g. Just Links and Form Submit). Instead of the \u201cEnable When\u201d and \u201cFire On\u201d steps, and actually instead of any<\/em> steps, you just have a regular, straightforward form:<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n I\u2019m not happy that they did away with the step numbers, as they made it easier to reference various parts of the Trigger configuration process. I also still wish they\u2019d set the Page URL matches RegEx .<\/strong>* as the default for the \u201cEnable When\u201d step.<\/p>\n Variables have received a very similar treatment as Triggers and Tags. To start the Variable creation workflow, you can either go via the Variables page of the container (as you used to), or you can just click the little Variable icon wherever you see it.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Once you click that icon, you\u2019re whisked to the Variable selection screen, which looks a lot like what you got with Triggers.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Note that the Built-In Variables are mixed together with the User-Defined Variables. The only way to tell them apart is to look for the (I) icon to the right, which opens the Variable configuration for User-Defined Variables. With Built-In Variables, you can\u2019t do that.<\/p>\n If you want to add Built-In Variables to the list, you will need to enable them by clicking the little gear icon in the top-right corner. This opens a new overlay, where you can check the Built-In Variables you want included in the container.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n Now, when you choose to create a new Variable, you get a list of the types you can create, with a new iconography (just as with Triggers).<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n There\u2019s nothing new in this list, though I do like the fact that you see a short description after most of the Variable types.<\/p>\n Configuring a Variable is pretty much the same as it used to be, so I won\u2019t dwell on that here.<\/p>\n So you are now able to complete the full workflow from the first time you create a Tag all the way to its Triggers and Variables without having to change your location in the container. Yes, the horizontal overlays might come as a shock to many, and it will take time to get used to the Material Design layout, but my personal opinion is that the changes are very welcome indeed. But that was predictable.<\/p>\n When you click the Publish button, it\u2019s again, surprise surprise, delegated to an overlay.<\/p>\n <\/p>\n <\/a><\/p>\n<\/div>\n The Version Configuration is more prominent than it used to be. Now you are recommended to give a proper name and description to the version. This has, in my mind, always been vital when creating versions in Google Tag Manager. You really want to make the version name as descriptive as possible.<\/p>\n
\n X<\/span><\/p>\n
\n The Simmer Newsletter<\/strong>\n <\/p>\n1. The overlays<\/h2>\n
![\"Google](\"https:\/\/www.simoahava.com\/images\/2016\/07\/overlay.jpg#ZgotmplZ\")
<\/p>\n2. The Overview<\/h2>\n
![\"Changes](\"https:\/\/www.simoahava.com\/images\/2016\/07\/changes-to-overview.jpg#ZgotmplZ\")
<\/p>\n\n
![\"Current](\"https:\/\/www.simoahava.com\/images\/2016\/07\/current-workspace.jpg#ZgotmplZ\")
<\/p>\n3. Timestamps!<\/h2>\n
![\"Hover](\"https:\/\/www.simoahava.com\/images\/2016\/07\/timestamp.jpg#ZgotmplZ\")
<\/p>\n4. Versions<\/h2>\n
![\"set](\"https:\/\/www.simoahava.com\/images\/2016\/05\/set-as-latest-version.jpg#ZgotmplZ\")
<\/p>\n![\"Set](\"https:\/\/www.simoahava.com\/images\/2016\/05\/set-latest-warning.jpg#ZgotmplZ\")
<\/p>\n![\"Version](\"https:\/\/www.simoahava.com\/images\/2016\/07\/version-changes-activity-history.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2016\/05\/new-tag.jpg#ZgotmplZ\")
<\/p>\n![\"Choose](\"https:\/\/www.simoahava.com\/images\/2016\/05\/choose-tag-type.jpg#ZgotmplZ\")
<\/p>\n![\"tag-creation\"\/](\"https:\/\/www.simoahava.com\/images\/2016\/07\/tag-creation.jpg#ZgotmplZ\")
<\/p>\n![\"Add](\"https:\/\/www.simoahava.com\/images\/2016\/07\/add-trigger-to-tag.jpg#ZgotmplZ\")
<\/p>\n![\"abandon-changes\"\/](\"https:\/\/www.simoahava.com\/images\/2016\/07\/abandon-changes.jpg#ZgotmplZ\")
<\/p>\n![\"Save](\"https:\/\/www.simoahava.com\/images\/2016\/07\/save-tag-and-menu.jpg#ZgotmplZ\")
<\/p>\n6. Triggers<\/h2>\n
![\"Trigger](\"https:\/\/www.simoahava.com\/images\/2016\/08\/trigger-selection.jpg#ZgotmplZ\")
<\/p>\n![\"New](\"https:\/\/www.simoahava.com\/images\/2016\/07\/new-trigger.jpg#ZgotmplZ\")
<\/p>\n![\"Trigger](\"https:\/\/www.simoahava.com\/images\/2016\/05\/trigger-types.jpg#ZgotmplZ\")
<\/p>\n![\"Trigger](\"https:\/\/www.simoahava.com\/images\/2016\/07\/trigger-configuration.jpg#ZgotmplZ\")
<\/p>\n7. Variables<\/h2>\n
![\"Variable](\"https:\/\/www.simoahava.com\/images\/2016\/07\/variable-icon.jpg#ZgotmplZ\"){kind=icon}
<\/p>\n![\"Variable](\"https:\/\/www.simoahava.com\/images\/2016\/07\/variable-selection.jpg#ZgotmplZ\")
<\/p>\n![\"Built-In](\"https:\/\/www.simoahava.com\/images\/2016\/07\/built-in-variables.jpg#ZgotmplZ\")
<\/p>\n![\"Variables](\"https:\/\/www.simoahava.com\/images\/2016\/05\/variables-icons.jpg#ZgotmplZ\"){kind=icon}
<\/p>\n8. Publish<\/h2>\n
![\"Publish](\"https:\/\/www.simoahava.com\/images\/2016\/07\/publish.jpg#ZgotmplZ\")
<\/p>\n
![\"Create](\"https:\/\/www.simoahava.com\/images\/2016\/07\/create-version.jpg#ZgotmplZ\")
<\/p>\n