Once the Web Vitals extension is installed, Data elements are created - How to create the rules?

[VinayC]

Once the Web Vitals extension is installed, Data elements are created - How to create the rules?

1. I have installed the Web Vital Extension enabling CLS, FCP, FID and LCP.
2. Have created data elements using the web vitals as extension and using Data Elements Type - Entries, Full Name, ID, Value.

Can you please explain - how to create the rules to capture these values?
Do we have to create eVars and capture these with events also firing?

[Saurav_Raj]

@yuhuisg Thoughts?

[yuhuisg · Accepted solution]

Here are screenshots of an example rule that sets eVar43, eVar44 and eVar45 using the Web Vitals data:

[VinayC]

Thanks @yuhuisg 

Can you please also share what logic have you used in the custom code action.

(Action --> log web vitals event)

[yuhuisg]

Here you go! I basically created data elements from what was available in my extension, and then log them out when a Web Vitals event occurs.

console.group(event.$rule.name);
console.log(event);

console.group('Metric ID: ' + _satellite.getVar('Web Vitals ID', event));
console.log('Metric name: ' + _satellite.getVar('Web Vitals full name', event) + ' (' + _satellite.getVar('Web Vitals name', event) + ')');
console.log('Metric value: ' + _satellite.getVar('Web Vitals value', event) + ', delta: ' + _satellite.getVar('Web Vitals delta', event));
console.groupEnd();

console.groupEnd();

[VinayC]

Thanks @yuhuisg . That's really helpful.

[Kishore_Reddy]

This is insightful. Thank you @yuhuisg 

[yuhuisg]

.

[chandratc]

is this extension still working? It's not working for me.

Also, how can I make it work CLS as event (instead of evar/prop)? can we get CLS-delta numbers by page name?

[yuhuisg]

Yes, it is still working. Did you try my solution in the reply marked as "Accepted Solution" here? If it's not working, please provide more details of your setup. Screenshots of your Rule's setup (including screenshots of the event, condition and action components) would be very helpful too.

If you have a Rule that uses the "Cumulative Layout Shift (CLS)" event from my extension, then the metrics data elements will have the data that Web Vitals had returned for that measurement, including delta. You can certainly track a metric as a (numeric) event, if desired.

[chandratc]

here is the screenshot of rule and set variables: Rule SetupSet Variables

[yuhuisg]

That looks correct. So what isn't working? Please provide as much detail as possible so that I can troubleshoot properly.

[chandratc]

I have added extension, created data elements, created rule and published it (just like shown above) but analytics calls aren't getting triggered.

[yuhuisg]

You're testing in Google Chrome, right? Do you get any error messages in the browser console?

[chandratc]

Yes, I'm using Chrome and there is no error as such, I'm not getting analytics call itself.

[yuhuisg]

To verify that the Web Vitals data is coming through, add an action that logs your data elements to your browser's console, e.g.

console.log(`Web Vitals - Name: ${_satellite.getVar("Web Vitals - Name")}`);
console.log(`Web Vitals - Delta: ${_satellite.getVar("Web Vitals - Delta")}`);

If the logging is successful, then the error lies elsewhere that's unrelated to my extension.