10 cool things you can do with Google Tag Manager

to manage and track your website better

10 min readSep 2, 2014

Google Tag Manager is a free service that allows easy injection of tags on websites. In simple words, Tag Manager helps you fire JavaScript code, such as Google Analytics tracking code on your website or specific sections of your website.

I started using Google Tag Manager a year ago and since then became probably it’s biggest fan on Earth, as it allows enhancing your analytics setup and provides an easy way to introduce changes to your website.

Tag Manager allows you to do so many things, and this article is an attempt to help you get started with a few. To fully benefit from the article you need to grasp a few concept behing Google Tag Manager:

Tag Container: a collection of tags that are defined in Google Taga Manager and are fired on your website
Tag: a single script that is fired based on a rule (i.e. fire AdWords Conversion Tag when a visitor registers on the website)
Rule: a URL-based or event-based rule that causes the tag to fire (i.e. user submits registration form)
Macro: a variable, either predefined or collected from an element or code on the website, that can be used in defining the rules (i.e. page URL or HTML form id)

Let’s get started:

1. Add all tracking scripts you need without the help from engineers

The most obvious benefit of using Google Tag Manager is the ability to publish all tracking scripts without involving your engineers (just make sure you don’t break the website).

If you have Google Tag Manager installed on your website you can easily adjust and publish Google Analytics, Piwik, Kissmetrics, Optimizely, Hubspot or whatever other tracking scripts you use.

Tag Manager has a predefined tag for inserting Google Analytics or Universal Analytics tracking codes, but you can always use Custom HTML tag to add tracking codes for other tools:

When setting up Google Analytics or similar tracking scripts make sure you add “All pages” to the Firing Rules for the script to run on all pages of your website.

2. Set up Google Analytics goal tracking

It is super easy to set up event-based Google Analytics goals. Using Tag Manager you fire a Google Analytics event when a certain event is happening (i.e. a visitor reached Registration Page) and then use this event to set up event-based goal in Google Analytics.

Start by creating a Google Analytics Tag in Tag Manager:

Insert the Tracking ID (Google Analytics profile ID, UA-XXXXXX), chose Tracking Type “Event” and fill in the Category, Action and Label names for the event you want to track:

In this example, Tag Manager will fire a Google Analytics event with the Category “user-flow” and Action “registration-page-visit”.

The only thing left, is to define the Firing Rules for this event to fire when a user visits “Registration Page” (assuming the URL of the “Registration Page” is something like www.greatwebsite.com/register):

Save and publish Google Tag Manager container, and let’s set up the event-based goal in Google Analytics by chosing “Goals” under the view section:

Chose “Custom” at the first step of goal set up:

Type in the goal name and chose type “Event”:

Type in the Category and Action names that you used when setting up the Tag Manager event:

That’s it! Every time someone visits the “Registration Page”, Tag Manager will fire a Google Analytics event and Google Analytics will register goal conversion based on this event.

3. Fire AdWords Conversion Tag to measure conversions from SEM campaigns

If you use AdWords in your marketing mix, then you might be interested in tracking conversions this channel generates. Setting up AdWords Conversion Tag is extremely easy and come with a predefined tag:

Add Conversion ID and Conversion Label for the AdWords conversion that you want to track (you can find both under Tools -> Conversions). You can also add Conversion Value, but it is optional:

Finally, define the Firing Rule for the AdWords Conversion Tag to fire:

The above example assumed that after a user registers on the website, he or she is redirected to the URL www.greatwebsite.com/welcome; however, you can read further to learn how to set up a rule when there is no such “Welcome” page (hint: fire the tag on user registration form submission).

4. Fire AdWords Remarketing Tag to collect remarketing lists

You can also use a predefined tag to fire AdWords Remarketing Tag:

To complete the setup you need to find the Conversion ID (under your AdWords account navigate to Campaigns -> Shared Library -> Audience and find the conversion id for All visitors tag).

Define Firing Rules as “All pages” for the remarketing tag to collect the list of all visitors to your website. Save and publish.

5. Style your website with CSS

Sometimes you need to style or hide a particular element on your website (i.e. the regulator issued a new rule regulating the minimum font size of the financial warning). If your CMS allows it’s great, but there might be cases where you urgently need to do it and the engineers are not available or you just can’t wait for the next release cycle.

