Send metrics as Google Tag Manager events

[SimenHansen]

Most Googel Analytics implementations are in my experience working in the field done via Google Tag Manager. Added example for sending metrics via GTM, to then be picked up by Google Analytics or any other endpoint you may want to recieve data.

[googlebot]

Thanks for your pull request. It looks like this may be your first contribution to a Google open source project (if not, look below for help). Before we can look at your pull request, you'll need to sign a Contributor License Agreement (CLA).

📝 Please visit https://cla.developers.google.com/ to sign.

Once you've signed (or fixed any issues), please reply here with @googlebot I signed it! and we'll verify it.

---

What to do if you already signed the CLA

Individual signers

• It's possible we don't have your GitHub username or you're using a different email address on your commit. Check your existing CLA data and verify that your email is set on your git commits.

Corporate signers

• Your company has a Point of Contact who decides which employees are authorized to participate. Ask your POC to be added to the group of authorized contributors. If you don't know who your Point of Contact is, direct the Google project maintainer to go/cla#troubleshoot (Public version).
• The email used to register you as an authorized contributor must be the email used for the Git commit. Check your existing CLA data and verify that your email is set on your git commits.
• The email used to register you as an authorized contributor must also be attached to your GitHub account.

ℹ️ Googlers: Go here for more info.

[SimenHansen]

@googlebot I signed it!

[googlebot]

CLAs look good, thanks!

ℹ️ Googlers: Go here for more info.

[philipwalton]

Do you know what this value is used for? Is it sent to Google Analytics or just used internally by GTM?

[SimenHansen]

This key is what you build a trigger on in GTM. The value just have to match whatever you set in the trigger on the GTM side.

[SimenHansen]

Not sent anywhere unsless you want to.

[philipwalton]

I see, so then the you'd set up a trigger in your analytics tag in GTM to listen for the web-vitals event, and then configure how you want to send the data to Google Analytics?

Do the event_* properties automatically map, or would a user have to set that up themselves? (Sorry, never used GTM).

[SimenHansen]

Let me give you a quick GTM workflow for setting this up:

1. Create a GA Event Tag
   

2. Map Event Tracking Parameters
   Here you need to manually map each "dataLayer"-variable seperate. So there is actually no automatic mapping here.
   

3. Define and set a trigger
   Here GTM reads from the event key defined at the top of the dataLayer.push()-object.
   

4. Pull it all together
   

And it will look something like this. Every time a new dataLayer.push() is run, it will send an event to Google Analytics.

You can of course set more complex triggers, say if you only want to send the events on certain pages of your website or any other criteria that you might think of. I'm thinking of running this only on product-pages for a ecommerce client of mine as a start.

[philipwalton]

@madilk I'd recommend not sending these to GA as timing hits, as those are quite restricted (e.g. are sampled at 1%, can't be used in segments, etc.)

[madilk]

@philipwalton Perhaps, it might be better to send as Events and Timing hits to give the flexibility later? Usually, we set the siteSpeedSampleRate field in GA hits to be much higher % than the default ~1%. Also, I wasn't sure about the timing segment and checked it out. Timing hit values can be used in custom segments within GA. Attaching a screenshot here.

[philipwalton]

Interesting, maybe the sampling rules for timing hits has changed since I last tried them, but regardless the 1% sampling is the biggest blocker.

[philipwalton]

And to clarify, the 1% sampling rate is applied on both the client and the server, so changing the 1% to 100% will not actually get you 100%. See: https://developers.google.com/analytics/devguides/collection/analyticsjs/user-timings#sampling_considerations

[bertrand-riviere]

hello @SimenHansen,
thanks a lot for the GTM workflow, it is very useful!
now that i can track the events in analytics, i'd like to go one step further, and get a quick visual repartition of "good"/"ok"/"poor" performances..
by any chance, would you have any idea of how this could be achieved using data studio?
let's say to produce graphs like the ones in CrUX Dashboard:

because having avg. values in analytics is better than nothing but does not help to get the full picture

[philipwalton]

I see, so then the you'd set up a trigger in your analytics tag in GTM to listen for the web-vitals event, and then configure how you want to send the data to Google Analytics?

Do the event_* properties automatically map, or would a user have to set that up themselves? (Sorry, never used GTM).

[philipwalton]

Thanks, I'll merge this and then figure how where to link to in a separate PR.