Tracking Click and Page View Events across multi-page + SPA | Community
Skip to main content
M
MatthewMu5
January 8, 2025
Question

Tracking Click and Page View Events across multi-page + SPA

  • January 8, 2025
  • 1 reply
  • 1820 views

Hi all.

 

I am attempting to track click and page view events in an AB test I'm running.  However, I'm having some issues as the site we are working on is both a multi-page and a SPA website.

In the test, we are primarily tracking a button click from the home page, which navigates the user to a separate page in the site.

 

This new page operates essentially as a SPA, it has a funnel the user goes through similar to a "quote" application process, but it is all one page with sequential endpoints as "steps" in the process.

TLDR

  1. Selection events aren't re-attaching to the page on a multi-page + SPA solution
  2. Better way to force attach selection events than getOffers/applyOffers?
    1. getOffers/applyOffers is executed every time the url changes on an event listener
  3. Click tracking on nav menu in the home page is not consistent at all in live audience mode
    1. Is it possible that this is due to navigation happening too quick for target to log the event?

More Information
We have a primary goal (tracking button clicks on a CTA on the home page) as well as several sub-metrics (tracking each submit button clicked throughout the quote user funnel)

I'm running into the following issues when tracking:

  1. On the home page, the selection event is attached to the button normally (on page load event), submit button for the first step is also attached after navigation
    1. However, once the user navigates through the funnel, Target does not re-apply the metric selection events to the rest of the steps in the funnel ( as the url changes but the page does not re-load due to it being a SPA)
    2. Therefore, we get (albeit inconsistent) results from the first two metrics in the quote process, but none of the rest of the tracking occurs for the other steps
  2. To fix the above, I added a getOffers/applyOffers code snippet every time the url changes in the funnel
    1. This essentially treats every url change as a new page load event, re-attaching the click event listeners as expected throughout the funnel
    2. However, this is seen as a bandaid, and creates many callouts to Target that we don't need to track
      1. Any advice on tackling the above?  I could narrow down the getOffers/ApplyOffers callout
  3. Another issue, the button click on the homepage seems very inconsistent.
    1. In QA mode, the button click is tracked properly
    2. In live audience mode, the button click is tracked way less than the rest of the steps in the funnel
      1. eg maybe 4-5 button clicks were tracked, but over 100 people made it through the funnel
      2. indicating either the click event wasn't tracked for these users or they navigated to the rest of the funnel from other means
    3. Is it possible that the click navigation is happening too quickly for target to capture the click event?  Thus forcing the event to cancel?
      1. Also, is it possible for a user to trigger metrics from manually navigating to the pages (for page view metrics)?  Our intention is to only track users that have clicked the nav button initially, not track from anywhere else

Thank you, I hope someone can shed some light on this!  I'm happy to provide any code snippets/configuration details if needed.

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

1 reply

Gokul_Agiwal
Community Advisor
Gokul_AgiwalCommunity Advisor
Community Advisor
January 9, 2025

Hi @matthewmu5 I believe you're using at.js for your implementation and this been either setup through Adobe Launch or directly at.js injection to your application right. 

So what I understood from above problem is that, The click tracking is not working as expected due to SPA dynamic content updates. 

 

So here I would suggest, instead of reloading the page or calling getOffers/ applyOffers each time, you can call adobe.target.triggerView(),  to inform the AT when the view changes .. in your case ( step in the funnel) 

adobe.target.triggerView("step1")

you can define/trigger the views for each SPA steps in funnel, like step1, step2, ... so on.

Here is the link for Adobe Target implementation in SPA -  you can go through it to understand the way it works. 

https://experienceleague.adobe.com/en/docs/target-learn/tutorials/implementation/implement-atjs-20-in-a-single-page-application

https://experienceleague.adobe.com/en/docs/target-dev/developer/client-side/at-js-implementation/deploy-at-js/target-atjs-single-page-application  

 

For another question where you said, the button click on the homepage seems very inconsistent 

Possibly, the navigation occurring too quickly for Target to capture the event, then either you can put some delay after the click event to make sure that click event is captured  using 

adobe.target.trackEvent

https://experienceleague.adobe.com/en/docs/target-dev/developer/client-side/at-js-implementation/functions-overview/adobe-target-trackevent 

 

You go through this and if any more questions please feel free to post it here.

Hope this helps.

Thanks

 

    M
    MatthewMu5Author
    January 9, 2025

    Hi @gokul_agiwal , thanks for the help!!

     

    So thats the thing, we were originally using triggerView on url hash changes with no luck.  We're using Adobe Launch/Data Collection and running a rule to load target onto the page.  We're attaching an event listener onhashchange to execute triggerView
    For more context here is the script we run (the getOffers portion is currently commented out but we were testing with that too):

    function sanitizeViewName(viewName) { if (viewName.startsWith('#')) { viewName = viewName.substr(1); } if (viewName.startsWith('/')) { viewName = viewName.substr(1); } return viewName; } function triggerView(viewName) { viewName = sanitizeViewName(viewName) || 'home'; // Validate if the Target Libraries are available on your website if (typeof adobe != 'undefined' && adobe.target && typeof adobe.target.triggerView === 'function') { adobe.target.triggerView(viewName); // This is the getOffers/applyOffers bandaid /*adobe.target.getOffers({ request: { execute: { pageLoad: {} } } }). then(response => adobe.target.applyOffers({ response: response })) .then(() => console.log("Success")) .catch(error => console.log("Error", error));*/ console.log('AT: View triggered on page load: '+viewName) } } //fire triggerView when the SPA loads and when the hash changes in the SPA if(window.location.pathname.indexOf('sidney/testing/select-limits/#/')){ triggerView(location.hash); } window.onhashchange = function() { if(window.location.pathname.indexOf('sidney/testing/select-limits/#/')){ triggerView(location.hash); } }

    To be clear, the triggerView code above is firing properly, but selection events are not being re-attached to track user's clicks further in the funnel.

     

    The metrics are using page-load events to attach the click event listeners, so my guess is triggerView is not working on these events because of that.  Is there a way I can trigger these events to attach when the View loads (ie when triggerView occurs)?  I'm not seeing anywhere in the experience UI to assign a metric goal to attach on a specific view (at least in Goals & Settings)

     

    However, I CAN see the view when setting up Experience A/B in the "Experiences" tab.

     

    Is there something I'm missing here?

    RiteshY18
    Community Advisor
    RiteshY18Community Advisor
    Community Advisor
    January 14, 2025

    @matthewmu5 can you confirm which Target extension you are using in Adobe Launch, should be V2- has support for SPA

    Terms & ConditionsAccessibility statement

    Loading footer...