How we measure our Core Web Vitals — GTM(Google Tag Manager)

I’ve written about the basics of setting up GTM before here, but this post is for people already using GTM and who want to send the Core Web Vitals data we sent from our application Javascript to the browser window’s dataLayer (as described here).

I found this guide very helpful in setting this part up https://www.noisetosignal.io/2020/05/add-web-vitals-to-google-analytics/

The tag

This is the tag which will send the data from the dataLayer to Google Analytics.

Tag Type: Google Analytics: Universal Analytics
Track Type: Event
Category: Web Vitals
Action: {{webVitals.event_action}}
Label: {{webVitals.event_label}}
Value: {{webVitals.event_value}}
Non-interaction Hit: True
Google Analytics Settings: {{ga - settings}} (I think this one may be unique in our setup)

The trigger

This is the trigger which causes the Tag to fire

Trigger Type: Custom Event
Event name: web-vitals
This trigger fires on: All Custom Events

And that should be it.

Next time we’ll look at the data in Google Analytics.