Table of Contents
AMP Website
Accelerated Mobile Pages (AMP) is a specially designed web page designed to optimize the browsing experience on mobile devices. By simplifying the content and structure of a web page, it reduces the loading time of a web page, thus improving the loading speed and performance of the web page.While maintaining the basic functionality of a web page, AMP web pages provide users with a faster, cleaner and easier-to-read web experience by removing unnecessary and complex elements.
In addition to improving the user experience, there are other benefits to using an AMP website. Because page speed is a factor in search engine rankings, using an AMP site can improve a page's search ranking. In addition, AMP websites can also reduce page bounces and increase conversion rates.
Despite the benefits of AMP sites, Google has limited documentation support for its own AMP technology and Google Analytics 4, making it difficult for the average person to find information on how to set up custom Google Analytics 4 event tracking on an AMP site. In this document, we describe how to set up GA4 event tracking on a Wordpress AMP site. By tracking external links, you can get a better understanding of user behavior and interactions on your site and analyze and optimize based on this data.
How to use GA4 to track customized outbound link events (outbound link and scroll) on a Wordpress AMP site.
Adding GA4 Event Tracking Code to Wordpress
If you just want to use a WordPress plugin to add code snippets easily, you can use theCode SnippetsPlugin. This plugin can add, manage and run any PHP, JavaScript or CSS code snippet without modifying the theme's functions.php file or installing other plugins. We can edit, enable or disable these snippets in the WordPress backend. This plugin is very useful if you need to add some customization or adjust some settings.
💡 If you use this plugin and the following examples, note that you do not need to set up any other Google Analytics 4 plugins, including Google Site Kits. If you have already set up GA4 Analytics on Google Site Kits or other plugins, you can turn off the GA4 section. This method includes basic GA4 settings and adds custom events.
Add GA4 external link tracking
We will use an example to illustrate this. Here we use Code Snippets to insert a piece of code to set up an event that tracks external links to the sponsored site. Through this event, we can determine if the user is linking to the sponsored site or not. Let's assume that a link to *.booking.com has been set up on this site's web page.
add_action( 'wp_head', function () { ?>
<amp-analytics type="googleanalytics" config="<https://amp.analytics-debugger.com/ga4.json>" data-credentials="include">
<script type="application/json">
{
"vars": {
"GA4_MEASUREMENT_ID": "G-**<Your Measurement ID>**",
"GA4_ENDPOINT_HOSTNAME": "www.google-analytics.com",
"DEFAULT_PAGEVIEW_ENABLED": true,
"GOOGLE_CONSENT_ENABLED": false,
"WEBVITALS_TRACKING": true,
"PERFORMANCE_TIMING_TRACKING": true,
"SEND_DOUBLECLICK_BEACON": true
},
"triggers": {
"outgoing_clicks_hotel": {
"on": "click",
"selector": "a[href*='**.booking.com**']",
"request": "ga4Event",
"vars": {
"ga4_event_name": "outgoing_click_hotel"
},
"extraUrlParams": {
"event__str_timezone_code": "${timezoneCode}"
}
}
}
}
</script>
</amp-analytics>
<?php } );
Here we set up the events that need to be sent to GA4 using the customized triggers. Later on in GA4, we will see a new custom event called outgoing_click_hotel, which is controlled by the variable ga4_event_name. With this setup, this event will be sent to GA4 when the user clicks any link to the booking.com domain, and in this event we can define additional parameters using event__str_ syntax, for example in this example I want to define the timezone_code parameter, so I'll add the For example, if I want to define the timezone_code parameter in this example, I will add an event__str_outgoing_click_type to extraUrlParams.
Tested on GA4
If you want to test the event we just defined, you can try to click the external link we just set up on your own website, and then go to "Reports" → "Real Time" in GA4 to see if you see the new event we defined. If the setting is successful, you should be able to find the outgoing_click_hotel event we just defined in the event count statistics.
If there is an event for going_click_hotel in the live screen, click on the event name to see all the event parameters included in the event. If you use the example above, you will see the timezone_code parameter in the event. In addition to our custom parameters, there are some other default parameters included, such as page_title. clicking on these parameters will show you the details, so you can determine which ones are useful for the analysis we want to see later.
GA4 Report Setting
Since GA4 takes time to collect data, it takes a while for our newly set events to collect data before they appear in the event report, usually not until the next day.
Note that event parameters do not automatically appear in the event report, after a period of time we must set the event parameters we need to a new dimension so that the parameters will appear in the event report details. For example, we can add the timezone_code parameter to the dimension in "Administration" → "Customize" at the bottom of GA4.
When we come back to the Participation→ Events report after the next day, we can see that the new event has been added to the event name.
Clicking on the event will take you to the details screen. If you have set a customized dimension, you will also see the statistics of the parameter name. For example, if I set the timezone_code dimension, the statistics of this parameter will be shown. Note that even the default parameters that are visible in real time need to be added to the dimension before they are displayed, and the new dimension will not appear in the report immediately, but only the next day after it is set.
Thank you for reading this post. If you like my post, please follow up withFacebook Fan Specialist,Twitter,IGThe
