AMP Stories Tracking in GA4, a list of GA4 parameters, and steps on how to debug fired event

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 part 2 of the 3-part series, we will cover Story tracking capabilities, a list of parameters, and how to debug the fired events.

What is AMP Story tracking?

AMP Stories is an extension of the AMP framework. AMP Stories provides an engaging and visual way to consume content in a full-screen experience.

AMP Stories are a “mobile-focused format for delivering news and information as visually rich, tap-through stories.”

List of Stories

A story

Accelerated Mobile Pages (AMP) is an open-source page format for the mobile web that makes it possible for your stories to render almost instantly on mobile devices. AMP pages are similar to HTML pages and load in any browser. However, you cannot use analytics.js on Accelerated Mobile Pages, so a different Analytics tag is provided specifically for AMP.

The amp-analytics script will be required to add in the head section for the tracking implementation.

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

AMP Story Tracking in GA4

AMP pages and stories are a good alternative to canonicalization for enhanced speed and load time for your e-commerce pages on mobile devices and improved conversion rates. The best thing about AMP pages is that it is open and free. As a result, you can use it more easily. We can enhance the user experience and increase the number of sights by monitoring user behavior. However, we are successful in tracking the AMP stories in GA4. 

Let’s look into the implementation part below.

List of AMP Story Events

1) Each Story Tracking Configuration

The stories tracking event fires on a story-page-visible trigger with a defined event name. Enabling the default page view to be true for those specific stories will allow us to pass the one pageview. 

Each Story Tracking code

2) Last Story Page Tracking Configuration

The last story-tracking event fires on a story-last-page-visible trigger with a defined event name.

Last Story Tracking code

List of the parameters for AMP Events

There should be two types of parameters we can implement with all the events:

  1. User parameter 
  2. Event parameter

1) User parameters:

User parameter scope will be page load specific (if we use any user parameter that will persist for all other events of that particular page). 

The Key of extraUrlParams Object will contain the user__str_ as a prefix of event parameter name as custom dimension or  user__num_ as a prefix of event parameter number as a custom matrix. (snapshot)

Formate:

user__str_customDimensionName

user_num_customMatrixNumber

2) Event parameters:

The event parameter scope will be event specific.

In this case, the Key of extraUrlParams Object will contain the event__str_ as a prefix of event parameter name as custom dimension or  event__num_ as a prefix of event parameter number as a custom matrix. (snapshot)

Formate:

event__str_customDimensionName

event_num_customMatrixNumber

3) Other inbuilt parameters:

Below parameter, we can use for any related event as user and event parameter. 

Parameters Description
${title} Page title value
CLIENT_ID(_ga). For the client id
${ampdocUrl} Location of page URL
${verticalScrollBoundary}% For the scroll percentages
${autoplay} For the youtube video autoplay or not
${currentTime} For current time of video
${height} Video height
${width} Video width
${id} Video id mentioned into tag
ni Non-interactive event (0 or 1)
${state} how video play eg playing manual, auto-playing
${totalEngagedTime} For the page timer event
${storyPageIndex} A zero-based index value for an amp follows the ordering
${storyPageId} The unique page Id of the amp story page
${storyPageCount} The total number of pages available in the story
${storyProgress} This represents how many pages the user has passes

How to verify the Event fired 

Approach 1: through network request\

Network requests are visible in the browser’s developer tools

1. Open the Developer tools by ctr+shift+i or cmd+shift+i or F12

2. Select the network tab in the developer console

network tab

3. Add collect?v=2 in the filter to view request going to google analytics request (v=2 for GA4)

collect request filtering

4. Verify the event details sent to GA4 via the Payload tab of that request 

Note: for AMP pages the data source attribute will be AMP (ds = AMP).

brief debugging steps for AMP Page

 

brief debugging steps for AMP Stories

Approach 2: Verify the events directly through the Debug View in GA4 UI

To enable debug view we will have to add a query parameter in the URL

1. Add &_dbg=1 in the query parameter to start the debug mode.

2. Open GA4 property > Select Data stream > Configure >  DebugView from GA4 reporting.

debug view in GA4

3. Verify the parameters of the event by clicking the most top-left card of the top event list  > Click any event > Parameter

Captured Events parameters in GA4

 

Live Demo Website for the Reference: 

https://gtm-analytics-neet.web.app/AMP-UA-GA4.html 

Check the AMP event fires on the website in the Network tab or dataLayer extension.

Let’s conclude

You would have learned a bit more about how to create and track Accelerated Mobile Pages stories tracking implementation. 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 part 3. 

Avatar

Raj Desai & Neet Patel

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
AMP Article Tracking in GA4

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