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", event)}`);
console.log(`Web Vitals - Delta: ${_satellite.getVar("Web Vitals - Delta", event)}`);

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

[edbudev]

@yuhuisg , I was trying to implement this as well and kept coming across a hurdle and stumbled upon this thread/post when I did a search, the issue I am coming across is the following: 

Not sure why I'm getting undefined or not available. I've created the data elements for each of those as well.

Also, was just curious, can we set these data elements within a context data?

[yuhuisg]

@edbudev I've replied to you at https://github.com/yuhui/launchext-web-vitals/issues/10

For the context data question, I assume that you're referring to Adobe Analytics' context data (https://experienceleague.adobe.com/docs/analytics/implementation/vars/page-vars/contextdata.html?lan.... Yes, you can certainly set context data from the data elements, just as you would be able to with any other data elements.

[sayyam_6772]

Hi Yuhuisg,

I have added data elements  and created rule. But I am getting error in console as shown below. 

[yuhuisg]

To get the data element value in custom code, you need to provide the 2nd "event" argument, as indicated in that log, like what I had provided here: https://experienceleaguecommunities.adobe.com/t5/adobe-analytics-questions/once-the-web-vitals-exten...

[sayyam_6772]

Hi Yuhuisg,
I have added a Custom code. CLS and LCP events are getting accurately captured. But CLS and LCP are getting triggered multiple times as shown in the below SS. Due to this page view calls are getting triggered multiple times.