Analytics module

The Analytics module responds to events generated by the Formitable booking widget. Connecting the module to Facebook or Google provides better insight into how the widget is used by your website visitors.

Introduction

The Analytics module is an add-on that you can load when embedding the Formitable Widget. This module responds to the events generated by the widget on your website. For example: page views, Facebook pixel events and Google eCommerce events are automatically tracked in the accounts that are already installed on your website.

If this module is not sufficient for your needs, our widget events give you complete freedom to do your own implementation. At the end of this document you will find some examples on how to do this.

Installation

When you generate the embed script for your website on the Widget API page, the Analytics module is turned on by default. You can recognize this by the following piece of code in the callback of the Formitable SDK script: FT.load('Analytics'); By removing or adding this code you can switch the module off or on.

Extra settings

When loading the module you can specify the following additional settings (see example at the bottom of this section)

sendPageViews: boolean
The module tracks page views based on actions of your guests in the widget. For example /ft/widget/success for a successful reservation. With this setting you can turn this on or off. By default this setting is on.

disableFacebookTracking: boolean
Disable the default built-in Facebook Pixel tracking in the Analytics Module. By default this setting is off.

disableGoogleTracking: boolean
Disable the default built-in Google Analytics tracking in the Analytics Module. By default this setting is off.

conversion: object
By default, the price paid in the widget for the product is used as conversion value. A reservation without payment is therefore set at conversion value 0. You can override these values per product by adding a "conversion" object to the settings object. For each product (id: string) you can set the conversion value (value: decimal). The object with ID "1" is used for reservations without a ticket.

<script>
(function(d, s, id, h) {
  var ftjs = d.getElementsByTagName(s)[0];
  if (d.getElementById(id)) return;
  var js = d.createElement(s);
  js.id = id;
  js.src = "https://cdn.formitable.com/sdk/v1/ft.sdk.min.js";
  h && (js.onload = h);
  ftjs.parentNode.insertBefore(js, ftjs);
}(document, 'script', 'formitable-sdk', function() {
  FT.load('Analytics', {
    'sendPageViews': false,
    'disableFacebookTracking': false,
    'disableGoogleTracking': false,
    'conversion': {
      '1': {
        value: 60
      },
      '23a89154': {
        value: 11.25
      },
      '499bde6b': {
        value: 112.50
      }
    }
  });
}));
</script>

If a Facebook pixel is installed on your website, events are automatically tracked. You can find an overview of these activities in your Facebook Business Manager. You can also test the operation of your Pixel here by going to Event testing and making a reservation.

The following events will be tracked:

ContentView
When opening the ticket view in the widget

Params:

content_type, content_ids, content_name

AddToCart
When navigating to checkout with a ticket selected

Params:

id, name, price, quantity, category

InitiateCheckout
Always called when navigating to checkout

Params:

-

Purchase
When a reservation or order is successfully finished

Params:

contents, content_type, value, currency

The functioning of the Analytics module for Google Analytics depends on the implementation used on your website. The following three versions are supported by Formitable:

1. analytics.js (GA)
2. gtag.js (GTAG)
3. Google Tag Manager (GTM)

For GA and GTAG, all functionalities work out-of-the-box. GTAG is the current implementation of Google Analytics and is recommended by us because everything works instantly. You can find the script for your website in Google Analytics in Admin › Tracking Info › Tracking Code

With Google Tag Manager you have more options and you can decide what is sent to Analytics, but it is necessary that you create Tags and Triggers for all the events yourself.

To use the e-commerce features correctly, you first need to check the following settings in Google Analytics (for all implementations):

1. Go to E-commerce settings in Admin › E-commerce settings
2. Enable E-commerce
3. Enable Enhanced E-commerce Reporting
4. Go to View settings
5. Set currency to Euro (EUR)

Pageviews

When sendPageViews is enabled, the following url’s will be tracked for GA and GTAG:

/ft/widget/ticket/{ticketUid}

/ft/widget/search

/ft/widget/finish

/ft/widget/success

/ft/widget/checkout

/ft/widget/option

/ft/widget/redeem

/ft/widget/shop

For GTM the following event will be sent to the dataLayer:

event:	ft.pageview
virtualPageURL:	/ft/widget/… (as above)
virtualPageTitle:	title
productType:	"ticket", "takeaway" or "voucher"

E-commerce

With e-commerce you can track and analyze the buying and shopping behavior of your guests in Google Analytics. You can link Google Ads to see which transactions come from campaigns (https://support.google.com/google-ads/answer/2375435?visit_id=636917887120863134-2108996402&rd=1)

The events below are automatically tracked for GA and GTAG implementations. The settings for GTM are specified separately.

Product view
When opening the ticket view in the widget

Add to cart
When navigating to checkout with a ticket selected

Checkout
When navigating to checkout

Purchase
When a reservation or order is successfully finished

Google Tag Manager (GTM) settings:

The following general setup is required for e-commerce tracking in Google Tag Manager (GTM):

1. Log into Google Tag Manager
2. Go to the Variables menu item on the left
3. If you do not have a User-Defined Variable for your Google Analytics settings follow these steps:
   1. Create a new User-Defined Variable
   2. Choose variable type: Utilities -> Google Analytics settings
   3. Enter your GA tracking ID (how to find it.)
   4. Save this variable and continue with the steps below
4. Open Google Analytics settings variable
5. Go to More settings › E-commerce
6. Tick Enable Enhanced Ecommerce Features
7. Tick Enable Use data layer
8. Save the variable

Setting up GTM Tags and Triggers:

As stated above there is 4 available events you can define tags/triggers for. Use the examples and details below to define each tag and accompanying trigger.

Creating the Tags: Creating the Trigger:

Because the Formitable widget is fully integrated into your website, the options are unlimited. Events on your website are fired for all actions visitors do in the widget. This allows you to easily track data, but also redirect users to a thank you page, for example. For a complete overview of what is possible you can study the Widget API documentation .

Redirect to Thank you page
If you want to send your visitors to a thank you page after they complete a reservation, you can use the ft-widget-ordered event.

<script>
window.addEventListener('ft-widget-ordered', function(e) {
  FT.widgets.get().close(); // close the widget
  window.location.href = '/en/thankyou/'; // redirect to thank you page
});
</script>

Show a popup when selecting a specific ticket
You can show your website visitors a popup if they select a specific ticket.

<script>
window.addEventListener('ft-widget-navigated', function(event) {
  if(event.detail.page == 'checkout') {
    // at this time there’s always 1 product selected
    var ticket = event.detail.products[0];
    if(ticket && ticket.uid == 'a1b2c3d4') {
      confirm('Please note that our boat leaves at 7PM exactly. We cannot refund your ticket when you show up late.');
    }
  }
});
</script>

Measure conversion in Google Ads
In this example we combine registering a conversion in Google Ads with redirecting to a thank you page.

<script>
 window.addEventListener('ft-widget-ordered', function(e) {
  FT.widgets.get().close();
  gtag('event', 'conversion', {
    'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
    'value': event.detail.order.totalAmount,
    'currency': 'EUR',
    'event_callback': function() {
      window.location.href = '/en/thankyou/';
    }
  });
});
</script>