Categories
Explainer Public

Google Tag Manager Examples

What is Google Tag Manager (GTM)

Google Tag Manager may seem complicated, but it is really just a way to add arbitrary Javascript to your website at runtime.

Examples

Example 01: Adding Simple JavaScript to a web page

Link

This container uses a “Custom HTML” tag to insert arbitrary JavaScript into a webpage. The custom HTML tag is triggered by the built-in “All Pages” trigger.

Example 02: Adding jQuery to a web page

These containers use a “Custom HTML” tag triggered by the built-in “All Pages” trigger to insert the jQuery JavaScript library. They then fire a second “Custom HTML” tag to add arbitrary JavaScript/jQuery code to the page. Of course you have to wait to execute your jQuery code until the jQuery library has fully loaded.

02a: Adding jQuery using Tag Sequencing

Link

In this example, we use tag sequencing to make sure that the jQuery JavaScript library has fully loaded before we attempt to add the arbitrary jQuery code.

02b: Adding jQuery Using a Timer

Link

In this example, we use a JavaScript timer to make sure that the jQuery JavaScript library has fully loaded before we attempt to add the arbitrary jQuery code.

Example 03: Adding GA tracking code to a web page

Link

Of course, you could use the ability to insert arbitrary JavaScript to add the standard Google Analytics JavaScript code to your website.

Example 04: Using GTM's built-in Universal Analytics tag to add GA tracking code to your website

Link

Of course, GTM has a pre-made tag that can do the same thing we did in example 3. This example sends a page view to Google Analytics using a standard built-in “Universal Analytics” tag. The Universal Analytics tracking tag uses a “Google Analytics Settings” variable to store the Google Analytics settings (namely the property ID).

Note that example 04 is exactly equivalent to example 03. The Javascript code we inserted manually in example 03 is the same code inserted by the built-in “Universal Analytics” tag used in this example.

Example 05: Using GTM's built-in Universal Analytics tag - with an additional variable to store the property ID - to add GA tracking code to your website

Link

This example is exactly equivalent to example 04, except that the GA property ID is stored in a separate variable, which is then referenced in the Google Analytics Settings variable. In more complicated implementations, using variables can make updates much easier.

Example 06: simple event tracking

Link

This example shows how to implement simple event tracking. When the test button is clicked, an event is sent to GA. In GTM, we set-up a trigger to listen for clicks on the test button. We then set-up a tag to send the desired event to GA, which is fired by the test button click trigger.

Example 07: slightly more complicated event tracking using built-in variables

Link

This example shows how to implement event tracking such that, when any of a number of test buttons are clicked, an event is sent to GA. In GTM, we set-up a trigger to listen for clicks on any element of a specific class. We then set-up a tag to send the desired event to GA, which is fired by the click trigger. The event uses built in variable to send the button’s element ID and text label in the event data that goes to GA.

Example 08: flexible event tracking using the event catch-all tag method

Example 09: tracking embedded YouTube video interactions

Example 10: tracking form completion using a custom HTML tag

Link

This example demonstrated a method to implement custom event tracking of form completions (not submissions). In this implementation, when all required fields of the form have been completed (and before the form has actually been submitted) it will send a GA event sent to the Google Analytics test property (UA-2713134-93). This is useful as a proxy for submissions in cases where you can’t accurately track actual form submissions.