How To Get Started With Google Tag Manager: Using The New User Interface (Part One) - Fresh Egg Blog

How To Get Started With Google Tag Manager: Using The New User Interface (Part One)

Technical web analyst

Fresh Egg now offers Google Tag Manager training courses. Find out more here

Google Tag Manager (GTM) is not just for developers or those from a technical background so, if you want to know how you can use it, then read on (and don't forget to catch up with Part Two, coming soon).

One of the difficulties of maintaining tracking code and adding new tags to a website is relying on a developer to change the code. When you factor in all the other priorities your development team may have, tracking becomes just another job in their queue.

Tag Management Systems empower marketers to be able to add new tags without requiring code changes onsite. Google Tag Manager is one of these systems: a freely available application provided by Google.

It may sound scary to developers to give marketers this ability, but Google Tag Manager has a variety of safety mechanisms to put the developer’s mind at ease! These include:

  • A simple version system to track what has been done on your container
  • The ability to rollback to previous versions
  • Automated checks on any Javascript code, which blocks syntax errors from being
  • published
  • Debug mode where you can preview and test any tracking changes on the site


“I currently have a Google Tag Manager account in the old UI, when will the new UI be available to me?”

Any new accounts are now created in the New UI, there is no option to use the old UI when creating an account. There is also now an opt-in migration for any existing accounts.

 migration assistant

 Clicking the migration assistant button will bring up a list of accounts where you have the correct level of user access to migrate.

The process can take up to a few hours and you can still edit the container during this time. All containers are expected to be migrated automatically during July. All information on changes are kept in the google tag manager release notes.

The new interface is designed to be more user-friendly for people with non-technical backgrounds. The terminology has become clearer and the setup process more intuitive.

Account and Container Setup

Google recommends that each company has its own account. Within that account you can have multiple containers for each of the company’s websites or mobile apps. You can also add users to your accounts and containers with different levels of access:

  • View only
  • View and Edit
  • View, Edit, Delete, and Publish

For your first container, name it after the website or app you are going to use it on. For example “www.freshegg.co.uk”.

After accepting the terms and conditions, you are provided with your container code. This must be placed on every page on your site that you wish to add tracking tags, too. It should be placed immediately after the opening tag.

If you don’t do this this immediately, you can find the container code again, here:

Admin -> Install Google Tag Manager

Google Tag Manager Structure

Google Tag Manager has a hierarchical structure:

  • Account
    • Container

An account can have more than one container. You can also add/modify user permissions at both levels: you can give a user container access but not account access. It is best practice to only give the owner of the account full account-level access.

 

“How can I add a new user to a container?”

Go to Admin -> User Management -> New

An email address is used to identify the user.

Container Structure

The container is where you manage the tracking being added to your site through the container code snippet provided by Google.

Tags: Tags contain the tracking code that is added to your website. Google provides some templated tags for Google Analytics and other 3rd party tracking providers. You can also create custom HTML tags to suit your tracking requirements.

Triggers (used to be called rules): Triggers control when a tag should be fired: on certain pages or upon certain user interactions. These are called rules in the old interface. One tag can have more than one trigger: the tag will fire if any of the triggers’ conditions are met.

Variables (used to be called macros): Variables store information about the page of your website and the element on it. You can reuse variables across any number of rules and tags. Google has predefined variables and you can set up your own.

Built-In Variables

The new interface provides an efficient method for using the Built-In Variables provided by Google. When you go to the variables page it will display the available built-in variables. Some are ticked by default. You can tick the ones you require to make them available to use at any time.

Top 3 Built-In Variables:

  1. Page URL - This captures the page a visitor is currently on when a pageview or event is fired; this is used to trigger tags only on certain areas of the site
  2. Event - The name of the event that was fired. This is used to set up triggers when a certain event is fired
  3. Click URL - The destination URL of the clicked link

Setting Up Your First Variable

If you are looking to implement Google Analytics through Google Tag Manager then the first variable that you will find useful to setup is one for your tracking ID. Follow the steps below to do this:

  • Click the red ‘New’ button, at the bottom of the page in the variable section of the container
  • Select ‘Constant’
  • Give the Variable a useful name, e.g. ‘UA Tracking ID’ – by default it is set to Constant
  • For the value, Paste your tracking id from your Google Analytics property (UA-XXXXXXXX-X)
  • Create variable

tracking id variable

You will reference your UA Tracking ID when setting up Universal Analytics page views and events. If it changes or you want to clone your container to use for another website, you only have to change it one place.

Setting Up Universal Analytics Pageview Tracking

The next step to proceed with is setting up a Universal Analytics tag for firing pageview tracking to Google Analytics.

Go to Tags -> New

Select the following options at each stage in the process.

 

tag manage pageview setup

 

Triggers are integrated into the setup of a tag. If your tag has no trigger it will not fire. When using a Variable in a field, you’ll notice it appears with the syntax {{Variable Name}}. The curly brackets are the syntax that tells Google Tag Manager this is a variable so don’t remove these from a variable. Your tag is now set up, but you need to ensure you test it before publishing.

Preview and Debug Mode – Testing Your Changes

publish menu

The preview option can be selected from the publish menu at the top right of your container. When you select the preview option, you will see a debug area appear on the website the container is on. Open a new tab for your website and you’ll see a window at the bottom of the page, like the example screenshot:

debug mode pageview tag

The debug area will only appear in the same browser you are using Google Tag Manager in. In the summary, whenever an event is received by Google Tag Manager, it will show in the summary. You can click each of these to see which tags fired. We are expecting the tag we set up to fire at ‘Pageview’.

You will see your tag in the ‘Tags Fired On This Event” list if you’ve set this up correctly. There is always a list beneath with the tags that didn’t fire.

 

“What is the most common reason a tag doesn’t fire, how can I work it out?”

The most common reason for a tag not firing is that it doesn’t meet its trigger conditions. To find out whether your tag met your trigger conditions, click on it in the list in the debug window.

Scroll until you see “Firing Triggers”. There will be a green tick if the trigger was met and a red cross if it isn’t.

triggers pageview debug

 

“I’m having an issue in debug mode I can’t work out, how can I get help?”

You can opt to share a preview of your version with other people so they can help. To do this, you go to the versions section and select “Share Preview” from the actions menu.

Note: You can’t share a version that you are currently editing. You need to create a new “Now editing” version from the publish menu on the container page then share the previous version with your changes in.

share preview debug mode

You will need to provide the domain you are testing; using the link will allow a preview to be seen in different browsers and different computers.

Versions and Publishing

Versions are drafts of your container. Versioning systems are often seen on Content Management Systems: The main function of a versioning system is to ensure you can always roll back to a working version if you accidentally publish something broken.

  • You can create a new version to start editing anytime from within your container by using the top right publish menu in your container. It’s the third option the menu
  • The publishing action is in red, this is a colourful reminder that you should be careful when publishing any container changes

Checks to Run Before You Publish

  • Has there been recent activity from other users, or yourself that you weren’t expecting?You can check this in the recent activity log in the container overview. You want to ensure that you don’t publish changes that aren’t ready. Top tip: You can remove the triggers from any “work in progress” tags you have; they won’t fire and your triggers will still be saved to reattach in a later version
  • Have you previewed everything you did?

Once you’re happy you can click that red publish button for your changes to be live on your website.

Checks to Run After You Publish

  • Ensure your version is named so it gives a brief indication of what you did. You can rename your container by switching to the Versions tab and selecting the rename from the actions dropdown
  • Check it is working as expected on your website
“How do I republish a previous version?”

Switch to the versions tab and select publish in the actions column of the version.

actions on a container version

There is also an option to create a new draft version with the contents of the old version.

Limitations and Caveats

  • You may still need to make code changes on your site if the current HTML structure can’t be used to set up your event. For example, if there are no specific classes/ids on the element you want to track, it can be difficult to target it
  • Beware of changes to your website structure. During website updates page structures and page URLs can change, if your event triggers rely on these then it is important to set up clear communication guidelines with your website team so you can recheck your events after structural updates
  • When setting up advanced tracking through Google Tag Manager, being able to access a developer’s knowledge about regular expression handling regularly can be difficult , but invaluable when setting advanced triggers

Part Two

You can read part two of our series which shows you how to set up event tracking, such as clicks on mail to links and phone numbers. 

Want to know more about implementing Google Tag Manager? Then contact our Insights team to find out more.


Share this post


comments powered by Disqus