Important: The feature is only available on Planner and Checkout pages. There is no support on Discovery Overview and Detail pages.

 

Overview

This article will help you understand the use cases in which the dataLayer provided by TripBuilder can be integrated with your Google Analytics setup and how to do it.

Often, marketing departments have different requirements regarding what information to track. Furthermore, TripBuilder can be embedded in different ways. That’s why TripBuilder aims to power the customer to track the events and data needed, with the event data required by different departments, using a javascript that stores data like the number of PAX, itinerary/booking value, product name, among others, that you can later use in Google Analytics to segment and analyse your data. 

 

What will you need

To get the most out of the dataLayer, you need a Google Analytics 4 (GA) and a Google Tag Manager (GTM) account linked to TripBuilder:

1. Go to Settings.
2. Click on Distribution Channels.
3. Click on your TripBuilder ID.
4. Click on the tab 3rd-Party Integrations.
5. Navigate to the Header Begin field in the Script Inserts section

 

Please note: If you want to collect data from the dataLayer script on your Google Tag Manager container, please add the header script of GTM on the Header End field in the TripBuilder Settings instead of Header Begin, as recommended by Google.

 

 

You also need an extension for your browser to read the dataLayer easily. We recommend Datalayer Checker from sublimetrix.com.

Also, you need some basic knowledge of how these tools (GA and GTM) work together. We recommend you spend some time investigating and trying it out, but in a nutshell:

Google Tag Manager is the vessel that transports information from TripBuilder to your Google Analytics account. You have three main items on GTM:

• Tags: they identify a particular action, like a page view or a click. In the tag is the information that's sent to GA4.
• Triggers: as the name indicates, they trigger a tag to fire. They are set as rules. For example, a trigger of a pageview that contains /travel/routes would fire a view_item tag.
• Variables: variables can be used inside tags that send more information with that tag to GA4. 

We recommend reading the article (and creating along) How to Create a Basic Funnel Tracking using Google Analytics 4 and Tag Manager, which will give you a better understanding of how this works. In that article, we explain the basics: how to create the Tags and Triggers.

In this article, we approach Variables and how you can send additional data to Google Analytics using the dataLayer.

 

The TripBuilder dataLayer explained

TripBuilder uses a JavaScript array that temporarily stores the data information you need. Then, Google Tag Manager collects that data in the variables defined by you, allowing the “transfer” of that information to other tools:

<script>
window.dataLayer = window.dataLayer || []; 
dataLayer.push({  
   'nzTripBuilder': {   
      'templateRefId': 't1231231',  
      'totalPrice': {  
        'currency': 'EUR',  
        'amount': 2551.18 
    }  
  } 
});
</script>

The code that makes up this dataLayer is what all analytics tools access to get the data they need, and because each tool is accessing this same bit of code, we know that they’re all working with consistent data.

The functionality is simple; you have a key and a value. For example, for the key currency, it returns the value of GBP. Both keys and values are the data you will use. 

If you initiate an itinerary in TripBuilder, using a dataLayer check extension (or by inspecting the code), you will find the keys and values of the selected trip:

If you have a key returning a null value, there's no data about it yet. For example, we didn't add any flights for this itinerary yet, so the home departure/arrival airport is empty. 

You can easily send all this data alongside your events to Google Analytics 4 with Google Tag Manager. For example, if you have an event when a user begins the checkout, it might make sense to collect the value amount and pax.

 

Know more: You can send up to 25 additional parameters with each tag in GTM.

 

What does the dataLayer collect?

TripBuilder's dataLayer makes available the following data for your use:

• Company Reference ID
• Distribution Channel ID (useful for Companies with +1 DCs)
• Template Reference ID 
• Template Title
• Duration in Days (of the itinerary)
• Destination Country Code(s) 
• Start and End dates
• Number of PAX (divided by adults and children)
• Pricing (Amount and Currency)
• Promotional Codes (if applicable, the dataLayer collects the code)
• Home Departure/Arrival Airport(s)
• Destination Departure/Arrival Airport(s)
• User ID (anonymised alphanumeric code) 
• Itinerary Reference ID (serves as the Transaction ID for e-commerce events)

This information in the dataLayer is updated with every new page load. 

No sensitive data is ever made available at the dataLayer. We follow two main guiding points:

• Only expose known, visible, or retrievable data by the user of the page loaded.

• Never expose user-identifying data to the dataLayer.

 

Creating the Variables

First, you must create the dataLayer Variables (DLV) on Google Tag Manager. To do so, go to Google Tag Manager, click on Variables and below on User-Defined Variables, click on New:

Click on Variable Configuration and select Data Layer Variable:

Add the key of the dataLayer you're interested in collecting from the list of available data to the field Data Layer Variable Name.

Make sure you match precisely the key. We recommend you copy and paste this to avoid any errors. For example, if we want to collect the Start Date:

 

Please note: For customers with IBE/iframe using TripBuilder on their own website that already have a dataLayer to collect data from their own website, when creating the Data Layer Variable in GTM, please add nzTripBuilder. before the key you want to collect, as in the example below:

 

Remember to give your Variable an identifiable name in GTM to find it later. You can use any nomenclature you want. When done, click on Save:

Repeat this process for all the values you want to collect.

 

Adding the Variables to the Tags

Now that we have created the Variables, we can add them to the Tags to pass the information to Google Analytics. Each Variable needs to be manually entered in each Tag and depends heavily on your setup and what kind of information you want to pass in each event. For example, in this article, we set up five tags - five events that are pushed to GA - when a user does something we want to track:

• view_item_list: when a user sees the page Discovery Overview
• view_item: when a user sees Discovery Details
• select_item: when a user clicks on Start Planning
• begin_checkout: when a user sees the first Checkout Page
• purchase: when a user sees the confirmation page 

And we can add additional information to these tags using Variables. Let's see how. 

On Google Tag Manager, go to Tags and select one of the tags you already created. Open the Event Parameters tab and click on Add Row:

On Parameter Name, you should add a name you can later identify in Google Analytics. On Value, you should add the dataLayer Variable you just created. You can click on the Plus icon to add directly from a list:

You can add up to 25 different Parameters to be sent in each tag. 

Repeat this process for all the tags you want to add more information using Variables.

 

You should always debug when you finish and see if everything is set up correctly. To do so, click on Preview in Google Tag Manager in the top right corner:

Add your URL, and trigger any of the tags you added to the Variables to fire. Click on the Container message and then on Variables: 

Check if your Variables are filled correctly:

Now, click on the actual event on the Tags tab and see if the information is correctly passed to the tag as well:

Finally, go to your Google Analytics 4 account and on Admin, select Debug view. Click on one of the events sent by GTM, and see if the values of the dataLayer are being passed as well:

If everything is correct, that's it.

Click on Submit to save and publish your changes in GTM. Your tags are now sending this extra information to Google Analytics. You'll need to wait 48 hours until this information is usable and visible in Google Analytics reports and event pages.