1. Help Center
  2. Analyze
  3. Data Export and Integration

WATTS for Single Page Applications and Client Side Variations

The following functionality provides a function that gets triggered every time a page URL changes without a new server request.

If you are using WATTS with a Single-Page Application, you can use an API call to request WATTS data. By default, the SiteSpect SPA SDK pings SiteSpect asynchronously (using /__ssobj/asmt_update) when a change is applied to update assignment data. This ping also updates the counted state for a visit if the Client-Side Factor is set to Count User when Triggered. By default, the ping returns an empty body and a 204, but it can be used to return updated assignment and WATTS variables.

To configure this call, you can define the WATTS macros in a JSON structure for the AJAX response as follows:

  1. Select SiteConfigurationSite Settings.
  2. Select the Features tab.
  3. Scroll down until you see Client-Side WATTS Template. Use this text area to define your WATTS macros.

A callback function is called with the data in the response so that a data layer on the page can be updated with an updated assignment. The callback function name is defined via ss_dom_var.setAsmtCallback; we recommend that you define this function in the WATTS Site Variation.

An example of the WATTS JSON Structure in Site Features

{"countedCampaigns":"__SS_LISTCAMPAIGNCOUNTED{__SS_TCID__:__SS_VGID__}{;}__"}

How a rewrite of ss_dom_var.setAsmtCallback would look

ss_dom_var.setAsmtCallback(function(watts_object){ss_watts=watts_object['countedCampaigns']});


Note: if you are using the SS.Require pattern to load the system libraries, you will need to call the above with a callback it since it won't be loaded yet unless you did a blocking script.

For example, if you are loading the library in a blocking manner, the following would work:

<script src="/__ssobj/core.js+ssdomvar.js+generic-adapter.js"></script>
<script>
// rewrite ss_dom_var.setAsmtCallback()
if (window.ss_dom_var && ss_dom_var.setAsmtCallback) {
ss_dom_var.setAsmtCallback(function(watts_object) {
var ssWattsExample;
ssWattsExample = watts_object['countedCampaigns'];
console.log('Updated SS WATTS: ' + ssWattsExample);
});
}
</script>

If you are using the SS.Require pattern, the following callback approach would work:

// existing definition from the site variation "SPA" Teamplate
window.SS = window.SS || {};
SS.Require = function(callback) {
if (typeof callback == "function") {
if (window.SS && SS.EventTrack) {
callback();
} else {
var siteSpect = document.getElementById("siteSpectLibraries");
var head = document.getElementsByTagName("head")[0];
if (siteSpect == null && head != undefined) {
siteSpect = document.createElement("script");
siteSpect.type = "text/javascript";
siteSpect.src = "/__ssobj/core.js+ssdomvar.js+generic-adapter.js";
siteSpect.async = true;
siteSpect.id = "siteSpectLibraries";
head.appendChild(siteSpect);
}
if (window.addEventListener) {
siteSpect.addEventListener("load", callback, false);
} else {
siteSpect.attachEvent("onload", callback, false);
}
}
}
};

// Now calls itself but with the ss_dom_var rewrite declaration callback
SS.Require(function() {
// rewrite ss_dom_var.setAsmtCallback()
if (window.ss_dom_var && ss_dom_var.setAsmtCallback) {
ss_dom_var.setAsmtCallback(function(watts_object) {
var ssWattsExample;
ssWattsExample = watts_object['countedCampaigns'];
console.log('Updated SS WATTS: ' + ssWattsExample);
});
}
});

Note: ssWattsExample is an example variable. You might instead have ss_watts like shown below. In this type of use case, your third party analytics would reference ss_watts every time there was a page change and since ss_dom_var.setAsmtCallback() updates the values - they would get picked up. Or alternatively, other updates can be made insides of ss_dom_var.setAsmtCallback() such as datalayer updates or function calls.

If the callback function is not defined, the data from the response can be accessed from SS.getAsmtData().

The reference to ss_watts variable assumes that it has been defined at the window scope, Most clients declare this within the head tag like

<script>var ss_watts="__SS_LISTCAMPAIGNCOUNTED{__SS_TCID__:__SS_VGID__}{,}__";</script></head>

This declaration is generally referred to as the WATTS Site Variation noted above.