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.
Note! When using the Custobar tracking script, the e-commerce or website must obtain cookie consent from their users. It's a mandatory step that needs to be completed before the tracking script is loaded onto the users' devices. Custobar stores customer identification to a cookie named "cb" for 365 days.
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".
How to install Custobar.js with GTM
The script can be used to generate additional events for Customer, by calling window.cstbr.push method as shown below. This way you can send BASKET_ADD events to Custobar that you can use in abandoned cart automations for example.
window.cstbr.push({
type: 'BASKET_ADD',
product_id: 'ABC123',
product_ids: ["ABC123"]});
This means that whenever a customer clicks on the "Add to cart" button in the webshop, the script fires the BASKET_ADD event to Custobar and this event should always contain all of the product ids found in the basket and send them in the product_ids field.
The logic would work like this;
window.cstbr.push({
"type": "BASKET_ADD",
"product_id": "ABC123",
"product_ids": ["ABC123"]});
window.cstbr.push({
"type": "BASKET_ADD",
"product_id": "DEF456",
"product_ids": ["ABC123", "DEF456"]});
Once the events are flowing in, Custobar has a default module that can be used in for ex. abandoned cart automations. This module always uses the latest BASKET_ADD event to list the products in the email which means that the customer gets exactly the correct products listed in the reminder.
This module can be found under Settings -> Content templates -> Transactional modules
You may define custom parameters to an event. Say for example, you want to add information on if the product added was on a sale or not. You can do it easily by sending in a custom field like this where example would be replaced by your Custobar company prefix.
window.cstbr.push({
type: 'BASKET_ADD',
product_id: '15595958',
example__product_on_sale: 'true'
});
Suppose that you want to collect product ratings to see how the products are ranked and to follow who are satisfied and who are dissatisfied with your products. You may create a custom event which you trigger based on customer actions.
The only thing that you need to do once the script is installed is to simply call cstbr.push() function with an object containing the type of the event, the rated product id and the rating given.
Below is a fully functional example on how to do that
HTML
<div>
<p>How do you like your new product?</p>
<ul>
<li onclick="RateProduct(PRODUCT_ID, 5)">It's top notch!</li>
<li onclick="RateProduct(PRODUCT_ID, 4)">I'm liking it</li>
<li onclick="RateProduct(PRODUCT_ID, 3)">It's okay</li>
<li onclick="RateProduct(PRODUCT_ID, 2)">I'm a bit iffy</li>
<li onclick="RateProduct(PRODUCT_ID, 1)">I don't like it</li>
</ul>
</div>
JavaScript
function RateProduct(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: 'PRODUCT_RATING',
product_id: productId,
example__product_rating: rating // Replace "example" with your company prefix
});
alert('Thank You for voicing your opinion!');
}
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';