In this case, Google Tag manager offers a Custom HTML tag:

Just wrap your CSS with <style></style> and set up the correct Firing Rules. Please also try to implement the change using a more permanent option; style your website with Tag Manager is great, but it has it’s limitations.

6. Style your website with JavaScript

What if CSS alone is not enough and you need to add extra text of elements to the webpage (and the engineers are still not available)? That’s easy with the same Custom HTML tag and some knowledge of JavaScript or JQuery.

Add a new Custom HTML tag, write your JavaScript code (don’t forget to wrap it with <script></script> and set up the Firing Rules.

Use .append(), .before() and .after() for adding block of HTML. For instance, if you need to add a warning before your website’s footer you could use the following:

<script> $( “#footer” ).before( “<h3>Warning before website’s footer</h3>” );
</script>

Using a combination of CSS and JQuery you have very few limits of the ways you can adjust your website!

7. Track button clicks

On particular occassions you might be interested in tracking button clicks on specific pages. For instance, you added a “Share on Twitter” button and would like to track the number of times people clicked on it.

In order to track the clicks of this button using Tag Manager we need to set up Google Analytics event firing (essentially, every time someone clicks “Share on Twitter” button, a Google Analytics event is fired). At first, create a Click Listener tag and fire it either on All Pages or on a specific page (use Firing Rules to control on which pages the clicks are tracked).

Now you need to add a Google Analytics tag (chose either Universal Analytics or Classic Google Analytics depending on which version of Google Analytics you are using) to fire an event that will be fired each time the “Share on Twitter” button is clicked.

Insert the Tracking ID of your Google Analytics profile, change the Track Type to “Event” and enter Category, Event and Action names for the event (use naming convension that suits your taste):

In the example above, every time “Share on Twitter” button is clicked an event with Category “button-clicks” and Action “share-on-twitter-button-click” will be fired.

Finally, you need to set up Firing Rules for this Google Analytics tag (we want it to be fired only when the “Share on Twitter” button is clicked):

In the example above the Firing Rule has two rules: 1) there is a gtm.click event is fired (this is fired by the Click Listener tag that we set up earlier), and 2) when the {{element id}} (or the id of the HTML element which was clicked) equals “shareontwitterbutton” (this assumes that “Share on Twitter” button has id=”shareontwitterbutton”, but you can adjust this value to reflect your website).

That’s it, now you can see clicks on the “Share on Twitter” button in Google Analytics:

8. Track file downloads

In case you want to track file downloads off your website (i.e. downloads of the media kit from “About Us” page). Similarly to button click tracking you need to fire a Google Analytics event firing using Tag Manager.

Follow the steps from “Track Button Clicks” to create a “Link Click Listener” tag (make sure you chose “Link Click Listener” not “Click Listener” when setting up the tag).

Again, add a Google Analytics tag with Track type of “Event” and chose the names for Category, Action and Label (you can name as the way you prefer):

And set up the Firing Rules to track click on the Media Kit downloan URL:

As you can see from the above, the Google Analytics event will be fired when: 1) Link Click Listener captures a link click (gtm.linkClick event), and 2) the link URL includes media-kit.pdf (this assumes that you link to the Media Kit using <a hreg=”/download/media-kit.pdf”>Download Media Kit</a>).

That’s it, every time someone click on the Media Kit download link a Google Analytics event fill be fired (another reason to check Real-Time section of your GA).

9. Track form submissions

On some occassions, you want to track a specific action, such as user registration, but Google Analytics’ URL based goals are not an option (i.e. you don’t have a dedicated “Thank you for registration” page). In this case you can use Form Listener tag and create events when a specific form is submitted.

Similarly to button click and file download tracking you first create a listener. Chose Form Submit Listener this time:

Next, create a Google Analytics tag, choose Track type “Event” and fill in the Category, Action and Label of your choice:

Finally, set up the Firing Rules for the Google Analytics event to fire when User registration form is submitted (assuming this form has id “user-registration-form”):

Save, Publish Tag Manager container and check if this tag is fired correctly using Google Analytics Real-Time section.

10. Track JavaScript errors

Finally, you might be interested in tracking JavaScript errors on your page (i.e. failing affiliates tracking script). Again, you will need to set up a listener tag and fire and event when this listener tag captures a Javascript error.

Let’s first set up, the JavaScript Error Listener Tag: