Using Google Tag Manager with Tito Widget V2

Setting up Google Tag Manager with Tito Widget V2 is pretty simple, but a little bit fiddly.

Firstly, you need to be using Widget V2 with the Google Tag Manager Plugin enabled. There are details in our help docs about various strategies for integrating Google Analytics, but for Google Tag Manager, you need the following pre-requisites:

1. Setup and install Google Tag Manager on your site
2.Include the gtm plugin when loading Tito Widget V2

To load the GTM plugin with the widget, you can include our JS as follows:

<script src='https://js.tito.io/v2/with/gtm' async></script>

That should be everything you need to do on your site.

In Google Tag Manager, you want to set up two triggers and two tags:

The triggers are as follows:

• tito:registration:started for when someone opens the widget

• tito:registration:finished for when someone completes a purchase

Each even then has a corresponding tag, both setup identically, one per trigger. The settings are below. Remember to substitute in your own Google Analytics UA Tracking ID.

• Track Type should be set to Event

• Category is Ecommerce

• Action is Checkout for tito:registration:started and Purchase for tito:registration:finished

• In Google Analytics Settings set Enable over-riding settings in this tag

• Set your tracking ID to your UA code

• In the Ecommerce settings, drill down to Enable enhanced eCommerce features and set that to true as well as setting Use Data Layer

Here is a link to the source code of our plugin that you can use as a basis for your own integration if you wish to customise it.