How to use Google Tag Manager for tracking AMP pages

Author:

Using Google Tag Manager (GTM) for tracking AMP (Accelerated Mobile Pages) pages requires special consideration due to AMP’s restrictions and the unique structure of its pages. AMP pages load quickly and are optimized for mobile devices, but they limit the use of traditional JavaScript and external scripts. Fortunately, Google Tag Manager supports AMP pages through the use of the AMP container and specific tags that are compatible with AMP’s limitations.

Here’s how you can set up Google Tag Manager to track AMP pages effectively:

Step 1: Create an AMP Container in Google Tag Manager

AMP pages require a special GTM container that is specifically designed for AMP. This container is lightweight and compliant with AMP’s restrictions, allowing you to add tags that work in the AMP environment.

  1. Create a New GTM Container:
    • Log into your Google Tag Manager account.
    • Click on Create Account (if you don’t have one set up yet).
    • In the container setup, select Web as the platform.
    • Choose AMP as the container type.
    • Name the container according to your AMP website or page (e.g., example.com - AMP).
    • Once created, GTM will generate an AMP-compatible container code that you need to implement on your AMP pages.
  2. Add GTM Code to AMP Pages:
    • GTM provides you with an AMP-specific code that you need to add to the <head> and <body> sections of your AMP pages. This code will enable GTM to load and manage tags properly within AMP constraints.

Step 2: Implement AMP-Specific Tags

Due to the AMP restrictions on custom JavaScript, Google Tag Manager will not allow traditional tags such as Google Analytics via standard JavaScript snippets. Instead, GTM provides AMP-compatible tags that you can use for tracking and other functions.

Using AMP Tags in GTM

Here’s how to configure tracking tags in GTM for AMP pages:

  1. Google Analytics (AMP Version):
    • GTM has a built-in tag for AMP pages to track user interactions via Google Analytics. You need to use the AMP Analytics tag instead of the standard Google Analytics tag.

    Steps to Add AMP Analytics Tag:

    • In your GTM container, click on Tags > New.
    • Choose AMP Analytics as the tag type.
    • Configure the Google Analytics Tracking ID (e.g., UA-XXXXXX-X for Universal Analytics or a GA4 measurement ID for GA4).
    • Under Tracking Type, choose the relevant option (e.g., Pageview).
    • Add any custom dimensions or metrics that you might need.
    • Set up triggers for when the tag should fire. For instance, you can use the “All Pages” trigger to track pageviews across all AMP pages.
  2. AMP Click Tracking:
    • If you want to track clicks on AMP elements (e.g., links, buttons), use the AMP Click Analytics tag.

    Steps to Add Click Tracking:

    • Create a new tag in your GTM container.
    • Select AMP Click Analytics as the tag type.
    • Set the Click Selector (the CSS selector for the element you want to track, such as a link or button).
    • Configure any necessary event parameters (e.g., category, action, label) to organize your data in Google Analytics or another analytics platform.
    • Set the trigger to Click Trigger, which will fire whenever the selected element is clicked on your AMP page.
  3. AMP Form Tracking:
    • To track form submissions on AMP pages, use the AMP Form Analytics tag.
    • Follow similar steps as for click tracking but configure the form selector and form submission trigger.
  4. Custom Event Tracking:
    • For any custom events you want to track, you can set up AMP Custom Event Tags.
    • Define the event category, action, and label, and trigger it on a specific user interaction (e.g., a button press or form submission).

Step 3: Configure Triggers for AMP Pages

Triggers in Google Tag Manager are used to define when and where a tag should fire. For AMP pages, triggers are typically based on user interactions or page views.

  1. Pageview Trigger:
    • This is used to fire tags when an AMP page is loaded. Set the trigger to Pageview or AMP Pageview to capture standard page visits.
  2. Click Triggers:
    • Use Click triggers to fire tags when users click on AMP elements (such as links or buttons). You can specify which elements to track by using CSS selectors (e.g., track clicks on specific buttons or links).
  3. Form Submission Trigger:
    • To track form submissions, set up a trigger that activates when a user submits a form. You can use a form selector and specify the actions for tracking form submissions.
  4. Custom Event Trigger:
    • For advanced tracking needs, you can create custom events that fire based on specific user actions. This might include interactions such as scrolling, video plays, or other non-standard events.

Step 4: Test Your Tags and Triggers

Once your GTM container is configured for AMP, it’s essential to test the setup thoroughly to ensure that your tags are firing correctly and that data is being collected as expected.

  1. Preview Mode:
    • GTM offers a Preview Mode where you can test your AMP tags before they go live. This tool lets you view which tags fire on specific pages and verify that triggers are working as expected.
  2. Google Analytics Real-Time Reports:
    • After setting up Google Analytics tracking, use the Real-Time Reports in Google Analytics to monitor live data. This will help confirm that your AMP tags are sending data correctly.
  3. AMP Validation:
    • AMP pages need to pass AMP validation to work properly. Use the AMP Validator to ensure that your AMP pages are compliant with AMP standards and that the GTM container and tags are integrated correctly.

Step 5: Implement Advanced Tracking for AMP (Optional)

In addition to basic tracking, you might want to set up more advanced tracking features for your AMP pages.

  1. Track Dynamic Content:
    • If your AMP pages include dynamic content (e.g., infinite scroll, AJAX-loaded content), you’ll need to adjust your tags and triggers to account for those changes. AMP allows you to track user interactions with dynamic content by using custom events or specific AMP components.
  2. Enhanced E-commerce Tracking:
    • If you’re running an e-commerce site on AMP, you can set up Enhanced E-commerce tracking through Google Analytics using the AMP E-commerce tags in GTM. This involves tracking events such as product views, add-to-cart actions, and purchases.
  3. Custom Dimensions and Metrics:
    • You can capture custom data (such as user IDs, product categories, etc.) using custom dimensions and metrics in Google Analytics. These values can be pushed to GTM using AMP’s custom variables and passed to Google Analytics for detailed reporting.

Step 6: Publish the Container

After testing and ensuring everything is working as expected, publish your Google Tag Manager container for AMP pages.

  1. Publish the Container:
    • Once you’re satisfied with the setup, click the Submit button in GTM to publish your container.
    • GTM will update the AMP container across all pages where the GTM code is installed.

Conclusion

Tracking AMP pages using Google Tag Manager requires using the AMP-specific container and tags. While AMP pages limit the use of JavaScript, GTM offers AMP-compatible tags like AMP Analytics, AMP Click Analytics, and AMP Form Analytics to track user interactions. By configuring proper triggers, testing the tags, and ensuring compliance with AMP standards, you can successfully implement tracking for your AMP pages and gather valuable user data for analytics and marketing purposes.

Categories: Digital Marketing