E-commerce data tracking via tracking master

To sell more, you need to track user data on your website to learn visitor's behavior and take an action.

The following events are interesting for e-commerce: items viewing, adding them to shopping cart, making an order, etc.

Follow the instruction below and track these data:

Lead properties:

Viewed items

Cart

Cart amount

Orders total number

Last order amount

Orders total amount

Lead events:

Item viewed

Added an item to the cart

Cart viewed

Removed item from cart

Started checkout

Order made

Lead properties will be displayed on the left in lead card.

Lead events are displayed in chronological order.

The code should be added to Tracking -> Tracking master -> Configure the JavaScript code. Use a template with the written data.

Note that if you have an access to the code of your website, then the most stable way is to add codes according to the following instructions.

Events and properties for viewing items and adding them to the shopping cart

Add a code template to Tracking -> Tracking master -> Configure the JavaScript code:

if (location.href.indexOf('/POINT1/') > -1) {
    var name = document.querySelector('POINT2').textContent;
    var url = location.href;
    var amount = parseInt(document.querySelector('POINT3').textContent.replace(/\D/g, ''));
    var img = POINT5 document.querySelector('POINT4 img').getAttribute('src');

    dashly.track('$product_viewed', {
        '$name': name,
        '$url': url,
        '$amount': amount,
        '$img': img
    });

    dashly.identify([{ op: "union", key: "$viewed_products", value: name }]);
    document.querySelector('POINT6').onclick = function() {
        dashly.track('$cart_added', {
            '$name': name,
            '$url': url,
            '$amount': amount,
            '$img': img
        });

        dashly.identify([
            { op: "union", key: "$cart_items", value: name },
            { op: "add", key: "$cart_amount", value: amount }
        ]);
    };
};

1. Enter the value from the link which is repeated in every page of the item. Replace POINT1 in the code with this value.
Example:
http://bitrix.dashly.ru/catalog/product/pants/ product is the value in this link:

if (location.href.indexOf('/product/') > -1) {

1.1 If there is no unique value in the item link, then such unique value as class or id which is used only on item page can be added. In this case first code line should be replaced with:

if (document.querySelectorAll('POINT.1').length > 0) {

enter this unique value instead of POINT1.1. For example, attribute class=”product” occurs only on pages with items, then we should add .product into the code:

if (document.querySelectorAll('.product').length > 0) {

2. Define element selector with item title:

In our example .product-title is the selector. Replace POINT2 with .product-title:

var name = document.querySelector(' .product-title ').textContent;

If you prefer id as value then you should use # symbol instead of . in template (#product-title instead of .product-title)

3. Item cost. Define cost element selector. Use a value that is unique on this page .js-prices-current:

var amount = parseInt(document.querySelector(' .js-prices-current ').textContent.replace(/\D/g,''));

4. Picture of an item. Define unique value of a containing picture tag. There should be an attribute src with link value with the place of its storage in this tag (if you click on this link in browser you will see a picture).

The value in our example will be   .gallery-large_image 

5. Besides, let's check whether the link to the picture containts a domain. If the link looks like “https://domain…” then just remove POINT5 from the template. If there is no domain in the link, just relapse POINT5 with the following

location.origin +

6. Define the selector of "add to cart" button. Let it be button.product-buy. By clicking on this button an event should be triggered and property recorded:

document.querySelector(' button.product-buy ').onclick = function()

Let's check:

if (location.href.indexOf('/product/') > -1) { 
    var name = document.querySelector('.product-title').textContent; 
    var url = location.href; 
    var amount = parseInt(document.querySelector('.js-prices-current').textContent.replace(/\D/g, '')); 
    var img = document.querySelector('.gallery-large_image img').getAttribute('src');
        
    dashly.track('$product_viewed', { 
        '$name': name, 
        '$url': url, 
        '$amount': amount, 
        '$img': img 
    });
        
    dashly.identify([{ op: "union", key: "$viewed_products", value: name }]);
        
    document.querySelector('button.product-buy').onclick = function() { 
        dashly.track('$cart_added', { 
            '$name': name, 
            '$url': url, 
            '$amount': amount, 
            '$img': img 
        });
        
        dashly.identify([ 
            { op: "union", key: "$cart_items", value: name }, 
            { op: "add", key: "$cart_amount", value: amount } 
        ]); 
    }; 
};

If there is a unique way to the link of this item with common value, here is what you should have in Tracking master:

if (document.querySelectorAll('.product').length > 0) { 
    var name = document.querySelector('.product-title').textContent; 
    var url = location.href; 
    var amount = parseInt(document.querySelector('.js-prices-current').textContent.replace(/\D/g, '')); 
    var img = document.querySelector('.gallery-large_image img').getAttribute('src');
    
    dashly.track('$product_viewed', { 
        '$name': name, 
        '$url': url, 
        '$amount': amount, 
        '$img': img 
    });
    
    dashly.identify([{ op: "union", key: "$viewed_products", value: name }]);
    
    document.querySelector('button .product-buy').onclick = function() { 
        dashly.track('$cart_added', { 
            '$name': name, 
            '$url': url, 
            '$amount': amount, 
            '$img': img 
        });
    
        dashly.identify([ 
            { op: "union", key: "$cart_items", value: name }, 
            { op: "add", key: "$cart_amount", value: amount } 
        ]); 
    }; 
};

Events and properties on shopping cart page

Add a code template to Run JavaScript in Tracking master tab:

if (window.location.href == 'POINT1') {

    function get_items() {
        dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }]);
        var items = document.querySelectorAll('POINT2');
        var m = [];
    if (items.length > 0) {
            for (var i = 0; i < items.length; i++) {
                m.push({ op: "union", key: "$cart_items", value: items[i].textContent.replace(/\s\s/g, '').replace(/\t/g, '') })
            };
            dashly.identify(m);
        } else {
            dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }])
        };

        dashly.identify([{ op: "update_or_create", key: "$cart_amount", value: parseInt(document.querySelector('POINT3').textContent.replace(/\s/g, '')) }]);
        localStorage['lastAmount'] = parseInt(document.querySelector('POINT3').textContent.replace(/\D/g, ''));
    };
    get_items();

    dashly.track('$cart_viewed');
    document.querySelector('POINT4').addEventListener('click', function() {
        setTimeout(function() {
            get_items();
        }, 1000);
    });
    document.querySelector('POINT5').addEventListener('click', function() {
        dashly.track('$order_started');
    });
};
  1. Enter full link to the shopping cart page instead of POINT1. For example:
    if (window.location.href == "http://bitrix.dashly.ru/personal/cart/") {
  2. Find on a shopping cart link tag which contain item name and enter it instead of POINT2 selector. In the moment of data tracking amount of elements with selector should match with the amount of added to the shopping cart items. Example:
    var items = document.querySelectorAll('.bx_ordercart_itemtitle a');
  3. Find an element, containing total amount in shopping cart and enter selector of this element instead of POINT3. You should duplicate this value in the template. Example:
    dashly.identify([{ op: "update_or_create", key: "$cart_amount", value: parseInt(document.querySelector('#allSum_FORMATED').textContent.replace(/\s/g, '')) }]);
    localStorage['lastAmount'] = parseInt(document.querySelector('#allSum_FORMATED').textContent.replace(/\D/g, ''));
  4. Find element with button or link for removing the item and enter selector of this element instead of POINT4. Example:
    document.querySelector('.control :first-child').addEventListener('click', function() {
  5. Add start checkout button selector instead of POINT5. Example:
    document.querySelector('.checkout').addEventListener('click', function() {

Let's check:

if (window.location.href == 'http://bitrix.dashly.ru/personal/cart/') {

    function get_items() {
        dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }]);
        var items = document.querySelectorAll('.bx_ordercart_itemtitle a');
        var m = [];
        if (items.length > 0) {
            for (var i = 0; i<</span > items.length; i++) {
                m.push({ op: "union", key: "$cart_items", value: items[i].textContent.replace(/\s\s/g, '').replace(/\t/g, '') })
            };
            dashly.identify(m);
        } else {
            dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }])
        };

        dashly.identify([{ op: "update_or_create", key: "$cart_amount", value: parseInt(document.querySelector('#allSum_FORMATED').textContent.replace(/\s/g, '')) }]);
        localStorage['lastAmount'] = parseInt(document.querySelector('#allSum_FORMATED').textContent.replace(/\D/g, ''));
    };
    get_items();

    dashly.track('$cart_viewed');
    document.querySelector('.control :first-child').addEventListener('click', function () {
        setTimeout(function () {
            get_items();
        }, 1000);
    });
    document.querySelector('.checkout').addEventListener('click', function () {
        dashly.track('$order_started');
    });
};

