How to set up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager

Author:

Setting up AMP (Accelerated Mobile Pages) tracking with Google Tag Manager (GTM) allows you to track user interactions on your AMP pages, similar to how you would track traditional web pages. However, AMP pages have a slightly different structure and limitations compared to regular pages, so you need to ensure that the tracking is implemented properly to work within the AMP framework.

Here’s a step-by-step guide on how to set up AMP tracking with Google Tag Manager:

1. Create a New Container for AMP Pages

If you’re using Google Tag Manager (GTM), the first thing you should do is ensure that you have a container set up specifically for your AMP pages. This will help you keep your AMP tags separate from your non-AMP tags.

Steps to create a container for AMP:

  1. Login to Google Tag Manager:
  2. Create a New Container:
    • Click on Admin in the sidebar.
    • Under Container, click Create Container.
    • Select Web for the platform and name the container appropriately (e.g., “AMP Container”).
    • Choose AMP under the “Target Platform” option.
    • Click Create and agree to the GTM Terms of Service.
  3. Add the AMP Container to Your AMP Pages:
    • After creating the container, you will be given a code snippet to include in the head of your AMP pages. You must include the GTM container code in your AMP HTML file for GTM to function on your AMP page.
    html
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

2. Install AMP Analytics

Since AMP pages are optimized for speed and have restrictions on traditional JavaScript, you need to use the <amp-analytics> tag for tracking purposes. GTM can trigger AMP-compatible analytics tags using amp-analytics instead of standard analytics tags.

Steps to Install AMP Analytics:

  1. Add the AMP Analytics Script to the AMP Page:
    • In your AMP HTML, add the following code to load the AMP Analytics component:
    html
    <script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
  2. Create an AMP Analytics Configuration:
    • AMP pages use the <amp-analytics> element to configure analytics tracking. This element should be placed within the <body> tag of your AMP page.
    html
    <amp-analytics type="googleanalytics">
    <script type="application/json">
    {
    "vars": {
    "account": "UA-XXXXXX-X"
    },
    "triggers": {
    "trackPageview": {
    "on": "visible",
    "request": "pageview"
    }
    }
    }
    </script>
    </amp-analytics>
    • Replace "UA-XXXXXX-X" with your own Google Analytics tracking ID.
    • The configuration provided will track pageviews when the page becomes visible to the user.

3. Set Up Google Analytics Tags in GTM

Now that you’ve set up the necessary <amp-analytics> code, you’ll need to configure the tags within Google Tag Manager to trigger the AMP-compatible tracking.

Steps to set up Google Analytics tracking in GTM for AMP:

  1. Log in to Google Tag Manager:
  2. Create a New Tag:
    • Go to your AMP Container in GTM.
    • Click Tags in the left sidebar.
    • Click New to create a new tag.
    • Choose the Tag Type as AMP Analytics.
  3. Configure Your Google Analytics Tag:
    • Select Google Analytics as the tag type for the AMP Analytics configuration.
    • In the tag configuration, choose Google Analytics: Universal Analytics as the tag type.
    • Enter your Tracking ID (e.g., UA-XXXXXX-X) in the Tracking ID field.
    • Set Track Type to Page View.
  4. Add Trigger:
    • Set the trigger to All Pages or a specific trigger based on your needs. This will determine when the tag should fire (typically when a page is loaded).
  5. Save and Publish:
    • Save the tag and publish the changes in your GTM container.

4. Use Other Tags for Enhanced Tracking

AMP supports enhanced tracking features such as tracking interactions, events, form submissions, and clicks. Below are the common use cases and how to set them up in GTM:

Track Form Submissions on AMP:

To track form submissions on AMP pages, you can use the <amp-analytics> tag configured to capture form submissions.

html
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXX-X"
},
"triggers": {
"submitForm": {
"on": "submit",
"selector": "form",
"request": "event",
"vars": {
"eventCategory": "Form",
"eventAction": "Submit",
"eventLabel": "Contact Form"
}
}
}
}
</script>
</amp-analytics>

This setup tracks form submissions and sends an event to Google Analytics with the category “Form,” action “Submit,” and label “Contact Form.”

Track Clicks on AMP:

To track user clicks on buttons, links, or other elements in AMP, you can create an <amp-analytics> trigger for clicks.

html
<amp-analytics type="googleanalytics">
<script type="application/json">
{
"vars": {
"account": "UA-XXXXXX-X"
},
"triggers": {
"trackClicks": {
"on": "click",
"selector": ".cta-button",
"request": "event",
"vars": {
"eventCategory": "Button",
"eventAction": "Click",
"eventLabel": "CTA Button"
}
}
}
}
</script>
</amp-analytics>

5. Test and Debug AMP Tags

Before you publish your AMP tags, it is crucial to test and debug the configuration to ensure everything is working as expected.

Steps to test your AMP tags:

  1. Use Google Tag Manager’s Preview Mode:
    • Enable Preview Mode in GTM to test and debug your AMP tags. It lets you preview changes without making them live.
    • Visit your AMP pages in a browser with the GTM preview mode enabled and check that the AMP tags are firing correctly.
  2. Use Google’s AMP Validation Tool:
    • Use Google’s AMP Validator to ensure your AMP pages are valid and compliant with AMP requirements.
    • Make sure that the <amp-analytics> elements are correctly configured and firing.
  3. Use Google Analytics Real-Time Reports:
    • You can also check Google Analytics real-time reports to verify that your pageviews, events, or interactions are being tracked properly.

6. Publish Your Container

After confirming that all AMP tracking works as expected in Preview Mode and testing, you can publish the container in GTM to make the changes live.

Conclusion

Setting up AMP tracking with Google Tag Manager is a straightforward process, but it requires careful consideration of the AMP framework’s restrictions and how analytics tags should be configured. By using <amp-analytics> and configuring Google Tag Manager to handle AMP tags appropriately, you can track pageviews, events, and interactions on your AMP pages, just like you would on a regular website. Remember to thoroughly test and validate your AMP pages to ensure that your tracking is functioning correctly before going live.

Categories: Digital Marketing