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.

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.


  1. <script>
  2. (function(d, s, id, h) {
  3. var ftjs = d.getElementsByTagName(s)[0];
  4. if (d.getElementById(id)) return;
  5. var js = d.createElement(s);
  6. js.id = id;
  7. js.src = "https://cdn.formitable.com/sdk/v1/ft.sdk.min.js";
  8. h && (js.onload = h);
  9. ftjs.parentNode.insertBefore(js, ftjs);
  10. }(document, 'script', 'formitable-sdk', function() {
  11. FT.load('Analytics', {
  12. 'sendPageViews': false,
  13. 'conversion': {
  14. '1': {
  15. value: 60
  16. },
  17. '23a89154': {
  18. value: 11.25
  19. },
  20. '499bde6b': {
  21. value: 112.50
  22. }
  23. }
  24. });
  25. }));
  26. </script>

Facebook Pixel

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

Google Analytics

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

E-commerce

Formitable Analytics Module

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 settings are required for e-commerce tracking in GTM

  1. Go to Variables
  2. Open Settings for Google Analytics
  3. Go to More settings › E-commerce
  4. Enable Enhanced Ecommerce Features
  5. Enable Use data layer

Setting up Tags and Triggers:

Product view

Event: ft.detail

Tag

Tagtype: Google Analytics - Universal Analytics
Track type: Event

Trigger

Type trigger: Custom Event
Event name: ft.detail
This trigger fires on: All custom events

Add to cart

Event: ft.addToCart

Tag

Tagtype: Google Analytics - Universal Analytics
Track type: Event

Trigger

Type trigger: Custom Event
Event name: ft.addToCart
This trigger fires on: All custom events

Checkout

Event: ft.checkout

Tag

Tagtype: Google Analytics - Universal Analytics
Track type: Event

Trigger

Type trigger: Custom Event
Event name: ft.checkout
This trigger fires on: All custom events

Purchase

Event: ft.purchase

Tag

Tagtype: Google Analytics - Universal Analytics
Track type: Event

Trigger

Type trigger: Custom Event
Event name: ft.purchase
This trigger fires on: All custom events

Examples

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.


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

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


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

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


  1. <script>
  2. window.addEventListener('ft-widget-ordered', function(e) {
  3. FT.widgets.get().close();
  4. gtag('event', 'conversion', {
  5. 'send_to': 'AW-123456789/AbC-D_efG-h12_34-567',
  6. 'value': event.detail.order.totalAmount,
  7. 'currency': 'EUR',
  8. 'event_callback': function() {
  9. window.location.href = '/en/thankyou/';
  10. }
  11. });
  12. });
  13. </script>

Ready for take-off?

We welcome all types of restaurants, from local favorites to Michelin starred restaurants and international, multi location hospitality groups. With our step-by-step switching service, our Customer Success team will have you up and running in no-time.

Learn more

Get started with Formitable, for free

Formitable is free to try, easy to set up, and works seamlessly together with your favorite hospitality tools.

check_circle No startup costs
accessibility_new Free trial
import_contacts Switching service