How to Set up AMP (Accelerated Mobile Pages) Tracking with Google Tag Manager

Author:

Google Tag Manager (GTM) provides a streamlined way to manage and deploy marketing tags on your website or mobile app without modifying the codebase. For AMP pages, GTM simplifies the process of implementing tracking solutions, ensuring quick loading times and enhanced user experiences. This guide will walk you through the steps to set up AMP tracking using GTM.

 1. Create a Google Tag Manager Container for AMP

1.1 Sign in to Google Tag Manager

  1. Open Google Tag Manager:

1.2 Create a New Container

  1. Navigate to Admin:
    • Click on the Admin tab located on the left-hand side.
  2. Create Container:
    • In the Account column, select Create Container.
    • Enter a descriptive name for your container (e.g., “AMP Container for MyWebsite”).
    • Choose AMP as the target platform and click Create.
  3. Copy the Container Snippet:
    • After creating the container, GTM provides a code snippet. Copy this snippet as it will be needed in your AMP pages.

 2. Add GTM to Your AMP Pages

2.1 Get the AMP Container Snippet

  1. Container Snippet:
    • Ensure you have copied the GTM container snippet from the previous step.

2.2 Add the Snippet to Your AMP HTML

  1. Edit AMP HTML:
    • Open the HTML files for your AMP pages in a code editor.
    • Paste the GTM snippet into the <head> section of your AMP HTML pages.

 3. Set Up Tags, Triggers, and Variables in GTM for AMP

3.1 Access the AMP Container

  1. Select AMP Container:
    • In GTM, navigate to the AMP container you created.

3.2 Configure Variables

  1. Enable Built-In Variables:
    • Click on Variables in the left-hand menu.
    • Click Configure and enable the relevant built-in AMP variables such as Click Element, Click URL, Page Path, Page URL, etc.

3.3 Create Tags

3.3.1 Google Analytics (GA4) Tag
  1. Add a New Tag:
    • Click on Tags in the left-hand menu and then New.
  2. Configure Tag:
    • Click on Tag Configuration and select Google Analytics: GA4 Configuration.
    • Enter your GA4 Measurement ID.
  3. Set Trigger:
    • Click on Triggering and select All Pages (AMP) to ensure the tag fires on all AMP pages.
3.3.2 Google Analytics (Universal Analytics) Tag
  1. Add a New Tag:
    • Click on Tags in the left-hand menu and then New.
  2. Configure Tag:
    • Click on Tag Configuration and select Google Analytics: Universal Analytics.
    • Set the Track Type to Pageview and enter your Tracking ID.
  3. Set Trigger:
    • Click on Triggering and select All Pages (AMP) to ensure the tag fires on all AMP pages.

3.4 Create Triggers

  1. Add New Triggers:
    • Click on Triggers in the left-hand menu.
    • Create new triggers for specific events you want to track, such as clicks, form submissions, etc.

 4. Configure AMP Analytics in Your AMP HTML

4.1 Add AMP Analytics Configuration

  1. Add amp-analytics:
    • In your AMP HTML, add the amp-analytics configuration to track pageviews and events.

4.2  Add custom Tracking

  1. Extend AMP Analytics Configuration:
    • For custom event tracking, extend the amp-analytics configuration to include triggers for specific events like clicks.

 5. Test Your Setup

5.1 Preview and Debug

  1. Use GTM Preview Mode:
    • In GTM, click Preview to enter preview mode.
    • Enter the URL of your AMP page to start debugging.
  2. Check Debug Pane:
    • Open your AMP page in the browser with the GTM debug pane enabled. Verify that tags fire correctly and data is collected as expected.

5.2 Verify Analytics Data

  1. Real-Time Reports:
    • In your Google Analytics account, check the real-time reports to confirm that pageviews and events are being tracked accurately.

Step 6: Publish Your Container

6.1 Submit and Publish

  1. Submit Changes:
    • Once you are satisfied with your setup, click Submit in the GTM workspace.
  2. Publish Container:
    • Add a version name and description for documentation purposes.
    • Click Publish to make your changes live.

Best Practices for AMP Tracking

Back Up Existing Configurations

  • Export Configuration:
    • Before making major changes, export your current container as a backup. This allows you to revert to the previous state if needed.

Maintain Naming Conventions

  • Consistent Naming:
    • Use consistent and descriptive names for tags, triggers, and variables to avoid confusion and conflicts.

Regular Monitoring

  • Monitor Data:
    • Regularly check your analytics data to ensure it is accurate and up-to-date. Look for anomalies that might indicate tracking issues.

Document Changes

  • Keep Documentation:
    • Maintain detailed documentation of your GTM setup, including changes made and the purpose of each tag and trigger. This is especially useful for team collaborations and troubleshooting.

Example Use Case: Setting Up AMP Tracking for a Blog

  1. Export Existing Container:
    • Export the container from your existing blog site setup.
  2. Create New AMP Container:
    • In GTM, create a new container specifically for AMP.
  3. Import and Adjust Configuration:
    • Import the existing container configuration into the new AMP container.
    • Adjust site-specific settings such as Google Analytics IDs and URLs.
  4. Add AMP Analytics Configuration:
    • Add the amp-analytics configuration to your AMP HTML files.
  5. Test and Publish:
    • Thoroughly test the setup in GTM’s preview mode.
    • Once confirmed, publish the AMP container.

By following this detailed tutorial, you can efficiently set up AMP tracking with Google Tag Manager, ensuring accurate and comprehensive tracking of user interactions on your AMP pages. This enhances your ability to analyze and optimize your mobile content effectively.

Categories: Digital Marketing