Best Practices for Tags in a SPA | Community
Skip to main content
N
NicholasDrzewiecki
Level 2
May 31, 2024
Solved

Best Practices for Tags in a SPA

  • May 31, 2024
  • 2 replies
  • 2080 views

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.

    This post is no longer active and is closed to new replies. Need help? Start a new post to ask your question.
    Best answer by Ankit_Chaudhary

    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 

    2 replies

    N
    NicholasDrzewieckiAuthor
    Level 2
    May 31, 2024

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

     

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

      Ankit_Chaudhary
      Community Advisor
      Ankit_ChaudharyCommunity AdvisorAccepted solution
      Community Advisor
      May 31, 2024

      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 

        N
        NicholasDrzewieckiAuthor
        Level 2
        May 31, 2024

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

          Terms & ConditionsAccessibility statement

          Loading footer...