Why Standard Google Analytics Tags Don’t Work on AMP
For the “Chief Everything Officer,” data is the compass that guides your business. However, if you try to paste your regular Google Analytics gtag.js snippet into an AMP page, your site will fail validation immediately.
Why? Standard Analytics tags use custom JavaScript, which AMP restricts to ensure lightning-fast load times. In 2026, the only way to maintain Web Analytics & AMP Technical Setup compliance is to use the framework’s native measurement tool: the <amp-analytics> component.
Key Takeaways
| Problem | Action | Outcome |
| Standard gtag.js script blocks AMP validation. | Replace standard tags with the <amp-analytics> component. | Validated AMP pages with high-speed performance and active tracking. |
| Fragmented user journeys in GA4 reports. | Implement the “Linker” feature in the JSON config. | Unified user sessions across Google Cache and your main domain. |
| Inaccurate conversion data on mobile. | Define custom triggers for button clicks and form fills. | Precise ROI measurement for mobile marketing campaigns. |
Introduction to the <amp-analytics> Component
Think of <amp-analytics> as a “translator.” It takes the user interactions on your page and sends them to Google’s servers in a way that doesn’t slow down the browser. It is a powerful, declarative component that can track page views, clicks, scroll depth, and even social shares—all while keeping your mobile performance at its peak.
Step-by-Step: Implementing GA4 on AMP Pages in 2026
To successfully add Google Analytics code in an AMP page, you must follow a two-part installation process.
Part 1: Include the AMP Analytics Script
Add this script to the <head> section of your AMP HTML. This tells the browser how to handle the analytics component.
HTML
<script async custom-element=”amp-analytics” src=”https://cdn.ampproject.org/v0/amp-analytics-0.1.js”></script>
Part 2: Add the Component to the <body>
Place the following code immediately after the opening <body> tag. Replace G-XXXXXXXXXX with your actual GA4 Measurement ID.
HTML
<amp-analytics type=”googleanalytics”>
<script type=”application/json”>
{
“vars”: {
“account”: “G-XXXXXXXXXX”
},
“triggers”: {
“trackPageview”: {
“on”: “visible”,
“request”: “pageview”
}
}
}
</script>
</amp-analytics>
How to Configure the JSON Object for Event Tracking
Standard GA4 tracks many events automatically, but on AMP, you often have to define them manually within the JSON object. For example, if you want to track a “Contact Us” button click, you would add a trigger like this:
JSON
“triggers”: {
“contactButtonClick”: {
“on”: “click”,
“selector”: “#contact-button”,
“request”: “event”,
“vars”: {
“event_name”: “button_click”,
“button_id”: “contact_us”
}
}
}
Tracking Conversions and User Journeys Across AMP and Canonical Pages
One of the biggest headaches in Web Analytics is “session stitching.” When a user visits your AMP page on the Google Cache and then clicks a link to your main site, GA4 might see them as two different people.
In 2026, you must use the Linker feature. By adding a linkers configuration to your JSON code, AMP will pass a unique ID via a URL parameter, allowing GA4 to “stitch” the sessions together. This ensures your conversion attribution remains accurate.
Using Google Tag Manager (GTM) to Deploy Analytics on AMP
If you prefer not to touch raw code, you can use Google Tag Manager. Note that you must create a dedicated AMP Container in GTM; you cannot use your standard web container.
- Create a new container and select “AMP.”
- Install the GTM-specific AMP snippets in your <head> and <body>.
- Add a “Google Analytics: GA4 Configuration” tag within GTM.
- Publish the container. GTM will handle the JSON generation for you.
Verifying Your Setup: Testing AMP Analytics in Real-Time Reports
Once you have implemented the code, don’t just hope it works.
- Open your AMP page on a mobile device.
- Navigate to your GA4 Property > Reports > Real-time.
- Look for your active session. If you see yourself appearing under the “Page Title” of your AMP page, your implementation of how to add Google Analytics code in AMP page is successful.
Troubleshooting Common Tracking Discrepancies in AMP
- Missing Data: Check if your Measurement ID is correct and that the <amp-analytics> script is in the <head>.
- High Bounce Rate: This often happens if the “Linker” is missing, causing every click to the main site to look like an “exit.”
- Validation Errors: Ensure your JSON code has no trailing commas or missing brackets. Valid JSON is non-negotiable for AMP.
FAQ: AMP Analytics Mastery
Can I use the regular gtag.js code on an AMP page?
No. Standard JavaScript is blocked by the AMP validator. You must use the <amp-analytics> component or an AMP GTM container.
Does AMP analytics support custom dimensions and metrics?
Yes. You can define custom dimensions within the vars section of your JSON configuration.
How do I prevent double-counting users who visit both AMP and mobile web versions?
By enabling the “Linker” feature in your JSON configuration, you ensure the user is tracked as a single entity across different domains and caches.
What is the best way to track button clicks on an AMP page?
Use a “click” trigger within the amp-analytics JSON object and target the specific button using its CSS ID or class selector.
Is there a WordPress plugin that handles AMP analytics automatically?
Yes. The Official AMP Plugin for WordPress has an “Analytics” section where you can simply paste your GA4 ID, and it handles the code generation for you.
Conclusion: Data-Driven Success on the Mobile Web
Accurately learning how to add Google Analytics code in AMP page ensures that you aren’t flying blind. In 2026, the businesses that win are those that understand their mobile audience’s behavior down to the last click.
Ready to master your data?