Expand my Community achievements bar.

SOLVED

How to use a JS variable in another Custom JS script?

Avatar

Level 4

In GTM, it's usually by replacing the var name with {{var name}}. How do I do in this Adobe launch?

I have a custom JS that's simply not reading directly from the console log. However, if I separately declare a Data Element that's a JS variable that reads from performance.timing.requestStart, I can see the value in Cloud Debugger.

How can I apply such variables here for startTime and endTime var in below code?

thanks.

function getPageLoadTime() {

if (typeof(performance) !== 'undefined' && typeof(performance.timing) == 'object') {

var timing = performance.timing;

// fall back to less accurate milestones

var startTime = performance.timing.requestStart;

var endTime = performance.timing.loadEventEnd;

if (startTime && endTime && (startTime < endTime)) {

return (endTime - startTime);

}

}

return 'data not available';

}

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

You do not run your code at the time. It needs to be run at the right time of the page lifecycle.

Ideally you would want to run performance code at unload time that way you know that your page is fully loaded (unless people nevigate before the page is fully loaded...).

We do it in this way:

  • Create an event listener on unload
  • On unload a function is called to get all performance data and store them in cookies. We also store the page name that will be the previous page name.
  • On next page send previous page name and performance data to Adobe Analytics
  • In Adobe Analytics run previous page report and add performance metrics

View solution in original post

12 Replies

Avatar

Level 4

Hey Adil,

1) Go to data elements

2) Create a new one with core extension and data element type as custom code

3) open editor

4) Just enter the code without the requirement to put everything as function but still ending with a return statement

5) Call this data element wherever you want in Launch using the "%" sign, it will do something similar to "{{" in GTM

Hope this helps

Sanmeet

Avatar

Level 4

Hi Sanmeet,

I'm not a 100% clear but let's try with an example as it'll make it easier for me:

I have two separate data elements in Adobe Launch:

1. SiteSpeed: fetchStart

JS variable

This pulls the timestamp (including ms) from the browser console log: performance.timing.fetchStart

2. SiteSpeed:loadEventEnd

JS variable

This pulls the timestamp (including ms) from the browser console log: performance.timing.loadEventEnd

If I wanted to create a third data element that showed the timestamp by doing this operation:

SiteSpeed:loadEventEnd - SiteSpeed: fetchStart and return the value as an integer.

Would the third variable be a Custom JS and what would the code look like?

Thanks.

Avatar

Level 4

Adil,

it will be custom JS, you will use _satellite.getVar(<name of data element>) function in your to get the value of each data element, perform your operation on it and return the final value as output of the JS data element.

Hope this helps.

Sanmeet

Avatar

Level 4

Hi Sanmeet,

In my Custom JS, here's what I have as the code:

return _satellite.getVar('SiteSpeed: loadEventEnd') - _satellite.getVar('SiteSpeed: fetchStart');

When I check Cloud Debugger to know if the var value got passed as an event in a rule that I setup, it shows as blank.

It would be event 56 here - which I have configured to accept numeric values instead of a  counter. What could be the reason for this?

Thanks.

event 56.JPG

Avatar

Level 4

An event will add up all the values that you pass to it. You wont be able to achieve the objective.

Pass the value to an eVar. You will need to do this analysis in excel

Avatar

Level 4

Yes, so if event 56 = sum of all the timestamp differences and event event 55 = 1 (which is actually a page load counter) and will be a constant at 1 , I could create a calculated metric in AA that adds up the sum of event 56 and divides it by the sum of event 55 to get an average of load time. I'm following this article for context: https://analyticsdemystified.com/adobe-analytics/measuring-page-load-time-with-numeric-event/ 

What do you think about this approach?

and why isn't event 56 showing the timestamp difference as an integer in cloud debugger?

Avatar

Level 4

ok, here's how cloud debugger is reading my events after setting up the below in AA report suite settings:

event 55 = counter = page load time denominator, always 1

eventt56 = numeric = %SiteSpeed: Page Load Time%

event57 = numeric = %SiteSpeed: fetchStart%

event58 = numeric = %SiteSpeed: eventLoadEnd%

values in debugger:

event55=1

event56=-1554752941276

event57=1554752941276

event58

--

event 57 is correctly pulling value for performance.timing.fetchStart from the console

event 58 is supposed to pull performance.timing.eventLoadEnd but is coming out as blank, leading to event 56 getting a negative value

event 56 is a Custom code as a data element:

return _satellite.getVar('SiteSpeed: loadEventEnd') - _satellite.getVar('SiteSpeed: fetchStart');

If I made the change in AA report suite settings for event58 as numeric type an hour ago, should it immediately show in Cloud Debugger when I reload the page?

What else could be wrong here.

Avatar

Correct answer by
Community Advisor

You do not run your code at the time. It needs to be run at the right time of the page lifecycle.

Ideally you would want to run performance code at unload time that way you know that your page is fully loaded (unless people nevigate before the page is fully loaded...).

We do it in this way:

  • Create an event listener on unload
  • On unload a function is called to get all performance data and store them in cookies. We also store the page name that will be the previous page name.
  • On next page send previous page name and performance data to Adobe Analytics
  • In Adobe Analytics run previous page report and add performance metrics

Avatar

Level 4

What Alexis has suggested is correct. The only downside is you wont get data for the exit pages

I am not exactly sure about your code to execute this. I can suggest best practices, but providing a granular solution will be difficult

Avatar

Level 4

Hi Alexis,

If I had to configure the below in Adobe Launch, how would I go about with this?

  • Create an event listener on unload

In Rules section, I can't find an event for unload.

  • On unload a function is called to get all performance data and store them in cookies. We also store the page name that will be the previous page name.

How can this be done via Adobe Launch?

  • On next page send previous page name and performance data to Adobe Analytics

Should all of the above steps happen in the same Rule? Wait for unload, save to cookies and then set variables > Send beacon ?

Thanks

Avatar

Level 10
Do any of the answers below answer your initial question? If so, can you select one of them as the correct answer? If none of the answers already provided answer your question, can you provide additional information to better help the community solve your question?