How to configure WATTS to send SiteSpect campaign information for your SPA and/or event driven campaigns.
WATTS offers a robust solution for tracking user behavior and campaign effectiveness in single-page applications (SPAs) where content updates dynamically without full-page refreshes. This article details how WATTS bridges the gap between the dynamic nature of SPAs and the need for precise, real-time analytics.
Challenges of Tracking in SPAs
SPAs load a single HTML page and dynamically update it as the user interacts, providing a seamless experience. However, this introduces complexity in tracking user interactions because traditional tracking mechanisms rely on page reloads to trigger data collection events. In SPAs, where page reloads are absent, conventional tracking fails, leading to incomplete data on user behavior.
WATTS Integration with SPAs
WATTS addresses this issue through its API, which ensures continuous data flow between user interactions and the analytics backend. A key feature of this integration is the asynchronous ping to the endpoint /__ssobj/asmt_update. This function updates assignment data whenever a user triggers a change within the SPA that matches predefined criteria, such as navigating to a new section or engaging with a specific feature. This ensures that all significant actions are captured without requiring a page reload.
if (window.ss_dom_var && ss_dom_var.setAsmtCallback) {
ss_dom_var.setAsmtCallback(function(watts_object) {
var ssWattsExample = watts_object['countedCampaigns'];
console.log('Updated SS WATTS: ' + ssWattsExample);
// Additional logic to update application state or data layer
});
}
In this example, the setAsmtCallback function intercepts the data provided by WATTS and logs the updated campaign data for debugging. This data can then be used to update the application's state or the underlying data layer, ensuring real-time tracking of user interactions.
Advanced Configuration and Customization
Advanced configuration of WATTS in SPAs often involves custom templates and callback functions to meet specific tracking requirements. The default WATTS JSON template can be customized to capture particular user interactions and campaign data, as shown below:
{"countedCampaigns":"__SS_LISTCAMPAIGNCOUNTED{__SS_TCID__:__SS_VGID__}{;}__"}
If you need to change the default template, please work with your SiteSpect Solutions Team to implement (since this is a configuration setting) by sending an email to helpdesk@sitespect.com.
Developers can define callback functions within the ss_dom_var for custom actions based on user interactions.
SS.Require(function() {
if (window.ss_dom_var && ss_dom_var.setAsmtCallback) {
ss_dom_var.setAsmtCallback(function(watts_object) {
if(watts_object['ssCampaignCounted'].includes("1000042")){
someJavaScript();
}
});
}
});
This function checks if a specific campaign is counted and triggers a custom JavaScript function accordingly. This approach allows for tailored responses to user interactions, such as displaying personalized offers or messages.
Dynamic Data Layer Updates
For SPAs utilizing data layers (e.g., Google Tag Manager), advanced customization involves dynamically updating the data layer based on WATTS data. This integration ensures that user interactions are captured and available for analysis across all integrated tools:
SS.Require(function() {
if (window.ss_dom_var && ss_dom_var.setAsmtCallback) {
ss_dom_var.setAsmtCallback(function(watts_object) {
if(window.ssWATTS && ssWATTS.ssGUID){
ssWATTS.ssGUID = watts_object['ssGUID'];
ssWATTS.ssCounted = watts_object['ssCounted'];
if(window.dataLayer){
dataLayer.push({
'event': 'sitespect_watts',
'campaigns': ssWATTS.ssCounted,
'guide': ssWATTS.ssGUID
});
}
}
});
}
});
This snippet ensures that the WATTS data is pushed to the data layer, enabling seamless integration with other analytics and marketing tools.
Key Considerations
The setAsmtCallback function captures user interactions in real-time, providing immediate insights into user behavior. However, it is designed to act on current events and cannot retroactively modify data related to past interactions. This real-time focus ensures that WATTS effectively informs you about ongoing user activities, keeping the analytics current and relevant.
By understanding and implementing these advanced configurations and examples, developers can leverage WATTS to gain accurate, real-time insights into user interactions within SPAs, enhancing user experience and campaign effectiveness.
Please reach out to your SiteSpect support via helpdesk@sitespect.com should you have any questions or require any advice on the above.