Expand my Community achievements bar.

Applications for the Community Advisor Program Class of 2025 are NOW OPEN – Apply Today!
SOLVED

Guidance on Implementing SPA Event Tracking in Adobe Launch

Avatar

Level 4

Subject: Guidance on Implementing SPA Event Tracking in Adobe Launch

Dear Team,

I need to implement Single Page Application (SPA) event tracking in Adobe Launch. My question is:

Should I implement it using a Direct Call Rule, as shown below?

_satellite.setVar("digitalData", JSON.stringify(digitalData))
_satellite.track(identifier)

Or should I use the Adobe Client Data Layer Extension? by using event push with event_info.

Please provide step-by-step guidance on the best approach.

Best regards,
Kamlesh

1 Accepted Solution

Avatar

Correct answer by
Community Advisor

Hi @priyankagupta20 

how you implement it is up to you. 
The Direct Call rule approach is the classic one, the Adobe Client Data Layer is the one recommended these days by Adobe.

 

Side note, you can pass in a second Param into _satellite.track which is the event payload , so could directly be your JSON.

_satellite.track(identifier, digitalData);

 

See also https://webanalyticsfordevelopers.com/2018/09/18/quick-tip-passing-data-into-launch-rules

 

With the ACDL, you could send it as eventInfo attribute .

adobeDataLayer.push(

    event: identifier,

    eventInfo: digitalData  // assuming it is an object 

)

 

One way or another, you have to decide which approach you prefer.

 

The ACDL has typically a bit of a learning curve but has one HUGE advantage: it can take calls before the Launch library is loaded. You can initialize it as array and once Launch loads, it will enrich the window.adobeDataLayer array into an object with more functionality, still providing the standard Array.push method


// ACDL approach

window.adobeDataLayer = window.adobeDataLayer || [];

window.adobeDataLayer.push(...)

 

// load Launch script...

window.adobeDataLayer.getState("...") // added function, provided by the ACDL extension

 

--------

// _satellite.track approach

_satellite.track("eventName") // will fail if Launch has not loaded, leading to lost calls or workarounds from your dev team

// load launch 

Cheers from Switzerland!


View solution in original post

4 Replies

Avatar

Correct answer by
Community Advisor

Hi @priyankagupta20 

how you implement it is up to you. 
The Direct Call rule approach is the classic one, the Adobe Client Data Layer is the one recommended these days by Adobe.

 

Side note, you can pass in a second Param into _satellite.track which is the event payload , so could directly be your JSON.

_satellite.track(identifier, digitalData);

 

See also https://webanalyticsfordevelopers.com/2018/09/18/quick-tip-passing-data-into-launch-rules

 

With the ACDL, you could send it as eventInfo attribute .

adobeDataLayer.push(

    event: identifier,

    eventInfo: digitalData  // assuming it is an object 

)

 

One way or another, you have to decide which approach you prefer.

 

The ACDL has typically a bit of a learning curve but has one HUGE advantage: it can take calls before the Launch library is loaded. You can initialize it as array and once Launch loads, it will enrich the window.adobeDataLayer array into an object with more functionality, still providing the standard Array.push method


// ACDL approach

window.adobeDataLayer = window.adobeDataLayer || [];

window.adobeDataLayer.push(...)

 

// load Launch script...

window.adobeDataLayer.getState("...") // added function, provided by the ACDL extension

 

--------

// _satellite.track approach

_satellite.track("eventName") // will fail if Launch has not loaded, leading to lost calls or workarounds from your dev team

// load launch 

Cheers from Switzerland!


Avatar

Level 4

Thank you very much for your detailed explanation!

I understand that both approaches have their pros and cons. The Direct Call Rule is the traditional method, while Adobe Client Data Layer (ACDL) is the recommended approach by Adobe.
I am planning to use the Adobe Client Data Layer (ACDL) approach and need you to implement the data layer. Could you confirm if the following code is correct?
// This should be triggered when the user clicks on the "Send Feedback" button
adobeDataLayer.push({
"event": "newRequestSent",
"eventInfo": {
"topic": "Job Feedback", // Value of the Topic
"feedback": "Great Experience" // Value of the Description
}
});

If this implementation is incorrect or needs improvements, please guide me on the best approach.

Thank you!





Avatar

Community Advisor

Yeah looks good from what I can see on my mobile.


I would recommend reading into the ACDL topic a little. You can always drop me a DM if you have questions

Cheers from Switzerland!


Avatar

Community Advisor and Adobe Champion

When it comes to SPAs, I would say the greater risk is being able to ensure that all relevant information is available when the tracking fires...  I've seen many people have issues where the SPA will include the previous URL for instance...  since the transition from "page to page" is all done via JS, the URL, the history, the page content, etc all have to be updated by script... if the order and timing are off, then there is a chance of the wrong information being sent...

 

Regardless of what method you choose to pursue, make sure you test with different browsers, different devices, and even try throttling the emulated speed of a connection to ensure the correct information is being captured.