Teguh Arief

Google Analytics 4 + AMP pages

Integrating Google Analytics 4 with AMP pages for enhanced analytics.

Teguh Arief

Published on: August 9, 2023

Share:

Since July 1, 2023, Google Analytics 4 (GA4) has become the definitive analytics solution for processing data, making its integration crucial for all web properties, including AMP pages. GA4 offers a robust tracking solution specifically designed for AMP pages, featuring seamless integration with AMP's consent module.

All essential tracking information for AMP pages is readily available to facilitate a fully functional tracking setup with Google Analytics 4. This includes session tracking and the necessary switches to generate key events such as first_visit, session_start, and user_engagement.

So, let's dive into the implementation steps:

Implementing GA4 on AMP pages involves two primary steps:
  1. Custom Code placement within the <body> tag.
  2. Including the AMP Plugin within the <head> section.

Custom Code in <body> for Google Analytics 4

Insert the following custom code snippet into the <body> section of your AMP pages. Remember to replace “G-XXXXXXXXXX” with your actual GA4 measurement ID.

<amp-analytics type="googleanalytics" config="https://amp.analytics-debugger.com/ga4.json" data-credentials="include">
<script type="application/json">
{
    "vars": {
                "GA4_MEASUREMENT_ID": "G-XXXXXXXXXX",
                "GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
                "DEFAULT_PAGEVIEW_ENABLED": true,    
                "GOOGLE_CONSENT_ENABLED": false,
                "WEBVITALS_TRACKING": false,
                "PERFORMANCE_TIMING_TRACKING": false
    }
}
</script>
</amp-analytics>

AMP Plugin in <head> for Google Analytics 4

Ensure you include the necessary AMP analytics plugin within the <head> section of your AMP pages. This script enables the amp-analytics component.

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

Google Analytics 4 Configuration Settings

The following table details the various configuration settings available within the Google Analytics 4 snippet for AMP pages:

--- Feel free to ask if you have more questions about integrating Google Analytics 4 with your AMP pages!

Related Posts

Google Analytics dashboard showing e-commerce sales data

Boost E-commerce Sales: Master GA4 for Success!

Master Google Analytics for e-commerce. Learn setup, data interpretation, and leverage insights to significantly boost your product sales.

Read More
Google Tag Manager settings.

Google Tag Manager Settings with Analytics ID

Master Google Tag Manager with your Analytics ID! This guide covers site ownership verification, obtaining your Google Analytics ID, and configuration.

Read More
A vibrant web story displayed on a smartphone screen, showcasing engaging visuals and text.

Craft Engaging AMP Web Stories for Social Media

Transform articles into dynamic AMP Web Stories. Boost content reach and captivate audiences on social media and Google Search with immersive, fast narratives.

Read More