Custobar.js tracking script

To track your customers' browsing activity on your site, you need to add a generated JavaScript snippet to your site either by hand or with a tagging tool, such as Google Tag Manager. You can get the script from the Settings -> Tracking Script view in Custobar.

The tracking script can be configured to include goals, such as landing pages, which automatically generate events to Custobar and define slots for banners managed by Custobar.

Manual installation

Custobar tracking script should be implemented within the header code of every page on your site. The tag loads asynchronously so it won't interfere with the page loading time or the user experience.

You can find your tracking script at Custobar settings page "Web Tracking Script".

Installation with Google Tag Manager (GTM)

How to install Custobar.js with GTM

Additional events

The script can be used to generate additional events for Customer, by calling window.cstbr.push method as shown below. The method takes one argument, an object, that must contain key type in minimum.

window.cstbr.push({
  type: 'BASKET_ADD',
  product_id: '15595958'
});

To allow the events come through to Custobar, the event types need to be added Settings -> Tracking Script.

Custom event parameters

You may define custom parameters to an event. Say for example, you want to add information about using what user interface feature was used to add the product into the basket, you'd might want to send it as follows:

window.cstbr.push({
  type: 'BASKET_ADD',
  product_id: '15595958',
  acme__basket_feature: 'top-products'  // NOTE! Replace the "acme" with your company prefix
});

An example: Tracking use of product rating feature

Suppose that you are working for company ACME and want to collect product ratings to see how the products are ranked and to follow who are satisfied and who dissatisfied to products. You may create a custom event which you trigger based on customer actions.

The custom event needs to be registered with Custobar first, in the tracking settings and after that you may simply call cstbr.push() function with an object containing the type of the event, the rated product id and the rating given as shown below.

HTML

<div>
  <p>How do you like your new product?</p>

  <ul>
    <li onclick="acmeRateProduct(PRODUCT_ID, 5)">It's top notch!</li>
    <li onclick="acmeRateProduct(PRODUCT_ID, 4)">I'm liking it</li>
    <li onclick="acmeRateProduct(PRODUCT_ID, 3)">It's okay</li>
    <li onclick="acmeRateProduct(PRODUCT_ID, 2)">I'm a bit iffy</li>
    <li onclick="acmeRateProduct(PRODUCT_ID, 1)">I don't like it</li>
  </ul>
</div>

JavaScript

function acmeRateProduct(productId, rating) {
  var storageKey = 'rated-product-' + productId;

  if (window.localStorage.getItem(storageKey)) {
    alert('You have already rated this product!');
    return;
  }

  window.localStorage.setItem(storageKey, rating);

  window.cstbr.push({
    type: 'ACME__PRODUCT_RATING',  // Replace "ACME" with your company prefix
    product_id: productId,
    acme__product_rating: rating   // Replace "acme" with your company prefix
  });

  alert('Thank You for voicing your opinion!');
}

Debugging

To see debugging messages for Custobar.js, you may set the following variable to window object.

With that setting the script starts to write status messages / errors to the browser console. Those might be helpful when trying to debug if any problems occur.

window.ENV = 'development';