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.

The script tracks browsing of product pages and aforementioned goals for those logged-in customers that do not have "Do Not Track" flag set in their browsers.

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)

Custobar.js uses GTM's Data Layer Variables for setting up.

In addition your GTM implementation that does not use data layer you have to introduce new JavaScript variable before the actual Tag Manager script.

1. Setup Data Layer

Add the GTM tag on your site as follows. Remember to replace the two placeholder values with your actual values.

<script>
  // NOTE! Replace the two values below with your actual data

  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'cb_customer_id': YOUR_CUSTOMER_ID,
    'cb_product_id': YOUR_PRODUCT_ID
  });
</script>
<!-- Google Tag Manager -->
<!-- ... -->
<!-- End Google Tag Manager -->

2. Insert Generated script to GTM

Add new "Custom HTML" tag using GTM, name it "Custobar Tracking" and add following to code snippet the "HTML" input. Following snippet is only an example, generate yours in Custobar application.

The {{ expression }}s are defined in the third step.

Note The following code is only an example, generate yours in the Custobar app settings.

<script>
  (function(c,u,s,t,o,b,a,r) {var e;c[o]=[];c[b] = a;e = u.createElement(s);r=u.getElementsByTagName(s)[0];
    e.async=1;e.src = t;r.parentNode.insertBefore(e, r);})(window, document, 'script',
    'SCRIPT_URL_HERE', 'cstbr', 'cstbrConfig', {'_companyToken':'123456qwerty',
    '_pages': [
      ['frontpage', '^'],
      ['testimonials', '^testimonials'],
      ['features','^features']
    ]});

  cstbrConfig.customerId = {{CustomerID}};
  cstbrConfig.productId = {{ProductID}}
</script>

3. Define Data Layer variables in GTM

CustobarID

  1. Click on Variables > User-Defined Variables > NEW
  2. Choose type: Data Layer Variable
  3. Set variable name to be CustomerID
  4. Set "Data Layer Variable Name" to cb_customer_id
  5. Select "Set Default Value", but leave its input empty

ProductID

  1. Click on Variables > User-Defined Variables > NEW
  2. Choose type: Data Layer Variable
  3. Set variable name to be CustomerID
  4. Set "Data Layer Variable Name" to cb_product_id
  5. Select "Set Default Value", but leave its input empty.

Now you're all set! Test that everything works as expected and click "Publish" from GTM. Then just kick back and enjoy the data flowing in!

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';