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
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
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
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
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
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
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
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
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
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.