Ajax tracking plus recommendations
11 min
Ajax tracking can be used when an element, form, or page state is loaded, or refreshed on a webpage using Ajax, and the updated tracking information needs to be sent to the Optimizely Recommendations tracking system. As a response to this request, Optimizely returns any widgets configured for the page. When the recommendations are ready, they are passed to the smartRecs callback function in the form of JSON data.
var PeeriusCallbacks={
smartRecs:function(jsonData) {
// rendering code here ….
}
}Tracking requests
Ajax tracking supports the same page types as the normal JavaScript API tracking. The elements to be included in the tracking variable for each page type are also the same. There is one additional element, which is common to all requests and needs to be provided every time, and this is site. The site value will be provided to you by Optimizely.
The implementation of Ajax tracking consists of three stages:
- Stage 1 – An updated version of the tracking needs to be stored in a variable.
- Stage 2 – The contents of the variable need to be encoded by calling the encodeURIComponent method.
- Stage 3 – Send the updates to the Optimizely Recommendations tracking system by calling Peerius.sendAjax("rest.pagex?jd="+json)
Homepage
var json = {
"site" : "clientname",
"type" : "home",
"lang" : "en-gb",
"channel" : "web",
"user" : { "id": "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Product page
var json = {
"site" : "clientname",
"type" : "product",
"lang" : "en-gb",
"channel" : "web",
"product" : { "refCode": "PROD500" },
"user" : { "id": "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Category page
var json = {
"site" : "clientname",
"type" : "category",
"lang" : "en-gb",
"channel" : "web",
"category" : "Clothing>Dresses",
"user" : { "id": "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Basket page
var json = {
"site" : "clientname",
"type" : "basket",
"lang" : "en-gb",
"channel" : "web",
"basket" : {
"items" : [{
"refCode" : "PROD500",
"qty" : 1,
"price" : 165.00
},
{
"refCode" : "PROD600",
"qty" : 1,
"price" : 85.00
}],
"currency" : "GBP"
},
"user" : { "id": "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Checkout page
var json = {
"site" : "clientname",
"type" : "checkout",
"lang" : "en-gb",
"channel" : "web",
"checkout" : {
"items" : [{
"refCode": "PROD500",
"qty": 1,
"price": 165.00
},
{
"refCode": "PROD600",
"qty": 1,
"price": 85.00
}],
"currency" : "GBP",
"subtotal" : 246.00,
"shipping" : 4.00,
"total" : 250.00
},
"user" : { "id" : "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Order confirmation page
var json = {
"site" : "clientname",
"type" : "order",
"lang" : "en-gb",
"channel" : "web",
"order" : {
"orderNo" : "ABC-DE-123456",
"items" : [{
"refCode": "PROD500",
"qty": 1,
"price": 165.00
},
{
"refCode": "PROD600",
"qty": 1,
"price": 85.00
}],
"currency" : "GBP",
"subtotal" : 246.00,
"shipping" : 4.00,
"total" : 250.00
},
"user" : { "id" : "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Search results page
Successful search
var json = {
"site" : "clientname",
"type" : " searchresults",
"lang" : "en-gb",
"channel" : "web",
"searchResults" : {
"term" : " hello",
"results" : [{
"refCode" : " PROD500"
},
{
"refCode" : " PROD600"
}]
},
"user" : { "id" : "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Empty search (no results)
var json = {
"site" : "clientname",
"type" : " searchresults",
"lang" : "en-gb",
"channel" : "web",
"searchResults" : {
"term" : " hello",
"results" : []
},
"user" : { "id" : "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);Other page
var json = {
"site" : "clientname",
"type" : " other",
"lang" : "en-gb",
"channel" : "web",
"user" : { "id" : "abcd1234efgh" }
}
json = encodeURIComponent(JSON.stringify(json));
Peerius.sendAjax("rest.pagex?jd="+json);