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) is essential for tracking user interactions on AMP pages. This process enables you to gather analytics data for AMP pages just like you do for regular web pages. Below, I’ll guide you through the steps needed to set up AMP tracking using Google Tag Manager, covering everything from prerequisites to implementation and testing.

1. Understanding AMP and GTM

AMP (Accelerated Mobile Pages) is an open-source framework designed to enhance mobile web performance. By providing a streamlined version of HTML, it significantly reduces load times, improving user experience on mobile devices.

Google Tag Manager (GTM) is a tag management system that allows you to easily manage JavaScript and HTML tags used for tracking and analytics without modifying the code directly. This integration simplifies the process of implementing and managing tracking codes across your website or app.

2. Prerequisites

Before you begin, ensure you have:

  • An active Google Tag Manager account.
  • An AMP version of your website already set up.
  • Google Analytics set up for your non-AMP pages, as you will be using the same property for tracking AMP pages.

3. Setting Up Google Tag Manager for AMP

Step 1: Create a New GTM Container for AMP

  1. Log in to your GTM account.
  2. Create a new container.
    • Go to “Admin” and select “Create Container.”
    • Choose the container type as “AMP” and give it a name (e.g., “AMP Tracking”).
    • Click on “Create.”

Step 2: Configure Your AMP Container

  1. Choose the “AMP” option in the container setup.
    • This option will generate specific code snippets for your AMP pages.
  2. Copy the generated AMP GTM code.
    • You will need to place this code in the <head> section of your AMP HTML file. This code snippet allows GTM to load correctly on your AMP pages.

4. Implementing Google Analytics in GTM for AMP

Step 3: Add Google Analytics Tag

  1. Open your AMP container in GTM.
  2. Click on “Tags” from the left sidebar.
  3. Create a New Tag:
    • Click on “New” and name your tag (e.g., “GA – AMP Pageview”).
    • Choose “Tag Configuration” and select “Google Analytics: Universal Analytics.”
  4. Set the Tag Type:
    • For “Track Type,” select “Page View.”
    • Enter your Google Analytics Tracking ID (this is the same ID used for your non-AMP pages).
  5. Set Up Triggering:
    • Click on “Triggering” and choose “All Pages” (this will track all AMP page views).

5. Tracking Events in AMP with GTM

To enhance your tracking, you may want to track specific user interactions (like button clicks or form submissions) on your AMP pages.

Step 4: Set Up Event Tracking

  1. Create a new Tag:
    • Click on “Tags” and then “New.”
    • Name your tag (e.g., “GA – AMP Event Tracking”).
    • Choose “Tag Configuration” and select “Google Analytics: Universal Analytics.”
  2. Configure the Event Tag:
    • Set the “Track Type” to “Event.”
    • Fill out the Event Tracking parameters (e.g., Category, Action, Label).
  3. Create a Trigger for the Event:
    • Click on “Triggering” and then “New.”
    • Choose the trigger type based on the interaction you want to track (e.g., “Click” or “Form Submission”).
    • Configure the trigger to fire on specific elements (e.g., buttons or links).

6. Testing Your Setup

Before deploying your AMP tracking setup, it’s crucial to test that everything works as intended.

Step 5: Preview and Debug

  1. Use GTM’s Preview Mode:
    • Click on “Preview” in the GTM interface to enter Preview mode. This allows you to see real-time data about which tags are firing when you interact with your AMP pages.
  2. Open your AMP page in a new tab:
    • In the preview pane, you should see a debug console.
    • Navigate to your AMP page and interact with it to see if the tags are firing as expected.

Step 6: Verify in Google Analytics

  1. Check Real-Time Reports:
    • Log in to your Google Analytics account.
    • Go to “Real-Time” > “Overview” to see if the page views and events are being tracked as you navigate your AMP pages.

7. Publishing Your Changes

Once you’ve confirmed that your AMP tracking setup works properly, it’s time to publish the changes.

  1. In GTM, click on “Submit.”
  2. Add a version name and description (e.g., “Initial AMP Tracking Setup”).
  3. Publish the container.

8. Additional Considerations

  • Using the AMP Validator: After adding GTM code, ensure your AMP pages are still valid. Use the AMP Validator (accessible via the browser’s developer tools) to check for any validation errors.
  • Cross-Domain Tracking: If you have AMP pages that lead to non-AMP pages (or vice versa), consider setting up cross-domain tracking to maintain session integrity.
  • Event Tracking in AMP: Remember that not all HTML elements can be tracked in AMP. Ensure the interactions you wish to track are supported.

9. Conclusion

Setting up AMP tracking with Google Tag Manager provides you with valuable insights into user behavior on your AMP pages. By following the steps outlined above, you can effectively implement Google Analytics tracking for your AMP site. Regularly review your analytics data to optimize user experience and adjust your marketing strategies based on user interactions.

With AMP becoming increasingly vital for mobile web performance, mastering its tracking setup will equip you to make informed decisions that enhance user engagement and drive conversions. Make sure to stay updated with AMP and GTM developments to leverage new features and best practices.

Categories: Digital Marketing