Introduction to Tracking

How Distil tracking works, and the minimum install: two scripts on every page.

Quick start

This section gets basic tracking running: page views, where your visitors came from, and the information Distil needs to recognise returning visitors. Booking tracking builds on this, and is covered in its own sections (see Quick start → Next: booking tracking).

You'll need:

• your Distil account key. In Distil, go to Integrations → Connections → Distil Tracking → Install Snippet, or ask Distil;
• access to edit your website's code, or your site's Google Tag Manager (GTM) container;
• about ten minutes.

Which install method? If your site already uses Google Tag Manager, use it: it's easier to manage and to change later. To check, right-click your site's home page, choose View page source, and search for googletagmanager.com/gtm.js. If it isn't there, install directly in the site's code.

The two scripts

Distil uses two small scripts, and both go on every page of your website. If your site has a cookie banner, the tracking script must also wait for consent: the install sections show how.

Starter script:

<script src="https://engagement.distil.ai/src/distil-shim-latest.min.js" async></script>

Tracking script:

<script>
(function(){var distil=window.distil=window.distil||[];if(distil.initialize)return;
if(distil.invoked){if(window.console&&console.error){
console.error("Distil snippet included twice.")}return}distil.invoked=true;
distil.methods=["identifyCustomer","trackEvent","trackOrder","trackContent","trackProduct",
"trackReservation","trackPage","trackPageView","getAnonymousId"];
distil.factory=function(method){return function(){
var args=Array.prototype.slice.call(arguments);args.unshift(method);distil.push(args);
return distil}};for(var i=0;i<distil.methods.length;i++){var key=distil.methods[i];
distil[key]=distil.factory(key)}distil.load=function(key,options){
var script=document.createElement("script");script.type="text/javascript";script.async=true;
script.src="https://engagement.distil.ai/src/distil-latest.min.js";
var first=document.getElementsByTagName("script")[0];
first.parentNode.insertBefore(script,first);distil._loadOptions=options||{};
distil._loadOptions.distilAccountId=key;distil.trackPage()};
distil.load("YOUR_ACCOUNT_KEY");
})();
</script>

Copy both scripts exactly as they are, replacing YOUR_ACCOUNT_KEY with your account key. The only part that ever changes is the distil.load(...) line near the end. The booking sections tell you when to add options to it, and Reference → Load options lists the ones this handbook uses.

Install them

• With Google Tag Manager: follow Installing with Google Tag Manager. It takes two tags, and one or two triggers.
• Directly in your website's code: follow Installing directly on your website.

If your site has a cookie banner, the tracking script must wait for consent, and getting this wrong can stop tracking without any visible error. With Google Tag Manager, read Cookie consent before you publish. For a direct install, read Installing directly on your website → If your site has a cookie banner.

Check it's working

1. Open your website in Google Chrome, and accept the cookie banner if there is one.
2. Open the developer tools (F12 on Windows, Cmd+Option+I on Mac), go to the Network tab, and type tf.distil.ai in the filter box.
3. Browse to another page. A request to tf.distil.ai should appear for each page you visit. Click one: its Payload should contain your account key.

Once the requests appear, you can also type window.distil.VERSION in the Console tab: it shows the version of the tracker that's running.

Next: booking tracking

If your site takes restaurant bookings, read the section for your booking system:

How Distil tracking works

You don't need this section to install tracking, but it explains the reasoning behind every instruction in this handbook.

What Distil records

Like Google Analytics or Segment, Distil gives each visitor an anonymous visitor ID, stored in their browser, and records what they do against it: the pages they view, where they came from, and the bookings they make. When a booking is linked to the same visitor ID as the visit that led to it, Distil can tell you which page, campaign or channel brought in the booking.

That link between the visit and the booking is the point of almost every rule in this handbook. A booking recorded under a different visitor ID still counts as a booking, but it can't be credited to the marketing that produced it.

Why two scripts

Most sites ask visitors for cookie consent before analytics can run. By the time a visitor clicks Accept, they may have moved past the page they landed on, and the information about where they came from (a Google search, an ad, an email link) is lost.

• The starter script runs immediately, before the cookie banner, and saves only the landing page, the referrer, the page title and the time, in the browser's session storage. It creates no visitor ID and sends no tracking data.
• The tracking script runs after consent. It creates the visitor ID, reads the starter script's note, and sends the first page view with the visitor's real source.

Whether to run the starter script before consent is your decision under your own privacy policy.

How the tracking script loads

The tracking script you paste is a small loader. It does three things:

1. It sets up window.distil straight away, so your own code can call Distil's functions (for example trackReservation) before the tracker has finished loading. Those calls wait in a queue, and are sent once it has loaded.
2. It loads the tracker itself from https://engagement.distil.ai/src/distil-latest.min.js. This file is always the latest version, so tracker updates reach your site without you changing anything.
3. It records the page view.

If the loader runs twice on the same page, the second copy does nothing, and may show "Distil snippet included twice." in the browser console. This is harmless.

Where the data goes

The tracker sends events to tf.distil.ai, Distil's collection endpoint. Every event carries your account key, which is how Distil knows the data is yours.