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.
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
- Each code will be placed at the bottom of the body tag as we use AMP to load the content first for the user.
- The event name can be defined as the value of the ga4_event_name parameter.
- 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.
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.