Expand my Community achievements bar.

Join us at Adobe Summit 2024 for the Coffee Break Q&A Live series, a unique opportunity to network with and learn from expert users, the Adobe product team, and Adobe partners in a small group, 30 minute AMA conversations.
SOLVED

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

Avatar

Community Advisor

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?

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

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

yuhuisg_1-1642046465530.png

 

yuhuisg_0-1642046452214.png

 

View solution in original post

21 Replies

Avatar

Correct answer by
Community Advisor

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

yuhuisg_1-1642046465530.png

 

yuhuisg_0-1642046452214.png

 

Avatar

Community Advisor

Thanks @yuhuisg 

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

(Action --> log web vitals event)

Avatar

Community Advisor

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();

 

Avatar

Level 1

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?

Avatar

Community Advisor

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.

Avatar

Level 1

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

Avatar

Community Advisor

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

Avatar

Level 1

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

Avatar

Community Advisor

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

Avatar

Level 1

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

Avatar

Community Advisor

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.

Avatar

Level 3

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

edwardb44196902_0-1673289329554.png

 

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?

Avatar

Community Advisor

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

Avatar

Level 1

Hi Yuhuisg,

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

sayyam_6772_0-1689162379173.png

 

 

Avatar

Community Advisor

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

Avatar

Level 1

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.

sayyam_6772_0-1689601357625.png

sayyam_6772_1-1689601419868.png

sayyam_6772_2-1689601543330.png