Practical Google Tag Manager & Analytics Training
There's a lot of documentation on GTM and GA out there. Instead of just telling you how to do something, we'll make you do it yourself. Doesn't that sound fun?Getting Started
The purpose of this site is to train you on how to set up Google Tag Manager. Since GTM is used to set up tracking for various other platforms, we'll also get into setting up tracking for tools like Google Analytics and Facebook Ads.
This site is also a sandbox environment. If you provide a GTM container ID then we'll initialize it on this site. We recommend creating a demo Google Tag Manager container and Google Analytics account so you can get full use of this sandbox environment.
Since we're initializing the GTM snippet for you, all code that you run is going to fire into your GTM container and therefore into any platforms that you've connected to that container. We're not responsible for you breaking things, hence why we recommended using a demo environment :)
Start Here
First you'll need both a Google Tag Manager and Google Analytics account:
- Use Google's documentation to Create and Install a Google Tag Manager Container. Create a "Web" account. For the purposes of using this site you don't need to install the GTM container anywhere since we've done it for you. If you have one already, you should still be creating a new, demo account to use with this site. If you did it wrong look in the top right hand corner and click "(Change)."
- Use Google's documentation to Create a Google Analytics Account. If you have one already, you should still be creating a new, demo account to use with this site.
Now you just need to learn a couple of skills to test out and understand your work. These'll get you from no knowledge to basic tracking:
- Learn How to Run Code Snippets.
- Learn The Basic GA / GTM Setup.
- Learn How to Read the Google Tag Manager Preview.
- Learn How to Read the Google Analytics Real Time Report.
Once you've got these down, check out the Basics, Advanced and Third Party Tagging sections.
How to Run Code Snippets
In some cases we'll ask you to run a code snippet. You can do this by copying the code, editing it if applicable, opening your browser's console, pasting it in and hitting return.
What you're doing is running actual JavaScript code on an actual page. The only difference between this and putting it on the website itself is that JavaScript on a website is either implemented in a .js file or between <script> tags in HTML.
Try doing this now with the code on the right. You should get a pop up saying, "Hello World!"
Opening the developer console with different browsers and devices:
- Chrome: Ctrl Shift J (on Windows) or Ctrl Option J (on Mac).
- Firefox: Ctrl Shift K (on Windows) or Ctrl Option K (on Mac).
- Other: See instructions here.
Try changing the code so that it alerts "Hi Code!" instead of "Hello World."
alert('Hello World!');
GIF of Running Code in Console
Some browsers are different, this is an example using Chrome. If you're using Safari you may need to enable developer tools.
The Basic GA / GTM Setup
Log into GTM and navigate to your container. This is your container:
- In the left navigation, click on Tags
- In the top right of the Tags view, click "New"
- Name the tag, "UA - Pageview"
- Click on "Tag Configuration" and select "Google Analytics - Universal Analytics"
- Under Google Analytics Settings, select New Variable.
- Name it "UA - Basic Settings," add your Google Analytics Tracking ID in the Tracking ID field and click Save in the top right
- Click on "Triggering" and select "All Pages"
- Click Save
- In the top right hand corner, click "Submit," "Publish," and "Skip."
That's it! Now you've got the basic GA / GTM setup.
How to Read the Google Tag Manager Preview
You can preview your work in progress in Google Tag Manager before publishing it live. This preview functionality also shows you some other useful information.
- In GTM, in the top right hand corner, click "Preview."
- Refresh this page. If you've put your GTM container ID into this website correctly, you'll see the GTM Preview. Otherwise, check in the top right hand corner of this site to see if you've got the right GTM container ID.
Look at the Summary pane. It currently lists Summary, Window Loaded, DOM Ready and Page View. These are GTM Events. If you click through those you'll notice the content changing. In the Page View tab you'll see, "Tags Fired On This Event," and it will show "UA - Pageview" (if you're exactly following the tutorial).
dataLayer.push({ event:'My First Event' });
How to Read the Google Analytics Real Time Report
Log into GTM and navigate to your container. This is your container:
- In the left navigation, click on Tags
- In the top right of the Tags view, click "New"
- Name the tag, "UA - Pageview"
- Click on "Tag Configuration" and select "Google Analytics - Universal Analytics"
- Under Google Analytics Settings, select New Variable.
- Name it "UA - Basic Settings," add your Google Analytics Tracking ID in the Tracking ID field and click Save in the top right
- Click on "Triggering" and select "All Pages"
- Click Save
- In the top right hand corner, click "Submit," "Publish," and "Skip."
That's it! Now you've got the basic GA / GTM setup.