1. Tracking
  2. Google Analytics

How to add UTM tags to booking engine URLs (version 2)

To identify the traffic sources of the brand’s online presence in analytics, the UTM parameters must be added to URLs.

However, traditional URL Builders such as Campaign URL Builder (https://ga-dev-tools.google/campaign-url-builder/) or UTM Builder (https://utmbuilder.net/) are building URLs incorrectly for the v2 URLs in some instances.

As our v2 system is Single Page Application, the UTM tags must be added carefully to the URLs. Single Page Applications dynamically update the content displayed on the page using Query Parameters (the parameters that start with Question Mark (?)) and it is an essential component for the page's functionality.

image001

To maintain functionality and consistency while using UTM tags, we recommend the steps below to create your own URL with the UTM parameters:

1.       If the link that UTM parameters need to be added to doesn’t have any query parameters in it such as (?category=12 or ?code=DISCOUNT, or ?sort=5):

Add the UTM parameters manually at the end of the URL using a Question Mark (?) to bind the UTM parameters with the raw URL.

Example:

Let’s say the raw URL is /accommodation/packages (Packages Page): https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages

The URL would look like this after the UTM parameters added correctly to the URL: https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages?utm_source=TEST&utm_medium=TEST&utm_campaign=TEST

Interpretation:

      • Raw URL: https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages
      • Binding Symbol: ?
      • UTM Parameters: utm_source=TEST&utm_medium=TEST&utm_campaign=TEST

                            

2.       If the link that UTM parameters need to be added to has query parameters (the parameters that start with Question Mark (?)) in it such as (?category=12 or ?code=DISCOUNT, or ?sort=5):

Add the UTM parameters manually at the end of the URL using an Ampersand (&) to bind the UTM parameters with the raw URL.

Example:

Let’s say the raw URL is /accommodation/packages (Packages Page) and a filter is applied to it: https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages?package_feature=103

The URL would look like this after the UTM parameters are added correctly to the URL: https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages?package_feature=103&utm_source=TEST&utm_medium=TEST&utm_campaign=TEST

Interpretation:

      • Raw URL: https://the-affinity-hotel.host.demo.netaffinity.net/ibe/THEAFFINIBE05#!/accommodation/packages?package_feature=103
      • Binding Symbol: &
      • UTM Parameters: utm_source=TEST&utm_medium=TEST&utm_campaign=TEST