Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

Sign up for GitHub

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

Send metrics as Google Tag Manager events #28

Merged
merged 2 commits into from
May 10, 2020
Merged

Send metrics as Google Tag Manager events #28

Changes from all commits
Commits
Show all changes
2 commits
Select commit Hold shift + click to select a range
7357767
rebase on latest master
SimenHansen May 10, 2020
59dcfa2
Fixed backticks for dataLayer
SimenHansen May 10, 2020
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
28 changes: 28 additions & 0 deletions README.md
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -8,6 +8,7 @@
- [Report only the delta of changes](#report-only-the-delta-of-changes)
- [Send the results to an analytics endpoint](#send-the-results-to-an-analytics-endpoint)
- [Send the results to Google Analytics](#send-the-results-to-google-analytics)
- [Send the results to Google Tag Manager](#send-the-results-to-google-tag-manager)
- [Load `web-vitals` from a CDN](#load-web-vitals-from-a-cdn)
- [API](#api)
- [Types](#types)
Expand Down Expand Up @@ -189,6 +190,33 @@ getFID(sendToGoogleAnalytics);
getLCP(sendToGoogleAnalytics);
```

### Send the results to Google Tag Manager

The following example measures each of the Core Web Vitals metrics and sends them as seperate `dataLayer-events` to be used by Google Tag Manager. With the `web-vitals` trigger you send the metrics to any tag inside your account.

```js
import {getCLS, getFID, getLCP} from 'web-vitals';

function sendToGoogleAnalytics({name, delta, id}) {
SimenHansen marked this conversation as resolved.
Show resolved Hide resolved
// Assumes the global `dataLayer` array exists, see:
// https://developers.google.com/tag-manager/devguide
dataLayer.push({
event: 'web-vitals',
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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.

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

Not sent anywhere unsless you want to.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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).

Copy link
Contributor Author

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

  1. Create a GA Event Tag
    chrome_2020-05-10_23-01-28

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

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

  4. Pull it all together
    chrome_2020-05-10_23-08-39

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.

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.)

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

@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.
timing

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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

Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

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:
image

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

event_category: 'Web Vitals',
event_action: 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 === 'CLS' ? delta * 1000 : delta),
SimenHansen marked this conversation as resolved.
Show resolved Hide resolved
// 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: id

SimenHansen marked this conversation as resolved.
Show resolved Hide resolved
});
```

### Load `web-vitals` from a CDN

The recommended way to use the `web-vitals` package is to install it from npm and integrate it into your build process. However, if you're not using npm, it's still possible to use `web-vitals` by requesting it from a CDN that serves npm package files.
Expand Down