Loading...

Last updated: Mar 06 2018

Area: Episerver Perform, Episerver Reach Applies to versions: 1.4 and higher (JavaScript API)
Other versions:

Ajax tracking only

Ajax tracking is necessary for when the element/form is loaded or refreshed on a webpage using Ajax and needs to send the update to Episerver Personalization tracking system. This is in order to keep our reporting/tracking accurate and be able to correctly optimize the site recommendations and tracking based on the data we’ve gathered.

Supported page types

The following page types are supported:

Page typeExample Ajax call

basket

Peerius.sendAjax("<clientname>/basket/add.pagex?basket=" + basket);

checkout

Peerius.sendAjax("<clientname>/checkout/add.pagex?checkout=" + checkout);

category

Peerius.sendAjax("<clientname>/category/add.pagex?category=" + category);

wishlist

Peerius.sendAjax("<clientname>/wishlist/add.pagex?wishlist=" + wishlist);

product

Peerius.sendAjax("<clientname>/product/add.pagex?product=" + product);

Scenarios

Scenario 1: Product added to basket

When a new product is added to the basket, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and 15.00 GBP respectively.

ProductQuantityPrice

product 1

2

30.50

product 2

1

15.00

And the user adds one more item, product 3, to the basket with quantity 1 and unit price 10.00 GBP. So the basket will now look like this:

ProductQuantityPrice

product 1

2

30.50

product 2

1

15.00

product 3

1

10.00

Scenario 2: Quantity of a product is altered

When the quantity of a product in the basket is altered, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and

15.00 GBP respectively.

ProductQuantityPrice

product 1

2

30.50

product 2

1

15.00

And the user reduces the quantity of the item product 1 to 1. So the basket will now look like this:

ProductQuantityPrice

product 1

1

30.50

product 2

1

15.00

Scenario 3: Product removed from basket

When a product is removed from the basket, and is updated in the basket using Ajax.

Current basket has 2 items: product 1 and product 2 with quantity 2 and 1 and unit prices of 30.50 GBP and 15.00 GBP respectively.

ProductQuantityPrice

product 1

2

30.50

product 2

1

15.00

And the user removes the item product 1 from the basket. So the basket will now look like this:

ProductQuantityPrice

product 2

1

15.00

Implementation

The implementation of Ajax tracking consists of three stages:

  • Stage 1. An updated version of the changes 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 Episerver Personalization tracking system.
basket = {
"items": [{
"refCode": "product1", "qty": 2,
"price": 30.50
}, {
"refCode": "product2",
"qty": 1,
"price": 15.00
}],
"currency": "GBP"
}

Stage 1: Save the changes

An updated version of the basket changes needs to be stored in a variable defined as a JSON object.

Example:  Updated variable basket for Scenario 1.

var basket = { 
  "items": [{
    "refCode": "product1", 
    "qty": 2,
    "price": 30.50
  }, {
    "refCode": "product2", 
    "qty": 1,
    "price": 15.00
  }, {
    "refCode": "product3", 
    "qty": 1,
    "price": 10.00
  }],
  "currency": "GBP"
}

Example:  Updated variable basket for Scenario 2.

var basket = { 
  "items": [{
    "refCode": "product1", 
    "qty": 1,
    "price": 30.50
  }, {
    "refCode": "product2", 
    "qty": 1,
    "price": 15.00
  }],
  "currency": "GBP"
}

Example:  Updated variable basket for Scenario 3.

var basket = { 
  "items": [{
    "refCode": "product2", 
    "qty": 1,
    "price": 15.00
  }],
"currency": "GBP"
}

Stage 2: Encode the changes

After you have created the variable basket which holds the update of the basket, the next stage is to encode the contents of the variable using the encodeURIComponent method.

basket = encodeURIComponent(JSON.stringify(basket));

Stage 3: Send changes to Episerver

The next and final stage is to send the basket updates to the Episerver Personalization tracking system.

Peerius.sendAjax("<clientname>/basket/add.pagex?basket=" + basket);

Note: The <clientname> element is unique for your site and will be provided by Episerver.

Additional parameters

You can add the following parameters to the URL to send Episerver additional information.

ParameterExample Ajax call

location

Peerius.sendAjax("<clientname>/basket/add.pagex?basket="+basket+"&location="+location)

user

Peerius.sendAjax("<clientname>/basket/add.pagex?basket="+basket+"&user="+user)

Example: Variable location

var location = "en"

Example: Variable user

var user = { "id" : "abcd1234efgh" }
user = encodeURIComponent(JSON.stringify(user));

If sending both these variables, the Ajax call looks like this:

Peerius.sendAjax("<clientname>/basket/add.pagex?basket="+basket+"&location="+location+"&user="+user)

Do you have feedback on this documentation? Send an email to documentation@episerver.com. For development-related questions and discussions, refer to our Forums on https://world.episerver.com/forum/