Guidance on Implementing SPA Event Tracking in Adobe Launch | Community
Skip to main content
P
priyankagupta20
Level 4
February 5, 2025
Solved

Guidance on Implementing SPA Event Tracking in Adobe Launch

  • February 5, 2025
  • 2 replies
  • 1358 views

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

Best answer by bjoern__koth

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 

2 replies

bjoern__koth
Community Advisor and Adobe Champion
bjoern__kothCommunity Advisor and Adobe ChampionAccepted solution
Community Advisor and Adobe Champion
February 5, 2025

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!
    P
    priyankagupta20Author
    Level 4
    February 5, 2025

    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!





      bjoern__koth
      Community Advisor and Adobe Champion
      bjoern__kothCommunity Advisor and Adobe Champion
      Community Advisor and Adobe Champion
      February 5, 2025

      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!
        Jennifer_Dungan
        Community Advisor and Adobe Champion
        Jennifer_DunganCommunity Advisor and Adobe Champion
        Community Advisor and Adobe Champion
        February 5, 2025

        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.

          Terms & ConditionsAccessibility statement

          Loading footer...