WATTS for Single Page Applications and Client Side Variations

The following functionality provides a function that is called when a page URL changes to match Path Trigger and therefore the user is counted in the campaign

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.

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.

The default template for the WATTS JSON Structure in Site Features

{"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.

How a rewrite of ss_dom_var.setAsmtCallback would look

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

If you are loading the library in a synchronous 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:

// Place the below after existing definition from the site variation "SPA" Template

// 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);
        });
    }
});

If you want to update your dataLayer also:

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',
                        'sscampaigns': ssWATTS.ssCounted,
                        'ssguid': ssWATTS.ssGUID
                    });
                }
            }
        });
    }
});

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.