Note, this is a guide to setting up Google Analytics 4 rather than Universal Analytics. Google is replacing Universal Analytics on the 1st of July 2023. To find out more, including how to make the switch, please see https://support.google.com/analytics/answer/10759417?hl=en
In order to track Tito visits and registrations/purchases in Google Analytics you will need to use the Tito widget on your own website rather than Tito's own event pages. This gives you much more autonomy and control of what you track, as well as removing the limitations and privacy implications of cross-site tracking.
Step 1. Install the Google JS Snippet on your site
The V2 widget plugins assume that you have loaded either gtag.js or Google Tag Manager. It's highly likely that you will already have those installed on your site. See Google’s standard documentation for how to install those.
Step 2. Enable Enhanced eCommerce tracking
See Google’s documentation for full info on how to enable enhanced eCommerce.
Alternatively you could take a look at this video on How to Setup Ecommerce Tracking For GA4 from Benjamin Mangold at Loves Data, which walks you through exactly how to set things up.
At the 4:05 mark he outlines two options for e-commerce tracking, he chooses the second option, we recommend going with that option too.
At the 5:44 mark he pastes in a list of e-commerce events, the Tito widget only sends two e-commerce events, so you only need to paste in begin_checkout|purchase here.
Step 3. Set up Google Analytics in Tito
You actually don't need to do anything in Tito to enable analytics but it is worth noting why. The analytics code runs on your website, listening for events that the Tito widget fires, so you don't need to switch anything on or provide Tito with any tracking IDs. All of the tracking code runs on your site, in the main content window.
Step 4. Load the GA4 widget plugin
To load the ga4 widget plugin, just pass it in to the URL when you are loading the widget:
<script src='https://js.tito.io/v2/with/ga4' async></script>
Remember, this plugin doesn't load Google Analytics for you, so you will still need to paste the Google-provided snippets to load those, as mentioned above in Step 1.
How do I know it's set up correctly?
If you go your Google Tag Manager account, click the Preview button, then insert the link to your page where you have the Tito widget installed, you can complete a registration and confirm the correct Tito e-commerce events are being recorded in your Google Analytics account i.e begin_checkout and purchase. You can see exactly how this is done at the 6:37 mark of the How to Setup Ecommerce Tracking for GA4 video mentioned above.
Note, if you want to test a paid order, it is probably best to enable the test_mode widget plugin on the widget temporarily before doing all this so you can test things without needing to process a real payment.
Can I build a customised integration with Google Analytics?
Yes, the ga4 widget plugin for Google Analytics is provided for convenience to get you up and running quickly but it is possible to build a customised integration using the widget's callbacks. The ga4 widget plugin uses these callbacks too, the plugin code can be seen here, it could be used as a starting point to build any custom integration you want.
Can I load the plugin asynchronously?
Yes, if you need to load the plugin asynchronously, you can do so with the following code:
// create a `tito` function if the Tito widget hasn't yet loaded
window.tito=window.tito||function(){(tito.q=tito.q||[]).push(arguments)}
// load the ga4 plugin asynchronously
tito("plugin.load","ga4",{})
Any other questions?
If you can’t see what you need, drop us a line at support@tito.io or chat with us in-app and we’ll get back to you as quickly as we can.