Introduction
Google Tag Manager (GTM) is a powerful tool that allows you to manage and deploy marketing tags (snippets of code or tracking pixels) on your website or mobile app without having to modify and deploy the code directly. This module will guide you through the basic implementation of Google Tag Manager.
Key Concepts
- Tags: Snippets of code that execute on your site or app.
- Triggers: Conditions that determine when and where tags are executed.
- Variables: Placeholders for values that GTM can use in tags and triggers.
Steps to Implement Google Tag Manager
- Create a Google Tag Manager Account
- Go to the Google Tag Manager website.
- Click on "Create Account".
- Enter your account name and select your country.
- Enter the container name (usually your website's domain) and select the target platform (Web, iOS, Android, AMP).
- Click "Create" and accept the terms of service.
- Install the GTM Container Code
- After creating your container, you will be provided with two snippets of code.
- Copy the first snippet and paste it as high in the
<head>of the page as possible. - Copy the second snippet and paste it immediately after the opening
<body>tag.
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXX');</script>
<!-- End Google Tag Manager -->
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
- Configure Your First Tag
- Go to your GTM workspace.
- Click on "Add a new tag".
- Click on "Tag Configuration" and select a tag type (e.g., Google Analytics: Universal Analytics).
- Configure the tag settings (e.g., Tracking ID for Google Analytics).
- Click on "Triggering" and select a trigger (e.g., All Pages).
- Save your tag.
- Publish Your Container
- Click on "Submit" in the top right corner of the GTM workspace.
- Add a version name and description.
- Click "Publish".
Practical Example: Adding a Google Analytics Tag
Step-by-Step Example
-
Create a New Tag:
- Go to your GTM workspace.
- Click on "Add a new tag".
-
Configure the Tag:
- Click on "Tag Configuration".
- Select "Google Analytics: Universal Analytics".
- Choose "Page View" as the Track Type.
- Enter your Google Analytics Tracking ID (e.g., UA-XXXXXX-Y).
-
Set Up the Trigger:
- Click on "Triggering".
- Select "All Pages".
-
Save and Publish:
- Click "Save".
- Click "Submit" and then "Publish".
<!-- Example Google Analytics Tag Configuration -->
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'UA-XXXXXX-Y', 'auto');
ga('send', 'pageview');
</script>Exercises
Exercise 1: Setting Up a Click Trigger
- Create a new tag in GTM.
- Configure the tag to use "Google Analytics: Universal Analytics".
- Set the Track Type to "Event".
- Enter the following event parameters:
- Category: "Button"
- Action: "Click"
- Label: "Sign Up Button"
- Create a new trigger:
- Trigger Type: "Click - All Elements"
- Configure the trigger to fire on clicks to a specific button (e.g., button ID or class).
- Save and publish your container.
Solution
<!-- Example Click Trigger Configuration -->
<script>
// Tag Configuration
ga('create', 'UA-XXXXXX-Y', 'auto');
ga('send', 'event', 'Button', 'Click', 'Sign Up Button');
</script>Exercise 2: Setting Up a Form Submission Trigger
- Create a new tag in GTM.
- Configure the tag to use "Google Analytics: Universal Analytics".
- Set the Track Type to "Event".
- Enter the following event parameters:
- Category: "Form"
- Action: "Submit"
- Label: "Contact Form"
- Create a new trigger:
- Trigger Type: "Form Submission"
- Configure the trigger to fire on form submissions.
- Save and publish your container.
Solution
<!-- Example Form Submission Trigger Configuration -->
<script>
// Tag Configuration
ga('create', 'UA-XXXXXX-Y', 'auto');
ga('send', 'event', 'Form', 'Submit', 'Contact Form');
</script>Common Mistakes and Tips
- Not Publishing Changes: Always remember to publish your container after making changes.
- Incorrect Trigger Configuration: Ensure that your triggers are correctly configured to fire on the desired events.
- Missing Tracking ID: Double-check that you have entered the correct tracking ID for your tags.
Conclusion
By following this guide, you should now have a basic understanding of how to set up and implement Google Tag Manager on your website. You have learned how to create tags, configure triggers, and publish your container. This foundational knowledge will enable you to effectively manage and deploy various marketing tags, enhancing your digital analytics capabilities.