Graphed LogoGraphed
Graphed LogoGraphed
How It WorksAgentsIntegrationsPricing

How to Add Google Analytics Code in AMP Page

Cody Schneider••8 min read

Setting up Google Analytics on an Accelerated Mobile Page (AMP) isn't the same as on a standard HTML page. Because AMP restricts custom JavaScript for speed, the usual gtag.js tracking code won't work. This article provides a clear, step-by-step guide on how to properly implement Google Analytics on your AMP pages using the required <amp-analytics> component so you can accurately measure your mobile traffic.

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

What is AMP and Why Does It Need Special Analytics?

AMP technology is a framework developed by Google designed to make mobile web pages load almost instantly. It achieves this incredible speed by enforcing strict coding standards and limiting the use of certain elements, most notably custom JavaScript.

The standard Google Analytics tracking script is a JavaScript file. Since AMP pages block this type of script to maintain performance, you can't just copy and paste the same GA code you use on the rest of your site. Instead, AMP provides its own specialized component, <amp-analytics>, to handle tracking. This component is an approved, performance-optimized way to send interaction data to analytics platforms like Google Analytics without slowing down the page load.

Without this setup, you'll have a major blind spot. You won't know how many visitors your AMP pages attract, where they come from, or what they do after they arrive. Implementing <amp-analytics> gives you the visibility you need to understand your mobile audience's behavior and the value of your AMP content.

Before You Start: What You'll Need

Gather these two items before you begin the implementation. Having them ready will make the process much smoother.

  • Access to Your Website's Code: You'll need to be able to edit the HTML of your AMP pages. This might be direct access to the files or through a content management system (CMS) that allows you to modify the page template's head and body sections.
  • Your Google Analytics 4 Measurement ID: This is a unique identifier for your data stream. You can find it in your Google Analytics account under Admin > Data Streams. It will be in the format G-XXXXXXXXXX.

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

Step-by-Step: Adding Google Analytics to Your AMP Pages

Implementing AMP analytics involves two main steps: adding the component script to the page's <head>, and then placing and configuring the tracking tag in the <body>.

Step 1: Add the amp-analytics Component Script

First, you must include the required JavaScript file for the <amp-analytics> component. This script provides the functionality needed to track stats. This is the only script you'll need for this process, and it must be placed within the <head> section of your AMP page's HTML.

Copy and paste this line into your AMP page's <head>:

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

If you forget this script, the analytics tag you add in the next step will not function, and no data will be sent to Google Analytics.

Step 2: Add and Configure the Analytics Tag

Next, you need to add the <amp-analytics> tag to your page's HTML. This piece of code should be placed directly after the opening <body> tag. It contains a JSON configuration script that tells AMP how to track activity and where to send the data.

Here is the standard code for a GA4 implementation. Copy this and place it in your page's body:

`<amp-analytics type="googleanalytics">

<script type="application/json"> { "vars": { "gtag_id": "G-XXXXXXXXXX", "config": { "G-XXXXXXXXXX": { "page_path": "/amp/your-page-slug", "page_title": "Your Page Title Here" } } }, "triggers": { "pageview": { "on": "visible", "request": "pageview" } } } </script>

</amp-analytics>`

GraphedGraphed

Build AI Agents for Marketing

Build virtual employees that run your go to market. Connect your data sources, deploy autonomous agents, and grow your company.

Watch Graphed demo video

Understanding and Customizing the Configuration

The code above works, but you need to customize it with your own information. Let's break down what each part does:

  • type="googleanalytics": This attribute tells <amp-analytics> to use the pre-defined configuration for Google Analytics. You don't need to change this.
  • "gtag_id": "G-XXXXXXXXXX": This is the most important part. Replace G-XXXXXXXXXX with your actual GA4 Measurement ID. This directs the tracking data to your specific Analytics account.
  • "page_path": "/amp/your-page-slug": This specifies the page path that will show up in your reports. It's often helpful to prefix AMP pages (e.g., with /amp/) to easily segment them in Google Analytics.
  • "page_title": "Your Page Title Here": This sets the page title in your GA reports. You should make this the actual title of your page.
  • "triggers": This section defines when to send tracking data. In this example, the trigger named pageview fires when the page becomes visible ("on": "visible"), and when it does, it sends a pageview request. This is the standard configuration for tracking page views.

