CLS Value Issue + Network Information

[rjscoleman]

Hello,

We are using the GTM variation of the web vitals script / library (see .txt attached) to measure the core vitals.

webvitals.txt

1. CLS Value Issue: The CLS value which is pushed in the dataLayer and sent to GA is rounded so much that it is pretty much unusable (see attached some examples comparing the actual CLS value to what is sent to GA). I have tried changing the modifier in the JS to 100000 but it hasn't made a difference to what is sent to GA.

Is it possible to modify the code so that we capture a granular / usable CLS value in GA that allows us to know how we are comparing against the benchmarks?

2. Network Information

Is it possible to update the library also please to send the networking information of the user in addition to the core web vitals?

See https://wicg.github.io/netinfo/#effective-connection-types

[philipwalton]

You can use a custom dimension to measure effective connection type, and I recommend measuring it as a custom dimension (instead of only measuring it for Web Vitals metrics) because then you can use it to report/analytics across any performance or business metric important to your site.

[rjscoleman]

Thanks @philipwalton. Looking forward to your feedback on the first CLS item

[philipwalton]

Can you show me the code you're using? If following the code outlined in the README, then a CLS of 0.0165 should get reported as 17, since the CLS values are multiplied by 1000 and then rounded.

[rjscoleman]

Hi Phil,

The code is in the original post. Please see the .txt link.

We are using GTM to inject it and then setting up a separate GA tag in GTM which is triggered base on the dataLayer pushes.

Cheers

Get Outlook for iOShttps://aka.ms/o0ukef

---

From: Philip Walton notifications@github.com Sent: Wednesday, January 20, 2021 5:57:14 PM To: GoogleChrome/web-vitals web-vitals@noreply.github.com Cc: Richard Coleman Richard.Coleman@ppb.com; Author author@noreply.github.com Subject: Re: [GoogleChrome/web-vitals] CLS Value Issue + Network Information (#118)

EXTERNAL SENDER: This email originated from outside our email system. If you find this email suspicious please forward to the SOC team (soc@ppb.com or soc@fanduel.com).

Can you show me the code you're using? If following the code outlined in the READMEhttps://github.com/GoogleChrome/web-vitals#send-the-results-to-google-analytics, then a CLS of 0.0165 should get reported as 17, since the CLS values are multiplied by 1000 and then rounded.

— You are receiving this because you authored the thread. Reply to this email directly, view it on GitHubhttps://github.com/GoogleChrome/web-vitals/issues/118#issuecomment-763825991, or unsubscribehttps://github.com/notifications/unsubscribe-auth/ASQRJH642RIBQVW635YVQ6LS24KPVANCNFSM4WIPQYJA.

[philipwalton]

Based on the code you linked to, I can see an error. It looks like you mis-copied somehow, as you're comparing to the string 'cls' (lowercase) instead of the correct string 'CLS' (uppercase).

Here's the line in your code:

value: Math.round(name.name === 'cls' ? name.delta * 1000 : name.delta),

[rjscoleman]

@philipwalton thanks very much