Web Development Best Practices

Google Tag Manager How-To Series Part 3

Jeff Metter, CTO

Posted by: Jeff Metter   |   Share:

So what is Google Tag Manager? Google Tag Manager is a tool that allows you to organize and maintain all of your tracking scripts in one place without having to edit the code of your website. In this video I’m going to show you how to setup tracking for AMP pages.

This is the third video in our Google Tag Manager How-To Series.


What is AMP?

AMP stands for Accelerated Mobile Pages. The AMP Project is an open-source initiative aiming to make the web better for all. The project enables the creation of websites and ads that are consistently fast, beautiful and high-performing across devices and distribution platforms.

Step 1: Create AMP Container

  • Go to https://tagmanager.google.com and create an account or use the account that we created in part one of this series.
  • Click create container and name your container and select “AMP” for where to use the container.
  • Click Create.
  • Copy both parts of the Google Tag Manager snippet and add it to your AMP pages in the recommended locations. *Note that these snippets are different than the normal Google Tag Manager tracking codes because AMP has its own proprietary JavaScript.

Step 2: Adding Universal Analytics Tag

  • Click Tag, then New and name the tag “Google Analytics”.
  • Under “Tag Configuration” select “Google Analytics – Universal Analytics.”
  • Add the Tracking ID.
  • For “Track Type” choose “Page View”.
  • For triggering select the “All Pages”.
  • Click Save

Step 3: Setup Client ID Tracking

When someone comes from Google search results and lands on an AMP cache page and then clicks through to your site it will allow Google to see this as one session. If we implement client ID tracking correctly session duration, bounce rate and pages per session will all be reported more accurately in Google Analytics. View Google’s Documentation.

  • Opt in on your AMP pages by adding this meta tag to the head of all of your AMP pages.
    <meta name=”amp-google-client-id-api” content=”googleanalytics”>
  • Opt in on your non-AMP pages by making sure that the first call to the Analytics create function has the useAMPclientID parameter set to true.
  • In the Web container in the Google Analytics variable click Google Analytics Settings > More Settings > Fields to Set and put useAMPclientID and true.
  • Click Save
  • In Google Analytics setup a referral exclusion for cdn.ampproject.org.
  • Verify setup using the mobile emulator in Chrome Dev Tools.

Now we have Google Analytics setup on AMP pages and website pages and configured in a way to allow Google to track users sessions as accurately as possible from the AMP pages to the non-AMP pages. This was the last part of the Google Tag Manager how-to series. Hopefully now you have a better understanding of not only what Google Tag Manager is but how to use it to setup and manage all of your tracking scripts.

For your reference, here are the other blogs in this series:
Part One – Google Tag Manager How-To Series Part 1
Part Two – Google Tag Manager How-To Series Part 2

If you are having trouble setting up Google Tag Manger or need help with some of the more advanced features please contact us.

Get Help with Google Tag Manager