After replacing the placeholder values with your specific ID and page details, your core tracking is fully configured and ready to go.

How to Track Events like Button Clicks

Pageviews are essential, but you'll likely want to track other interactions, such as clicks on call-to-action buttons, file downloads, or outbound link clicks. You can accomplish this by adding more triggers to your JSON configuration.

For example, let's say you want to track clicks on a "Request a Demo" button that has the HTML ID demo-request-btn.

You would add a new trigger to your configuration like this:

`<amp-analytics type="googleanalytics">

<script type="application/json"> { "vars": { "gtag_id": "G-XXXXXXXXXX", "config": { "G-XXXXXXXXXX": { "page_path": "/amp/your-page-slug" } } }, "triggers": { "pageview": { "on": "visible", "request": "pageview" }, "demoButtonClick": { "on": "click", "selector": "#demo-request-btn", "request": "event", "vars": { "event_name": "request_demo", "event_category": "Lead Generation" } } } } </script>

</amp-analytics>`

Here's what was added:

  • "demoButtonClick": A new, descriptive name for our trigger.
  • "on": "click": Sets the trigger to fire when an element is clicked.
  • "selector": "#demo-request-btn": This targets the specific element to watch for clicks. In this case, an element with the ID demo-request-btn. You can also use class selectors like .cta-button.
  • "request": "event": Specifies that we are sending an event, not a pageview.
  • The vars section defines the event parameters that will appear in GA4: event_name and event_category.

How to Verify Your AMP Analytics Setup

After you've added the code, it's a good idea to confirm that it's working properly. There are a few easy ways to do this.

Free PDF · the crash course

AI Agents for Marketing Crash Course

Learn how to deploy AI marketing agents across your go-to-market — the best tools, prompts, and workflows to turn your data into autonomous execution without writing code.

1. Use Google Analytics Real-Time Reports

This is the simplest method. Once you've published your page with the tracking code, open it on your mobile phone or in a desktop browser.

Then, in another tab, log in to your Google Analytics account and navigate to Reports > Real-time. If your setup is correct, you should see yourself as one of the "Users in the Past 30 Minutes." You can also see the specific page title or path you triggered, confirming that data is being received.

2. Check Browser Developer Tools

For a more technical confirmation, you can use your browser's developer tools.

  • Open your AMP page in Chrome.
  • Right-click anywhere on the page and select "Inspect."
  • Go to the "Network" tab.
  • In the filter box, type collect to search for tracking pings.
  • Refresh the page. You should see a request being sent to a URL including google-analytics.com/g/collect.... This confirms that your browser is successfully sending data to Google's servers.

Common Mistakes and Troubleshooting

If you can't see traffic in your Real-time report, here are a few common issues to check for:

  • The Component Script is Missing: Double-check that the amp-analytics script is present in the <head> of your HTML document. This is the most frequent cause of problems.
  • Invalid JSON: The configuration within the <script> tag must be perfectly formatted JSON. A common error is a missing comma between triggers or an extra one at the end of a list. You can use an online JSON validator to check your configuration for syntax errors.
  • Wrong Measurement ID: Make sure you have correctly copied and pasted your GA4 Measurement ID (G-XXXXXXXXXX) into the configuration. Using an old Universal Analytics ID (UA-XXXXXX-X) will not work with this setup.

Final Thoughts

Tracking performance on AMP pages requires a specific approach using the <amp-analytics> tag, but the process is quite manageable once you understand the components. By following these steps, you can set up accurate pageview and event tracking, giving you the complete picture of your mobile user engagement.

Getting your GA4 data configured correctly is a great first step. The next challenge is often combining that mobile user data with insights from your other platforms - like your ad accounts, CRM, and e-commerce store - to see what's actually working. Instead of manually exporting data and wrangling spreadsheets across different tools, we built Graphed to simplify this entire process. You connect your data sources (like Google Analytics) in a few clicks, and then you can ask for dashboards in plain English. For example, you can ask, "Show me traffic, conversions, and revenue from Google Analytics broken down by device category," and get a live dashboard in seconds without any manual work on spreadsheets.

Related Articles