How to Track Landing Pages Affected by LCP, CLS and FID in Google Analytics?

Feature-Image

The new sets of metrics developed by Google decides the page experiences which mainly focus on three core web vitals: LCP, CLS and FID.

LCP measures page’s loading performance, FID measures page’s responsiveness while website is loading and CLS measures visual stability of the page.

On a page the Google Search Console Core Web Vitals section provides the website’s poor URLs. GSC provides the limited data with the score. Accordingly for this page it shows that more than 24000 Urls affected by LCP and 34000 urls affected by CLS. As per data in images when each URL is clicked it provides similar 20 URLs. So out of the overall 24000 affected urls only 4 URL Data with score is available in Google search console Core Web Vitals Report. So the major question is to find the remaining URLs which are affected by LCP, CLS and FID. We can create web vitals GTM tags to get the data in google analytics.

Here you can follow this writeup to get the step by step process of getting the full URL data in Google Analytics Using GTM Tags.

LCP

In the below screenshot, it shows more than 24000 URLs affected by Mobile LCP. As per google update they give high priority on mobile Core web vitals report.
GSC provides 4 URLs and each URL contains 20 similar URLs. In total only 80 URLs can be seen in Google Search Console Core web vitals report.

LCP Mobile

LCP Affected URLs in GSC

CLS

As per the data given in the below image it shows more than 34000 URLs are affected by Mobile CLS. We can give the Normal Priority to fix CLS issues. In my opinion it does not have a major impact on ranking. GSC provides 4 URLs and in each URL it contains 20 similar URLs. So totally only 140 URLs are available from Google Search Console Core web vitals report.

CLS Mobile

CLS Affected URLs in GSC

FID

FID gives 10 URLs for our website. In this case GSC gives all data. Below analytics screenshot image shows how many times FID hits for our website URLs.

FID Mobile

Step 1:

Go to your Google Tag Manager. Then create custom HTML with the following given code. Choose Trigger All Pages option.

Custom HTML – Script Web Vitals

<!– Load ‘web-vitals’ using a classic script that sets the global ‘webVitals’ object. –>
<script src=”https://unpkg.com/web-vitals@1.0.1/dist/web-vitals.umd.js”></script>
<script>
function sendToGTM(name, delta, id) {
// Assumes the global `dataLayer` array exists, see:
// https://developers.google.com/tag-manager/devguide
dataLayer.push({
event: ‘web-vitals’,
event_category: ‘Web Vitals’,
event_action: name.name,
// Google Analytics metrics must be integers, so the value is rounded.
// For CLS the value is first multiplied by 1000 for greater precision
// (note: increase the multiplier for greater precision if needed).
event_value: Math.round(name.name === ‘CLS’ ? name.delta * 1000 : name.delta),
// The ‘id’ value will be unique to the current page load. When sending
// multiple values from the same page (e.g. for CLS), Google Analytics can
// compute a total by grouping on this ID (note: requires `eventLabel` to
// be a dimension in your report).
event_label: name.id,
});
}
webVitals.getCLS(sendToGTM);
webVitals.getFID(sendToGTM);
webVitals.getLCP(sendToGTM);
</script>

Script Web Vitals

Step 2:

Create an Event in GTM and the tag type is Google Analytics: Universal Analytics and the track type is Event then follow the below codes for creating this event.

Paste the below code in the event and then choose Non_ Interaction Hit as True and paste your GA Tag in the given text box.

Category

{{dlv – event_category}}

Action

{{dlv – event_action}}

Label

{{dlv – event_label}}

Value

{{dlv – event_value}}

Non-Interaction Hit

True

GA – Tracking ID

UA———1

GA - Event - Web Vitals

Create a Trigger as Custom Event, here I have given Event name as “web-vitals” and choose “this trigger fires on- All Custom Events”. Finally Submit and see the Preview once.

Web Vitals Trigger

Now we can test the Event fires or not in Google Analytics. Here we are using Google Universal Analytics not GA4. We can check In Real Time -> Events.

Here I created Custom reports with Landing Page. Landing Page describes the URLs Data, Event Category describes the event name, Event Action. It shows whether its CLS, LCP or FID and Event label are used to describe the triggered events. Event value describes the number of times this event occurred in this page.

LCP-CLS-FID-Score-Google-Analytics

In Google Analytics we can’t find the exact LCP, CLS and FID Score. So in this case we can measure the approximate score for URL Format. In Google Search Console they provide the score for limited URLs, so we can assume based upon the URL that the other similar URLs also have the same score. But it’s only applicable for LCP and FID.

Coming Soon: How to Track Landing Pages Affected by LCP, CLS and FID in GA4.

Reference: https://www.tagmanageritalia.it/advanced-guide-how-to-track-core-web-vitals-with-google-tag-manager

Leave a Reply

Your email address will not be published. Required fields are marked *