After a long time of “how to prepare for the Core Web Vitals update” guides, the time of tracking and monitoring the effect of the Page Experience Algorithm Update has come.
Before diving into our step-by-step guide on tracking and monitoring CWVs, let’s briefly recap what are Core Web Vitals and why it is important to monitor them for both SEO and UX purposes.
Why should you monitor Core Web Vitals performances?
As already explained in our previous blog post, “5 Tips to be Ready for Google’s 2021 Page Experience Algorithm Update” (a suggested read if you feel you are not ready yet), Core Web Vitals are metrics that score:
- Page loading speed (Large Contentful Paint).
- Page interactivity (First Input Delay).
- Visual stability (Cumulative Layout Shift).
These aspects might strongly (yet negatively) affect user experience if not properly managed. That’s the reason why Google decided to include them in the recent Page Experience update, which started in June 2021 and would be complete by the end of August 2021.
The page experience update is now slowly rolling out (Top Stories will begin using this new signal by Thursday). It will be complete by the end of August 2021. More here: https://t.co/kDwhhOYklK
— Google Search Central (@googlesearchc) June 15, 2021
As part of this update, Core Web Vitals along with other existing UX-related signals have become official ranking factors. This news gave the entire digital world a jolt. Fixing and optimizing page loading speed, interactivity and visual stability issues has become a priority for most website owners, SEO experts and UX designers.
That’s why, after implementing your best strategy to pass the Core Web Vitals test, you should start tracking and monitoring your progress and intervene when required. Indeed, the final insights will help you define the fixes required to improve technical SEO performance, user experience and make Google judge your website as a quality one. Keep reading our guide to getting started!
- How to track Core Web Vitals: ready-to-use tools
- Tracking Core Web Vitals with Google Tag Manager: a step-by-step guide
- How to monitor Core Web Vitals in Analytics
How to track Core Web Vitals: ready-to-use tools
At the time of writing, Google allows analyzing and reviewing CWVs on Search Console via the Page Experience and Core Web Vitals reports as well as via specific filters in the Search performance report.
But GSC is not the only tool you have to monitor them. Indeed, you might also set up a dedicated Google Data Studio dashboard on top of Chrome UX Report. The Lighthouse Audit is also really helpful for single page analysis.
All the above-mentioned monitoring tools are effective and useful, but, in some cases, they might not offer the accuracy, reproducibility and granularity you or your clients might need, only providing a high-level score of your CWVs performances.
That’s why, in this blog post, we would suggest a different approach aimed at tracking Core Web Vitals at both site-wide or page-specific levels in Analytics. The tools required to proceed are Google Analytics and Tag Manager.
Before diving into our guide, let’s thank Simo Ahava and Matteo Zambon from Tagmanageritalia. Their work has been of great inspiration to us for laying down this guide.
Tracking Core Web Vitals with Google Tag Manager: a step-by-step guide
If you like tinkering with data analytics tools, setting up all the necessary things in your Tag Manager Container will be a breeze. If you don’t, no worries, we will walk you through the whole process.
Here are the 4 steps you need to take in GTM to start sending Core Web Vitals data to Analytics:
- Configuring a Custom HTML Tag – OR DON’T!
- Configuring a Custom Event Trigger
- Setting up Data Layer Variables
- Creating a Universal Analytics Event Tag
Let’s get started.
- Configuring a custom HTML Tag – OR DON’T!
First of all, you need to configure a new tag, namely a personalized segment of code that will help you integrate and manage Web Vitals APIs in your GTM account.
The custom tag we are going to set up relies on an edited version of a script from GitHub specifically developed to fire web-vitals-related events into the data layer. The script we are providing you with has been edited and customized by Simen Hansen for TagManagerItalia.
Since we are starting from a ready-made script, the work you need to do to configure your custom Core Web Vitals tag is quite straightforward.
Here are the steps required:
- Access the GTM UI and click on “Add a new tag”
2. Name the new tag as you prefer (eg. “Custom Web Vitals”) and, in Tag Configuration, select the Custom HTML tag type
3. Copy and paste the GitHub edited script in the HTML textbox. Here is the script for your convenience:
Important: as you can see, the script refers to the UNPKG library, the latest version of 06.21 is 2.0.1. We suggest you check and update it in the case of further variations and improvements.
4. Scroll down to the Triggering section and choose the “All pages” trigger to make the tag fire.
5. Save your brand new tag and publish it.
OR DON’T
If you prefer saving time or you are not familiar with Google Tag Manager, you might just skip this step and use Simo Ahava’s custom tag template. This dedicated blog post would help you set it up with ease.
Important: as explained by the author, this ready-to-use template will always fetch the latest version of the web-vitals library and he will always take care of updating and fixing it when necessary.
2. Configuring a Custom Event Trigger
The triggers are an essential element in GTM. They are event listeners developed to listen to specific events and tell to the tag when to fire or block. Without triggers, tags would be useless. Thus, after creating your tag, you need to set up a dedicated trigger.
As for the HTML Tag, configuring a new trigger is quite simple.
- Go to the Triggers sections and click on the “New” button.
- Then, start the configuration by entering the trigger name, eg. Web Vitals.
- In Trigger Configuration, select the “Custom Event” trigger type, under “Other” and set “web-vitals” as the event name.
4. Save it.
Your custom event is now ready.
3. Setting up Data Layer Variables
After creating a custom HTML tag and the related trigger, you are now ready to set up your data layer variables. These objects are containers you can fill with all the information (events, variables) you want to pass to GTM. They are composed of pairs of key and values, which would be used to set up your triggers.
Each variable is used to push the event valute to the tag. Thus, the number of variables depends on the number of events you want to track.
For our purpose, you need to create 4 different variables for the following values:
- event_category
- event_action
- event_value
- event_label
Setting them up is quite easy, you’ll only have to:
- Go to the Variables tab and click on New in the User-Defined Variables section
2. Then, rename the variable depending on the event you are going to track. As an example, you might name it: Variable – event_ category, Variable – event_action, and so on.
3. Then, choose the Data Layer Variable type and name it according to the event, eg. event_category.
Select Version 2 and save.
You can follow the same procedure for each variable you need to create.
4. Creating a Universal Analytics Event Tag
It is now time to configure an additional tag aimed at firing the events into Analytics.
Creating and configuring the tag is a 5-steps procedure.
- Go back to the Tags section and click on New.
- In the Tag Configuration box, set “GA – Event – Web Vitals” as a name and select the “Google Analytics” tag type.
3. Make sure to set up all the necessary fields according to the following images:
For each parameter, you’ll just have to select the related variables previously created.
4. In the Google Analytics Settings, select your Google Analytics Variable and Enable overriding settings. Enter your Google Analytics ID into the tracking ID field.
Then, in “More Settings” > “Fields To Set”, enter the transport field to beacon (not necessary for GA4).
5. Scroll down to the Triggering section and select the trigger we’ve set up in the second step.
5. Tag functioning: it’s time to check
If you’ve correctly gone through all the previous steps, your GTM setup is now complete. The last yet most important thing you need to do is check your custom tag’s proper functioning before implementing it.
Google Tag Manager provides you with a Preview mode accessible via the dedicated button in the main UI. Once in preview mode, refresh the page, let it completely load and then, navigate the site a bit and interact with the pages to collect some measurements. If your tag has been correctly configured, you should see a summary box on the page confirming the triggering of the “web-vitals” event.
Ideally, the events listed should be three. However, sometimes, only two of the three metrics may be measured. In other cases, you might see more than three events. Our suggestion is to let the page completely load and interact a bit before going back to the Tag Assistant window.
Here is an example of the events you should see in the summary:
(Source)
Click on the event and have a look at the API Call view. You should get something like this:
(Source)
After checking the correct functionality of the tag, you are ready to publish it.
How to monitor Core Web Vitals in Analytics
Now that the bulk of the work has been done, it’s time to reap the benefits. Your custom tag and events will push the data collected in Google Analytics, letting you keep track of your CWVs performance.
To access the high-level data, go to Behavior > Events. There you will find the Web Vitals event category, which includes all the CWVs related events.
(Source)
In this report, you will not be able to see the average metrics related to specific pages. Indeed, to do that, you should go to Behavior > Events > Pages, where you will find an in-depth report showing all the events by page including total events, event value, and average value.
With the help of secondary dimensions (eg. Event Action) and filters (eg. Event Action > Equals > CLS) you will see all the average data of each event for every single page.
Conclusion
Great job! Now that you are here, you have all the tools required to monitor your CWVs at any level. This will be of great help in keeping track of the pages that require further improvement.
If this implementation seemed too tricky to you, just contact us. Our data analytics experts will be glad to help you with setup of Google Analytics and Google Tag Manager.
