Site speed is critical – for every acquisition channel. Accelerated Mobile Pages (AMP) offer a solution by significantly reducing page loading times on mobile devices. However, merely delivering content is not enough; understanding user interactions and conversions is crucial for optimizing your website’s performance.
Integrating Google Analytics 4 (GA4) with your AMP pages allows you to gain valuable insights into user behavior. In this blog post, we’ll walk you through the process of tracking conversion events on your AMP pages using GA4.
Adding amp-analytics to Your AMP Website
To enable analytics on your site, you first need to include the amp-analytics library. Add the following line of code to the <head> of your AMP document:
<script async custom-element="amp-analytics" src="<https://cdn.ampproject.org/v0/amp-analytics-0.1.js>"></script>
This code loads the AMP analytics library and sets the stage for the JSON configuration object that dictates how your site is tracked.
Refer to Google Analytics’ developer guide for manually setting up the JSON configuration object. For instance, to send a Page View hit to GA4 upon page load, add the following element to the <body>:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>
Now, let’s delve into tracking a conversion event, such as a button click:
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"a": {
"selector": "#free-app-download",
"on": "click",
"vars": {
"event_name": "free_app_download_button_amp",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
Breaking down the code:
"a": This trigger fires when an element with the ID “free-app-download” is clicked. is trigger name"selector": Specifies the tracked element (in this case, an element with the ID “free-app-download”)."on": Indicates the event triggering the tracking (in this case, “click”)."vars": Defines variables associated with the event."event_name": The custom event’s name (“free_app_download_button_amp”)."method": A variable tied to the click event (“Google”).
Setting Up a Conversion Event in GA4
Step 1: Create a Conversion Event
- Navigate to your GA4 property.
- Click “Admin” in the lower-left corner.
- Under “Property,” select “Property Settings.”
- In “Property Settings,” find and choose “Data Display.”
- Click “Conversions.”
Step 2: Define a New Conversion Event
- In the “Conversions” section, click “New Conversion Event.”
- Name your conversion event (e.g., “free-app-download”).
By completing these steps, you’ve set up a conversion event in GA4. When a click event occurs on the element with the ID “free-app-download,” GA4 will register it as a conversion event, providing valuable insights into user engagement on your AMP pages.
In conclusion, combining the speed of AMP with the analytical power of GA4 empowers you to optimize your mobile web presence effectively. Tracking conversion events ensures you stay informed about user interactions, enabling data-driven decisions for a more successful online presence.