Using Google Tag Manager

What is GTM?

GTM is a tag management system

You can manage multiple tags, GTM makes it easier for tracking element changes and enables us to make simple changes to tracking code on a web page (without having to manually edit every tracking code element on each page).

How it works

What is a tag?

Tags are JS code snippets provided by third parties to place on to web pages which collect measurement and marketing data from the website/app and send it on to 3rd party website services. Examples of third-party websites could be GA, Twitter, FB or Adwords, and many more. Other tags can be used to inject call tracking code from sites that provide metric data visuals or GUIs.

GTM allows us to inject these code snippets (tags) directly onto our web pages via the GTM platform. This means we have a lot more control over how the tags operate without the need for dev work.

The third parties report the tags

Tags can be GA tags, adwords, FB pixel tags and many more third party websites can provide tags for insertion.

Examples of third party websites include: hotjar, analyszeme, GA tracking and many other tags can appear in a sites source.

Tags are usually implemented using JS by devs but GTM removes the need to place individual tags on a page, it provides a container that allows us to control the tags in the GTM interface.

GTM container code – GTM-xxxxx is also referred to as the container ID which is unique to the container tag – gtm.js is the JS library by the container tag.

The container listens and responds to any actions, and the actions are defined by a trigger. (a button click can be a trigger)

We create tags which need a trigger (listener) to work in the GTM workspace.

Actions are defined by our triggers

GTM provides different triggers which allow us to capture different types of events. A common one is Page View trigger that fires when the page loads, which is good if you want to track a page’s view tally.

• 1. The web page has the container code implemented
• 2. This code is set ready to listen
• 3. Trigger set to listen for particular action
• 4. Listen for a particular action
• 5. Variables store ids, actions, page name etc
• 6. Variables are passed to various tags and triggers
• 7. Once trigger criteria are met it fires the appropriate tag

GTM Interface Overview

All containers that have been set-up will be listed on the initial sign-in screen.

Select the container you require to access its GTM interface, once set-up you’ll get given the code that’ll place the container on to your web page.

The GTM Workspace

The workspace which opens up once you've selected your container, will house the container id and all GTM access points. We can have a total of 3 workspaces, each workspace can be shared with other team members or the client.

Within the workspace we are able to manage all the tags, versions, and admin stuff within the account. We also get the container id from here too, this is handy for third-party tools.

The workspace is where we add and edit tags, variables and triggers, they can all be tested in the workspace before being published, and we can have multiple workspaces (3 in the free version).

You can assign a workspace to a specific team (click on Workspace top-left, then hit plus button top-right to assign a new workspace, this will change the name in top-left.

We can also add a new tag > New Tag

The Default workspace displays what we are working on > Manage Workspace

The container gives a description of the container you are in; you can click 'edit description' to add a new description of the workspace.

The Left-hand side links

Tags > can view all tags we have created, and they can be managed here. Click New to add new tags.

Triggers > Lists triggers, these are conditions or rules defined to fire the tag.

Variables > these allow us to store a value and send to other functions as needed. We can define and set a variable in GTM. There are 2 in GTM, user defined and built-in variables. Built-in variables are predefined and a list of these exist in their library, they allow us to capture a lot of information, such as URL and other names in the list, click on configure to view the list. We can then simply click on what we want to use, select it and it’ll appear in the variables window to use. User defined variables are what we place in, click New and we can define the variable.

Folders > manage all triggers, variables, and tags logically. We are able to create are own folder set-up.

Templates > created by third parties or we can create our own and place in here to share. Click search to view tag templates that are available to use. These are 3rd party tag templates so be weary as they are not Google verified. To use one just click on it then add it to the workspace. Variable templates list the variable templates available.

Versions - View and manage versions of the container - It allows us to see changes made in the past, these can be given names that reflect the change.

Initially, we hit publish every time we add or edit other tags.

Admin - Change account settings etc and assign access to users with permissions. We can also import or export a container from this area.

Container Settings & Account Settings

Acc Settings:

Hit + sign and you create new account

Allows us to view ids and other settings which can be edited

Other points are self-explanatory

Container Settings:

See all the activity done on the container, and import/export options along with other options.

Installing GTM in WP

This can be done in the editor section of the WP CMS, placing code in head section and body section.

Triggers

GTM listens for events and can store them into Triggers.

These triggers can be used to fire appropriate tags.

All Triggers are present in the Triggers section and can be applied from there.

Variables

Built-in variables can be used and configured by clicking on Configure for the library of variables, to use them just check them and they will appear in the window.

Pages – all page info of the page, each giving page elements

Utilities

Errors

Clicks - Catches elements of the click

Forms - All elements of forms can be caught

History - Can track content areas that have been viewed

Videos - Track embedded video detail

Scrolling

Visibility

All the above listed are variable elements implemented via the Variables tag list in the GTM dash, Variables > Configure for list.

Data Layers

In terms of GTM the data layer is a JS array used to collect and store data from a website and then send the data to a GTM container tag.

Perform a Tag Audit for a live site

Identify that all tags are hard coded into the site and document the following about each deployed tag:

• Tag purpose, what is it collecting?
• Where is the tag sending the data to?
• Is it obsolete or is the data still serving a purpose?
• How is the data being collected by the tag?
• What occurs for the tag to collect data?
• All or some pages?

Perform the audit via Excel and provide a detailed breakdown of all the current live tags across the website.

Preview Mode

Chrome is the best browser for this… When using the Preview option (there’s an extension for Chrome – Tag Assistant that aids this in Chrome)

Click on Preview and we’ll go into preview mode via Start Tag Assistant, Enter the URL for the site when prompted

When the page loads, you can see from the Preview area exactly what is happening to the tags; when they are firing, and the variables that have been set for each.