Events and properties of completed order

Add a code template to Run JavaScript in Tracking master tab:

if (location.href.indexOf('POINT1') > -1) {
    dashly.track('$order_completed', {
        '$order_amount': localStorage['lastAmount'],
        '$order_id': document.querySelector('POINT2').textContent.replace(/\D/g, '')
    });
    dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }]);
    dashly.identify([{ op: "delete", key: "$viewed_products", value: 0 }]);
    dashly.identify([{ op: "delete", key: "$cart_amount", value: 0 }]);
    dashly.identify([{ op: "add", key: "$revenue", value: localStorage['lastAmount'] }]);
    dashly.identify([{ op: "add", key: "$orders_count", value: 1 }]);
    dashly.identify([{ op: "update_or_create", key: "$last_payment", value: localStorage['lastAmount'] }]);
    localStorage.removeItem('lastAmount');
};
  1. Replace POINT1 with a part of URL of the page with order confirmation. Example:
    if (location.href.indexOf('?ORDER_ID') > -1) {
  2. Find selector, containing unique order number and enter it in POINT2. Example:
    document.querySelector('.sale_order_full_table b').textContent.replace(/\D/g, '')

Let's check:

if (location.href.indexOf('?ORDER_ID') > -1) {
    dashly.track('$order_completed', {
        '$order_amount': localStorage['lastAmount'],
        '$order_id': document.querySelector('?ORDER_ID').textContent.replace(/\D/g, '')
    });
    dashly.identify([{ op: "delete", key: "$cart_items", value: 0 }]);
    dashly.identify([{ op: "delete", key: "$viewed_products", value: 0 }]);
    dashly.identify([{ op: "delete", key: "$cart_amount", value: 0 }]);
    dashly.identify([{ op: "add", key: "$revenue", value: localStorage['lastAmount'] }]);
    dashly.identify([{ op: "add", key: "$orders_count", value: 1 }]);
    dashly.identify([{ op: "update_or_create", key: "$last_payment", value: localStorage['lastAmount'] }]);
    localStorage.removeItem('lastAmount');
Powered by Dashly