How to Leverage GTM & GA4 For Automated Core Web Vitals Monitoring & Reporting
Bj?rn Thomsen
Marketing Lead at meshcloud.io | Accelerating B2B Market Growth | Professional in Performance Marketing & Web Analytics
Recently, I examined a website for its Core Web Vitals. If you work as an SEO professional, I have no doubt, you are likely to regularly access these metrics. While doing so, I contemplated??: Wouldn't it be great if I could also automate the data collection using Google Tag Manager (GTM) and Google Analytics (GA4)?
During my research, I discovered a well-known GA4 blog that recommended using a custom template (https://www.simoahava.com/custom-templates/core-web-vitals/) for the purpose of monitoring Core Web Vitals (https://pagespeed.web.dev/). While the template demonstrated its effectiveness, I became apprehensive about data security implications due to its dependence on a third-party source. Motivated by this concern and further insights gathered from various online sources, I took on the challenge of creating my own solution to send Google Page Speed Insights (or more accurately: Core Web Vitals) to GA4 using custom HTML.?
Utilizing Google Core Web Vitals in GA4 and generate meaningful reports
1. In the first step, we create a trigger called "cWebVitals" with the event 'page-speed-insights'.
2. This event is generated by a script called 'cHTML – PageSpeedInsights' which we have to create as a Custom HTML tag:
<script>
(function()
var script = document.createElement('script');
script.src = 'https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js';
var metrics = [
'CLS',
'FID',
'LCP',
'TTFB'
];
function sendToDataLayer(metric) {
var name = metric.name;
var delta = metric.delta;
var value = metric.value;
dataLayer.push({
event: 'page-speed-insights',
event_action: name,
event_value: Math.round(name === 'CLS' ? delta * 1000 : delta),
});
}
script.onload = function() {
metrics.forEach(function(metricName) {
var metric = webVitals['get' + metricName];
if (metric) {
metric(sendToDataLayer);
}
});
};
document.head.appendChild(script);
})();
</script>
Remark: This script dynamically loads the web-vitals library from the unpkg CDN. It defines a function called sendToDataLayer that processes metrics and pushes them to the dataLayer. Once the web-vitals library is loaded, it invokes four different functions (getCLS, getFID, getLCP, getTTFB) provided by the library and passes the sendToDataLayer function as a callback to each of them. These functions collect performance metrics such as Cumulative Layout Shift (CLS), First Input Delay (FID), Largest Contentful Paint (LCP), and Time to First Byte (TTFB). Finally, the script appends the dynamically created script element to the <head> of the HTML document, triggering the loading and execution of the web-vitals library.?
As we can see, a JavaScript file is being called from an external source. I recommend storing and addressing this JavaScript file on your own web server to avoid potential data security issues: https://unpkg.com/[email protected]/dist/web-vitals.es5.umd.min.js?
3. Next, we add the custom variables: 'page-speed-insights' and 'page-speed-metrics' which carry the data layer variables 'event_value' and 'event_action'.
领英推荐
4. Now, we have to add a GA4 tag called 'GA4 - PageSpeedInsights' and associate it with the event 'page_speed_insights_{{page-speed-metrics}}'.?
I have chosen a combination of fixed and variable names here to make it easier to select all Core Web Vitals using regex later on, while also having the appropriate key ready for my value '{{page-speed-insights}}'.?
5. Finally, we can see the fruits?? of our labor in the GTM preview mode.
Furthermore, the Google Analytics 4 debugger should display our 'page-speed-insights' events. Time to deploy!?
We can now create a custom dimension in GA4 for the incoming Core Web Vitals data. This enables us to utilize the data in custom reports or integrate it with Looker Studio for visualizations and further data enrichment.?
Conclusion
It is definitely worth keeping an eye on Web Core Vitals because they are designed to assess crucial aspects of loading, interactivity, and visual stability. They can have an impact on both the user experience and the Google ranking of a website.?
I hope you had fun?? building this thing and can extract some valuable insights from the data. And now, for the grand finale, let's have a quick rundown on what these Core Web Vitals actually mean: