How to install Custobar.js tracking script with Google Tag Manager?

Do you need to get started with tracking your customers' activity on your site? And you use Google Tag Manager? Look no further, here's how you install the tracking script with GTM.

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.

Let's get started

You must push standard data layer events from your ecommerce solution. Most ecommerce plugins do that automatically.

If your solution is custom, please find Google’s documentation here.

You will need to know the sequence of the events coming through as we need to make sure that the data layer ecommerce object has been created before we fire our tags. You can do that in Google Tag Manager’s preview mode.

You can go and create an ecommerce event on you website and see the sequence in Tag Assistant window. In our case the view_item event will populate the data layer and we can just fire our tags after that. We will use Window Loaded event here. If you have a cookie consent solution in place, you should most probably use an event when the consent is updated, but basically any event after the ecommerce event will do.

Next you need to create a data layer variable in Google Tag Manager. This variable will pull product ID from data layer.

In Google Tag Manager navigate to Variables.

Scroll down and create a new user-defined variable.

Give your new variable a descriptive name and click Choose variable type to begin setup.

Choose Data Layer Variable.

Next you need to type the data layer variable name. In a standard setup it is ecommerce.detail.products.0.id.

Click Save and you’re done with this step.

Next you will create Custobar base tag. First go to Custobar App Settings and create your own tracking script by clicking Custobar.js tracking script. It will look something like this.

Copy the script and go back to Google Tag Manager.

Create a new Tag.

Once again, give your new tag a descriptive name and click Choose a tag type to begin setup.

Scroll down and choose Custom HTML.

Paste the script into the HTML window.

Next you will need to replace YOUR_PRODUCT_ID with the variable you created earlier. Justgo and delete the text and insert two curly brackets as shown below.

Once you have done that a pick box will show. Choose the variable you created earlier and it will be added to the script automatically.

Scroll down and Click Choose a trigger to make this tag fire.

Click + sign to create a new trigger.

Name your trigger and click Choose a trigger type to begin setup.

Choose your trigger type. You can use Custom Events or anything that suits your case. We will use Window Loaded event here as spoken earlier.

Then just save your trigger and tag. Publish your container and your base setup is complete.

Next, let's see how to track adds to basket in Custobar using GTM.