Analytics

As an online retailer you might be running ecommerce analytics on your web site to track traveler conversions. Blend Widgets implements an analytics module to help you track the cart, checkout, and purchase events on your site. The analytics module is implemented as an extensible plugin system, so new analytics providers can be added easily. Multiple analytics providers can be configured at the same time, and the events will be sent to all of them.

We track the following events:

Add to cart
Remove from cart
Start checkout
Payment info added
Book

Configuration

To configure the analytics module use the global configuration object:

{
  analytics: [
    {
      type: 'google-tag-manager',
      enabled: true,
    },
    {
      type: 'google-analytics-4',
      enabled: true,
    },
    {
      type: 'console-reporter',
      enabled: true,
    },
  ];
}

Google Analytics 4

Google Analytics 4 is the most popular analytics provider, and is supported out of the box. It is also easy to get started with. Read more in Google’s documentation on how to get started.

The Blend Widgets expect the Google Analytics 4 script to be loaded on your pages, and will use the global gtag function to send events. You can find installation details in your Google Analytics settings.

To configure Google Analytics 4, add the following to the analytics array in the global configuration object:

{
  analytics: [
    {
      type: 'google-analytics-4',
      enabled: true,
    },
  ];
}

Google Tag Manager

Google Tag Manager (GTM) is a powerful tool that offers advanced capabilities compared to Google Analytics. Instead of sending data directly to Google products like Google Analytics 4 and Google Ads, you can use Google Tag Manager to manage and send data to various third-party providers such as Meta Pixel, Affiliate vendors, and more. This flexibility allows you to track and analyze important events on your website, such as items added to the cart and total purchase amounts.

For comprehensive details on setting up Google Tag Manager, please refer to Google’s official documentation

The Blend Widgets require the Google Tag Manager script to be loaded on your web pages. They utilize the global data_layer function to send events. Detailed installation instructions can be found in your Google Tag Manager dashboard.

To configure Google Tag Manager for use with Blend Widgets, add the following code snippet to the analytics array in the global configuration object:

{
  analytics: [
    {
      type: 'google-tag-manager',
      enabled: true,
    },
  ];
}

Setup assistance

Google Tag Manager is a broad domain that undergoes continuous changes in data management practices. To help you get started, we’ve prepared a sample container that you can import into your Google Tag Manager. Please be cautious not to overwrite your existing tags when importing this container. The import process will provide details on the modifications that will be made.

We suggest to only use this sample container as a reference, we recommend thoroughly reviewing Google Tag Manager’s documentation to gain a deeper understanding of its capabilities and configurations.

It can be downloaded here: GTM example container

The container contains the following:

Constant Variable: UA4 Gtag

Reference to your Google Analytics ID, also known as g-tag. This one must be overwritten, and is used in all tags to reference to your GA4.

Tag: Google Analytics: GA4 Event

Sends events to your Google Analytics, with a trigger on all e-commerce events.

Tag: Tag Configuration

This tag triggers on all pages and establishes the connection between your GA4 property and Google Tag Manager.

Trigger: Ecommerce triggers

This trigger is designed to capture all e-commerce events on your website.

Event mapping

The following table shows the events that are sent to Google Analytics 4:

Blend	Google Analytics 4	Description
`addToCart`	`add_to_cart`	Sent when a product is added to the cart
`removeFromCart`	`remove_from_cart`	Sent when a product is removed from the cart
`startCheckout`	`begin_checkout`	Sent when the checkout process starts
`paymentInfoAdded`	`add_payment_info`	Sent when payment information is added to the booking
`book`	`purchase`	Sent when the booking is completed

Console reporter

The console reporter is a simple analytics provider that logs the events to the browser console. This is useful for debugging purposes and can be used in combination with other analytics providers.

To configure the console reporter, add the following to the analytics array in the global configuration object:

{
  analytics: [
    {
      type: 'console-reporter',
      enabled: true,
    },
  ];
}

New providers

If you use a provider not listed here a new provider must be implemented. We do not yet support implementing custom providers, but we can discuss implementing new providers for you. If demand for custom providers is high we will consider implementing a plugin system for user defined plugins.