Tracking: Sending your own events

Optional: identifying customers and recording other actions.

Beyond page views and bookings, your site can send Distil other information. These calls can be made from your site's code, or from a GTM Custom HTML tag.

Identifying a customer

When a visitor signs in or gives their details (for example on a newsletter form), link the visit to them:

distil.identifyCustomer({
  CustomerId: '12345',                     /* string or number; one of CustomerId/EmailAddress required */
  EmailAddress: 'customer@example.com',    /* string */
  GDPRStatus: {                            /* required */
    MarketingSubscribed: MARKETING_CONSENT /* required: replace with true or false, the customer's real choice */
  }
});

It needs:

• a CustomerId or an EmailAddress (or both), and
• GDPRStatus with MarketingSubscribed: true if the customer has agreed to marketing, false if not.

Single-page sites

On most sites, every page is a fresh page load, and the tracking script records each page view automatically. On a single-page site (built with React, Vue, Angular and similar), the page doesn't reload when the visitor moves around, so only the first page view is recorded automatically.

Record the others by calling trackPage each time the page changes:

distil.trackPage();

If the browser's address doesn't change when the page does, tell Distil which page the visitor is on:

distil.trackPage({ pageUrl: '/menus/dinner' });

• A path is enough: '/menus/dinner' and 'menus/dinner' both record that page on the site the visitor is on. A full address is only used if it matches the visitor's current site exactly (www. included).
• The current query string is kept, so UTM tags in the browser's address are still recorded. Any query string you add in pageUrl is added to it, and replaces a parameter with the same name.
• It must be your own domain. A pageUrl on a different domain is ignored, and the browser's real address is recorded instead.

The other calls in this section accept the same option as their last argument, for example distil.trackEvent('click', 'newsletter-signup', {}, null, { pageUrl: '/newsletter' }).

Recording another action

distil.trackEvent('click', 'newsletter-signup', {
  campaign: 'summer-promo'
});

The first two values name the event. The object holds any details you want to attach.