AMP Article Tracking in GA4

The Accelerated Mobile Pages are now widely used by publishers and other e-commerce sectors. With the view on the sunset of Universal Analytics and eventual migration to Google Analytics 4, it is time to focus and learn now. In a 3-part series, we will cover event tracking and feasibility check, a list of parameters, and how to verify events.

What is AMP tracking?

Accelerated Mobile Pages (AMP) is an open-source mobile web page format that allows your pages to render almost instantly on mobile devices. AMP pages are similar to HTML pages in that they can be viewed in any browser.

However, we cannot use analytics.js, gtac.js, or gtm.js on AMPs, but we can track in GA4 using the amp-analytics script. As a result, the amp-analytics script must be included in the head section for tracking implementation.

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

AMP Tracking in GA4

The AMP page is now widely used by publishers and other e-commerce sectors. We can enhance the user experience and increase the number of sights by monitoring user behavior. However, we are successful in tracking the AMP pages in GA4. 

Let’s look into the implementation part below.

Main Snippets:

The code for the tracking will be between the <amp-analytics> tag which can contain several attributes such as type, config, data credentials, and script and its type

Inside the script, we will define the vars object which contains the keys and values for fundamental data. Please find the code and keys description below: 

key Information with possible value Impact
GA4_MEASUREMENT_ID Measurement ID of the data stream, e.g. “G-XXXXXXXX” To capture data on a property level.
GA4_ENDPOINT_HOSTNAME By default, the value will be the GA as the end domain. e.g “www.google-analytics.com” We can send the hits to your own server or a Server Side GTM Instance. This enables you to collect data either directly on Google’s server or your server(server-side tagging)
GOOGLE_CONSENT_ENABLED The payloads will include a &gcs (Google Consent status) parameter with the current Consent Status. This help in collecting consent information along with each hit. This then will be utilized to create an audience based on consent
WEBVITALS_TRACKING If you enable this a web vitals event will fire 5 seconds after that event. To measure the page performance by capturing LCP, FID, & CLS.
PERFORMANCE_TIMING_TRACKING If you enable timing tracking event will fire with several parameters on the current page load. To measure the page performance by capturing content_download_time, dom_interactive_time, domain_lookup_time, page_download_time, page_load_time, redirect_time, server_response_time, tcp_connect_time.
DEFAULT_PAGEVIEW_ENABLED If enabled a page_view event will fire on the page load To start collecting the page_view event in GA4.
SEND_DOUBLECLICK_BEACON Enable Display Advertising Features Includes Demographics and Interest Reports, Remarketing with Google Analytics, and Campaign Manager Integration

Let’s go through the event which can be tracked in GA4:

List of AMP Events

  • Pageview Tracking
  • Pageview Tracking With CDs
  • Click Events Tracking
  • Scroll Tracking
  • Page Load Tracking
  • Page Hidden Tracking
  • YouTube Video Tracking
  • Element Visibility Tracking
  • Timer Event Tracking
  • Ads Render Tracking

Note: 

  1. Each code will be placed at the bottom of the body tag as we use AMP to load the content first for the user. 
  2. The event name can be defined as the value of the ga4_event_name parameter.
  3. The selector can be the class/id of CSS.

Pageview event tracking

The page view event will fire on document load which equals to page_view as event name by setting up the event trigger on document visible (virtual page_view) or simply by allowing true or false values in the main vars object. 

Note: The selector will be documented by default.

CTA event tracking 

The CTA event will fire by simply adding the trigger on click with respect to selector which will be CSS selector as value. We can set the event name in the code itself.

Scroll event tracking 

The scroll event will fire by simply adding the trigger on the scroll. Additionally, we will set the scrollSpec object which contains the vertical boundaries and horizontal boundaries as keys, and the array of scroll percentages as values. We can set the event name in the code itself.

Page Load event tracking 

The page load event will fire by setting the trigger on ini-load.

We can have AMP triggering an event when an AMP Element’s initial content has been loaded, this is done using a CSS Selector.

Note: We can use the selector for specific element visibility tracking, e.g. pop-up. If the selector is not specified this event will be attached to the current document.

Page Hidden event tracking 

We can set a trigger when the current page is hidden as on hidden (ie: minimized, or the browser’s tab is switched ).

If we include the visibilitySpec, we can define some rules, for example firing it only if it has been hiding for 3 seconds.

Ads Render event tracking

The Ads load event fire by setting up a trigger on render-start.

We will use the selector for selecting the event via class/id of CSS of ads content. 

Additionally, We can generate the revenue by calculating price(impression) * num(ads_loaded) on reporting site in GA4. 

Note: We can add multiple triggers as above mentioned in the code.

YouTube Video event tracking 

By configuring the triggers on video-play, video-pause, or video-ended, we can keep track of a video’s play, pause, and end events.

We can pass in a parameter like a title ID to identify the specific video if the title is put to the <amp-youtube> tag.

Element Visibility event tracking 

When the ads/video or any content is visible on a page we will set up the triggers on visible. Additionally, we can set the Minimum visibility percentage value as the visiblePercentageMin parameter.

Timer Event tracking 

We can set the trigger on a timer for sending the custom-engaged event. Additionally, we can set the interval & max time length.

Timer triggers can be used to track the amount of time a user spends on a page. Google Analytics can already track time spent on a page using the difference between the pageview timestamps. However, if there is only one pageview, then Google Analytics can’t track time accurately. That’s where timer triggers come in.

Let’s conclude

You learned how to create and track Accelerated Mobile Pages events. The sunset of Universal Analytics in mid-2023 makes it imminent. Be prepared for the eventual migration to Google Analytics 4.  You can start by checking AMP’s feasibility. When you finally move away from Universal Analytics and embrace GA4, you can start collecting enough data to be meaningful. Stay tuned for parts 2 and 3.

Avatar

Neet Patel & Raj Desai

Neet Patel and Raj Desai are GAIQ Certified professionals who work at Tatvic Analytics as Technical Analysts. They are responsible for helping clients to improve their business performance by building their analytics capabilities. Both drive end-to-end analytics practices and provide custom solutions. Neet is always eager to learn new technologies and Raj loves to do research. Both are foodies.
Previous Post
How to organize and measure digital marketing ROI. And stop wasting money
Next Post
AMP Stories Tracking in GA4, a list of GA4 parameters, and steps on how to debug fired event

Leave a Reply

Your email address will not be published.

Fill out this field
Fill out this field
Please enter a valid email address.
You need to agree with the terms to proceed

Menu