Skip to main content

Tracking

The booking widget can be configured with automatic tracking for Google Tag Manager and/or Meta pixel. You can also implement the events to customize the tracking.

Automatic tracking​

If the booking widget identifies a GTM tag or Meta pixel on the page where it is added it will automatically send events on navigate and completed booking. For each navigation in the booking flow, a PageView event will be sent, and when a booking is completed a Purchase event will be sent.

note

You can use the enableTracking parameter to control the automatic tracking. For more information, see the Parameters section.

Google Tag Manager​

Events are pushed to the existing dataLayer. For more information on the implementation, please refer to the Google Developer documentation.

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

// Purchase event
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, please refer to the Meta Conversion Tracking documentation.

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

// Purchase event
fbq('track', 'Purchase', {
  content_name: "Service 1, Service 2",
  value: 500,
  currency: "SEK"
});

Custom events​

If the automatic tracking is not sufficient, you can implement the following events to run custom tracking or other code. Events can be subscribed in the widget code in the same way as adding parameters, using the cbk(key, value) method.

onNavigate event​

This event is triggered when a navigation is made, either by user interaction or by an automatic event. This also represents a change in the hash 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. If this parameter is set, the specified method will be run with the booking properties as the 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: "7DUdvNGJ5LXQK83UlWTJ1O",
  price: 500,
  resource: "Resource Name",
  services: ["Service 1", "Service 2"],
  time: "09:00"
}
note

A time slot is reserved when user has selected a time and entered their customer details. If the booking is not completed within 5 minutes, the time slot will be released.

onCompleted event​

This event is triggered when a booking is completed. If this parameter is set, the specified method will be run with the booking properties as the 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: "7DUdvNGJ5LXQK83UlWTJ1O",
  price: 500,
  resource: "Resource Name",
  services: ["Service 1", "Service 2"],
  time: "09:00"
}