Developer Portal: General Javascript Implementation

Once you have enabled visitor tracking for your ecommerce website, you need to implement tracking of the various ecommerce interactions on your website. There are four main ecommerce interactions that are tracked with Kevy:

  • Identifying a visitor
  • Order Tracking
  • Shopping Cart Tracking
  • Product Page Views Tracking

 

The following sections explain how to set up ecommerce tracking, using the JavaScript Tracking code.

 

Identifying the Visitor

Kevy’s Ecommerce tracking requires an identified visitor. We provide the following Javascript method to identify the visitor:

identify(email, firstName, lastName, phoneNumber, birthDay, company, addressOne, addressTwo, city, state, zip, country)

* email is a required parameter

 

Basic example of identifying a visitor:

<!-- Kevy Script -->
<script type="text/javascript">
  
  var _k = _k || [];
  (function() {
    _k.push(['identify','johnjones@email.com']);
  })();
</script>


Advanced example of identifying a visitor:

<!-- Kevy Script -->
<script type="text/javascript">
  
  var _k = _k || [];
  (function() {
    var customerEmail = 'johnjones@email.com'; // required
    var customerFirstName = 'John';
    var customerLastName = 'Jones';
    
    if (customerEmail != ""){
      _k.push(['identify',
             customerEmail, // email
             customerFirstName, // firstName
             customerLastName, // lastName
             "", // phoneNumber
             "", // birthDay
             "", // company
             "", // addressOne
             "", // addressTwo
             "", // city
             "", // state
             "", // zip
             ""  // country
      ]);
    }
  })();
</script>

 

Tracking Orders & Items Purchased

To track ecommerce orders, two Javascript functions are used:

1. addOrderItem(productSKU, productName, productCategory, price, quantity, productImageUrl)

* productSKU, productName, productCategory, price, and quantity are required

This adds a product into the order, and must be called for each product in the order. productSKU and productName are required parameters, it is also recommended that you send other parameters if they are applicable in your ecommerce store. productCategory must be an array of categories, ex: [‘category1’, ‘category2’]. 

Note: make sure that the product name, category, and image url are escaped, otherwise it may cause Javascript parse errors.

 

2. trackOrder(orderID, grandTotal, subTotal, tax, shipping, discount, emailAddress, firstName, lastName, phoneNumber, birthDay, company, addressOne, addressTwo, city, state, zip, country, couponCodes)

* orderID and grandTotal (ie. revenue) are required.

This tracks an ecommerce order and sends the data to your Kevy server, for both this order and products previously added. couponCodes must be an array of coupons, ex: [‘DISCOUNT1’, ‘DISCOUNT2’].

Here’s an example of tracking an ecommerce order containing two products – this code should be inserted in the “Order confirmation” page, once  the visitor has checked out and issued payment.

 

Basic example tracking of an order containing two products:

<!-- Kevy Script -->
<script type="text/javascript">
  var _k = _k || [];
  (function() {
    _k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 25.00, 2]);
_k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 50.00, 1, 'http://www.store.com/product_url.jpg']);

// required variables var orderNumber = 'Order1234'; var orderTotalPrice = 100.00; // Expected format is a decimal value without currency, e.g., 18.99 _k.push(['trackOrder', orderNumber, orderTotalPrice]);

})();
</script>
<!-- End Kevy Script -->

Advanced example tracking of a order containing two products:

<!-- Kevy Script -->
<script type="text/javascript">
  var _k = _k || [];
  (function() {
    _k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 25.00, 2]);
_k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 50.00, 1, 'http://www.store.com/product_url.jpg']);
_k.push(['trackOrder', 'Order1234', 100.00, 100.00, 0.00, 0.00, 0.00, 'jonjones@email.com', 'Jon', 'Jones', '555-555-5555', '13-05-1985', 'Acme Co.', '50 Main St.',
'Suite 100', 'New York', 'NY', '10001', 'USA', ['DISCOUNT1', 'DISCOUNT2'] ]);
})();
</script>
<!-- End Kevy Script -->


Important notes about the functions parameters:

price (parameter of addOrderItem() function), grandTotal, subTotal, tax, shipping, discount (parameters of trackOrder() function) must be supplied as integer or floats, not as strings. For example:

Invalid: “14.4$”, “EUR14.4″, “14,4”, “14.4”.

Valid: 5, 3.3, 5.44.

The orderID parameter is a unique string identifier for the order.

Note: make sure that the Product SKUs, names and categories are escaped, in particular the ” character (double quotes), otherwise it may cause Javascript parse errors.

 

Tracking Add to Cart & Items Added to the Cart

To track Shopping Carts with Kevy, use the below Javascript method:


trackCartUpdate(cartAmount, cartToken, emailAddress, cartUrl)

This method is required every time a user updates their cart.

Note: If you wish to track the products added to a shopping cart, the addOrderItem method should be called for every item in the cart.

 

Example tracking of a shopping cart containing two products:

 

<!-- Kevy Script -->
<script type="text/javascript">
  var _k = _k || [];
  (function() {
    _k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 25.00, 2, 'http://www.store.com/product_url.jpg']);
_k.push(['addOrderItem', 'testSku', 'testProduct', ['shoes', 'clothes'], 50.00, 1]);
_k.push(['trackCartUpdate', 100.00)]); // cart total example value: 10.99
})();
</script> <!-- End Kevy Script -->



Product Page View Tracking

Use the below Javascript method to track product page views. This code should be inserted on every product page that you wish to track.

 

trackProductView(productSKU, productName, brandName, imageUrl, description, price, categories, bodyHTML) 

This creates a product page view for the visitor. productName is a required parameters. categories must be an array of strings, ex: [‘category1’, ‘category2’].

 

Note: make sure that the product name, description, categories and imageUrl are escaped, otherwise it may cause Javascript parse errors.

 

Basic example of tracking a product page view:

<!-- Kevy Script -->
<script type="text/javascript">
  var _k = _k || [];
  (function() {  
_k.push(['trackProductView', 'SKU123', 'Ski Jack', // required
]);
})();
</script>
<!-- Kevy Script -->



Advanced example of tracking a product page view:

 

<!-- Kevy Script -->
<script type="text/javascript">
  var _k = _k || [];
  
  (function() {
    // required variables
    var productSku = 'SKU123';
    var productName = 'Ski Jack';
    
    // optional variables
    var brandName = 'Parker Brand';
    var productImageUrl = 'http://www.store.com/product_url.jpg';
    var productDescription = 'Ski jacket';
    var productPrice = 20.50; // Expected format is a decimal value without currency, e.g., 18.99
    var categories = ['Jackets', 'Clothing']; // Expected array of strings, e.g., ['Shoes', 'Clothing']
var bodyHTML = "<p>HTML description of product</p>" _k.push(['trackProductView', productSku, productName, // required brandName, productImageUrl, productDescription, productPrice, categories ]); })(); </script> <!-- Kevy Script -->
Have more questions? Submit a request

0 Comments

Please sign in to leave a comment.
Powered by Zendesk