Tracking Click and Page View Events across multi-page + SPA
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.
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
You go through this and if any more questions please feel free to post it here.
Hope this helps.
Thanks
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?
Hi @MatthewMu5
Can you try to use with a custom events which listen to explicitly when the SPA view changes.
After triggerView, dynamically reattach custom event listeners to track click events. like below,
window.onhashchange = function () {
if (window.location.pathname.indexOf('sidney/testing/select-limits/#/') > -1) {
triggerView(location.hash);
// Attach custom click listeners as needed
document.querySelectorAll('.quote-submit-button').forEach(button => {
button.addEventListener('click', function () {
adobe.target.trackEvent({
mbox: 'funnel-step-click', //custom mbox name
params: { step: location.hash }
});
});
});
}
};
also make sure your adobe launch rule fired on every view change include the custom event to track click event.
Once this custom mbox triggered successfully, you can utilise this in your goals and setting metrics.
Hope this helps.
Hi @MatthewMu5
Yes try with trackEvent and let us know how it's going for you? Post your findings, thanks
Hi @MatthewMu5
trackEvent functionality does not provide an interface to view or report on these custom events directly within the Adobe Target UI.
Actually, it serves as a way to capture custom actions that can then be tied to specific metrics or used for integrations with Adobe Analytics (via A4T) or Target reporting tools.
In this case, once you implement the trackEvent, you can tie the mbox name 'funnel-step-click' (from above example) in Goals and Setting screen with custom metric.
Thanks
