Webtrends Optimize has the ability to collect numerous events from Shopify:
Events we can collect
checkout_completed - we rename this to "purchase", and tag along revenue and units as Custom Data to this event.
page_viewed - we do not collect this by default
If you would prefer that we change what we capture, there are options to customise this in the code provided below.
Unless stated otherwise, we do not rename events to avoid confusion between ourselves and Shopify.
Requirements
Tag version 5.9 or higher
This allows you to use localstorage instead of cookies for control/project cookie storage, which is a requirement for the pixel.
The checkout must be on the same subdomain as the core website. E.g. everything on www.
This is because we use localstorage, and localstorage does not cross subdomains.
You must enable the localstorage option. This requires placing the following line of JS in your preinit script:
WT.cookieStrategy = "localstorage";
Required values
You will need your domain ID and key token values.
You can find these in your Account Settings area
Or, if you're on your website, you can paste this code into the console:
let { s_keyToken: token, s_domainKey: domain } = WT.optimizeModule.prototype.wtConfigObj;
console.log({token, domain});
Installation
At the top of the code provided below, please update the domain and token in the relevant areas. Other than this, you can copy/paste the code as detailed below.
Pixel code
analytics.subscribe("all_standard_events", async event => {
// ---- Configure this area :: START ----
let domain = '1440308';
let keyToken = "7a0a8366623f580210fc847c6f69c3b0912b04a2bd39";
let eventsToIgnore = "page_viewed"; // comma seperated
// ---- Configure this area :: END ----
let name = event.name;
eventsToIgnore = eventsToIgnore.split(',');
if(eventsToIgnore.includes(event.name)) return;
let projectCookies = {};
let taList = [];
var len = await browser.localStorage.length();
for(let i=0; i<len; i++){
let o = await browser.localStorage.key(i);
if(o.match(/_wt\./i)){
let val = await browser.localStorage.getItem(o);
projectCookies[o] = val;
taList.push( o.replace(new RegExp(`_wt.(control|project)-${domain}-`, 'i'), '') );
}
if(!o) break;
}
if(!taList.length){
return; // no assignments, nothing to convert on.
}
let standardCookies = {};
let usercookie = await browser.cookie.get('_wt.user-'+domain);
if(usercookie) standardCookies['_wt.user-'+domain] = usercookie;
let modecookie = await browser.cookie.get('_wt.mode-'+domain);
if(modecookie) standardCookies['_wt.mode-'+domain] = modecookie;
if(!usercookie || !modecookie){
return;
}
// build custom data
let data = {};
if(name == "checkout_completed"){
name = "purchase";
data.revenue = event.data?.checkout?.totalPrice?.amount || undefined;
data.units = event.data?.checkout?.lineItems?.length || 1;
}
var WTO_CTrack2 = function(params) {
var OTS_ACTION = params.conversionPoint ? 'track' : 'control';
var OTS_GUID = domain + (params.testAlias ? '-' + params.testAlias : '');
var useTestGroupShared = false;
var OTS_URL_POST = 'https://ots.webtrends-optimize.com/ots/api/rest-1.2/' + OTS_ACTION + '/' + OTS_GUID;
var aCookies = {};
for(let key in params.cookies){
aCookies[key] = { value: params.cookies[key] };
}
/* Send conversion request
-------------------------------------------------------------*/
var qpURL = '\x26url\x3d' + params.URL;
var qpConversion = '\x26conversionPoint\x3d' + params.conversionPoint || '';
var qpData = params.data ? '\x26data\x3d' + JSON.stringify(params.data) : '';
var offsetValue = function() {
var rightNow = new Date;
var offset = -rightNow.getTimezoneOffset() / 60;
return offset * 1E3 * 60 * 60;
};
var offset = '\x26_wm_TimeOffset\x3d' + offsetValue();
var referrer = '\x26_wm_referer\x3d' + params.referrer;
var rqElSrc = 'keyToken\x3d' + keyToken + '\x26preprocessed\x3dtrue\x26_wt.encrypted\x3dtrue\x26testGroup\x3d' + (useTestGroupShared ? 'shared' : 'default') + qpURL + '\x26cookies\x3d' + JSON.stringify(aCookies) + qpConversion + qpData + offset + referrer;
if(navigator.sendBeacon && window.Blob) {
var blob = new Blob([rqElSrc], {type: 'application/x-www-form-urlencoded'});
navigator.sendBeacon(OTS_URL_POST, blob);
} else {
var xhttp = new XMLHttpRequest();
xhttp.open('POST', OTS_URL_POST, true);
xhttp.setRequestHeader('Content-type', 'application/x-www-form-urlencoded');
xhttp.send(rqElSrc);
}
};
let url = encodeURIComponent(event.context.window.location.href);
let reqbody = {
conversionPoint: name,
testAlias: taList.join(','),
cookies: {
...standardCookies,
...projectCookies
},
URL: url,
referrer: url,
data
};
WTO_CTrack2(reqbody);
});
How to install
Head over to Settings > customer events in your admin area
That should get you to this screen:
Click "Add custom pixel" and give it a relevant name like Webtrends Optimize
Next, apply the configuration to the pixel as you feel appopriate, e.g.:
Note that Webtrends Optimize does not resell your data, nor pay for it, and so it should be a safe option to select.
Finally, find the code section just below it, which will look like:
Paste in the code above, having updated your domain and keytoken. It should look like this:
Once you're happy, click Save in the bar at the top:
That's it. All being well, you should start tracking metrics from this point onwards.
How long does it take to get working?
We have seen it take upto 1 minute for our changes to take effect, but often it's under 5 seconds.
If you don't see it take effect immediately. we recommend hard-refreshes (Ctrl+Shift+R / Cmd+Shift+R) for a minute or so, and it should come throug.
Final setup in Webtrends Optimize
We recommend adding the defaults to your Automatic tracking lists in Webtrends Optimize:
If you do so:
All of these metrics will show up when building tests to remind you we're capturing that information.
All Custom Data fields will be automatically attached to your tests, so you don't need to add them manually.