Tracking

The booking widget can send purchases to Google Tag Manager, Meta pixel, TikTok pixel and the OpenAI (ChatGPT Ads) pixel by itself. It also sends page views to all of them except the OpenAI pixel. You can also subscribe to the widget's events and do the tracking yourself.

Automatic tracking

If the booking widget finds a GTM tag, a Meta pixel, a TikTok pixel or an OpenAI pixel on its page, it sends:

a page view, on every navigation in the booking flow (not to the OpenAI pixel)
a purchase, when a booking is completed

The widget doesn't load any of these scripts itself. Add the provider's own snippet to your page, and the widget uses it when it is there.

Each purchase event carries the booking reference (bookingRef). GTM gets it as transaction_id, Meta as eventID, and TikTok and OpenAI as event_id. If you also send the same purchase from your server, send the same booking reference as its ID there, so the provider counts the purchase once. The server-side field can have another name: Meta's Conversions API calls it event_id.

Google Tag Manager

Events are pushed to the existing dataLayer. Before the purchase event, the widget clears the previous ecommerce object, as Google recommends. For more information on the implementation, see the Google Developer documentation.

// Page view event
dataLayer.push({ event: 'page_view' });

// Purchase event
dataLayer.push({ ecommerce: null });
dataLayer.push({
  event: 'purchase',
  ecommerce: {
    items: [{
        item_id: "qAxDM5rz",
        item_name: "Service 1, Service 2",
        price: 500
    }],
    transaction_id: "qAxDM5rz",
    affiliation: "Your Company AB",
    value: 500,
    currency: "SEK"
  }
});

Meta pixel

The events are added to the existing fbq object. For more information on the implementation, see the Meta Conversion Tracking documentation.

// Page view event
fbq('track', 'PageView');

// Purchase event
fbq('track', 'Purchase', {
  content_ids: ["qAxDM5rz"],
  content_name: "Service 1, Service 2",
  content_type: "product",
  value: 500,
  currency: "SEK"
}, { eventID: "qAxDM5rz" });

TikTok pixel

The events are sent with the existing ttq object. For more information on the events and their parameters, see TikTok's Standard Events and Parameters.

// Page view event
ttq.page();

// Purchase event
ttq.track('CompletePayment', {
  contents: [{
    content_id: "qAxDM5rz",
    content_name: "Service 1, Service 2",
    content_type: "product",
    price: 500,
    quantity: 1
  }],
  value: 500,
  currency: "SEK"
}, { event_id: "qAxDM5rz" });

OpenAI pixel

The events are sent with the existing oaiq function of the ChatGPT Ads measurement pixel. The widget sends only the purchase to this pixel, not page views. The OpenAI pixel takes the amount in minor units, so 500 SEK is sent as 50000. For more information on the implementation, see the OpenAI Measurement Pixel documentation.

// Purchase event
oaiq('measure', 'order_created', {
  type: "contents",
  amount: 50000,
  currency: "SEK",
  contents: [{
    id: "qAxDM5rz",
    name: "Service 1, Service 2",
    content_type: "product",
    quantity: 1
  }]
}, { event_id: "qAxDM5rz" });

Custom events

If the automatic tracking is not sufficient, you can subscribe to the following events to run custom tracking or other code. You subscribe to an event in the widget code in the same way as you add a parameter, with the cbk(key, value) method.

onNavigate event

The widget triggers this event each time it moves from one step to another. It does not matter whether the user moved or the widget moved by itself. Each navigation also changes the hash part of the page's URL.

cbk("onNavigate", function(navigation) {
  console.log("Navigation was made", navigation);
});

The navigation argument will be an object with the following structure.

{
  direction: "forward",
  from: "service",
  to: "calendar"
}

onReserved event

This event is triggered when a time slot is reserved. Your function is called with the booking as its only argument.

cbk("onReserved", function(booking) {
  console.log("Booking reserved", booking);
});

The booking argument will be an object with the following structure.

{
  bookingRef: "qAxDM5rz",
  customer: {
    name: "Full Name",
    phone: "+46812345678",
    email: "email@gmail.com"
  },
  date: "2021-04-30",
  length: 60,
  location: "Your Company AB",
  locationId: "1uAKYvE7mWcnxxdMuixis",
  price: 500,
  resource: "Resource Name",
  services: ["Service 1", "Service 2"],
  time: "09:00"
}

onCompleted event

This event is triggered when a booking is completed. Your function is called with the booking as its only argument.

cbk("onCompleted", function(booking) {
  console.log("Booking completed", booking);
});

The booking argument will be an object with the following structure.

{
  bookingRef: "qAxDM5rz",
  customer: {
    name: "Full Name",
    phone: "+46812345678",
    email: "email@gmail.com"
  },
  date: "2021-04-30",
  length: 60,
  location: "Your Company AB",
  locationId: "1uAKYvE7mWcnxxdMuixis",
  price: 500,
  resource: "Resource Name",
  services: ["Service 1", "Service 2"],
  time: "09:00"
}