Adobe Experience Platform

NicholasDrzewiecki · 5/30/24

Hi!

Does anybody have any suggestions on implementing Tags in a SPA?

I want to become more proficient with Tags so I created a new Remix app (uses React) and a new Tags property.

Should I just include the Tags script in the `<head>` for my environment, install a data layer extension like Adobe Client Data Layer, and push events to it from my Remix app?

For example, page load events could be pushed from a `useEffect` in route components.

Then we can set up rules for these page load events and set Adobe Analytics variables using the data that is pushed with the event.

Or is there a "better" way to implement Tags than this for a SPA?

For example, I ran across this video recently and am wondering if this is an alternative way to do what I just described above?

https://www.youtube.com/watch?v=D9eouvCtNRU

Would like to know before I invest more time into thinking how to structure my dummy Remix app and my data layer, and rules and data elements, etc.

Ankit_Chaudhary · 5/30/24

Hi @NicholasDrzewiecki

Implementing Tags/Adobe Launch for SPA is same as other websites you just need to paste the launch script in the head tag

however unlike regular pages where page load every time when user navigate to another page or section in the website SPA only change its state and hence launch page load events (such as DOM Ready or window loaded) won't be helpful if you want to track page loads.
SOLUTION: utilize the direct call event type while creating a rule to specifically fire a page view beacon on every page(state change) to track page views.
OR as you are already using an Adobe Event driven data data layer ACDL you can listen to the event pushed on every page load
Also check out this medium article on Rule creation strategies

View solution in original post

NicholasDrzewiecki · 5/30/24

Sorry this is probably better suited for: https://experienceleaguecommunities.adobe.com/t5/adobe-experience-platform-data/ct-p/adobe-launch-co...

Did not notice that sub-community. I can't delete this post either due to an error.

Ankit_Chaudhary · 5/30/24

Hi @NicholasDrzewiecki

Implementing Tags/Adobe Launch for SPA is same as other websites you just need to paste the launch script in the head tag

however unlike regular pages where page load every time when user navigate to another page or section in the website SPA only change its state and hence launch page load events (such as DOM Ready or window loaded) won't be helpful if you want to track page loads.
SOLUTION: utilize the direct call event type while creating a rule to specifically fire a page view beacon on every page(state change) to track page views.
OR as you are already using an Adobe Event driven data data layer ACDL you can listen to the event pushed on every page load
Also check out this medium article on Rule creation strategies

NicholasDrzewiecki · 5/31/24

Thanks for the reply! That article is great. Seeing different approaches is always helpful.

Adobe Experience Platform

Best Practices for Tags in a SPA

Learn

Documentation

Community

Support

Resources

Adobe account

Adobe