Installing the script on the hotel’s website
Since you have different GTM accounts linked to your booking engine and your website you’ll need to do the same process but in different accounts. This will ensure that the script is installed all the way to the booking confirmation page!
Follow the steps below or watch this short video:
- Create an excel file with the URL information of the homepage and the booking engine along with the scripts provided by The Hotels Network.
- Recognize the ways in which each property’s URLs differ from one another.
Example #1: This chain’s URLs have a unique identifying item in the URL.
WEBSITE URL (Homepage) | SCRIPT |
www.hoteltest.com/1248/ | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1100298&property_id=1026063&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
www.hoteltest.com/1249/ | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1098810&property_id=1024673&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
www.hoteltest.com/1250/ | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1099061&property_id=1024681&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
Since we need to find something unique in the hotels’ URLs to proceed, feel free to add this “ID” per hotel in a different row of the document where you’re compiling the information to refer to in later steps as seen below.
WEBSITE URL (Homepage) | URL "ID" | SCRIPT |
www.hoteltest.com/1248/ | 1248 | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1100298&property_id=1026063&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
www.hoteltest.com/1249/ | 1249 | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1098810&property_id=1024673&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
www.hoteltest.com/1250/ | 1250 | <script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1099061&property_id=1024681&account_key=439cc3b3e2cf9e7acfff137f831ec673' defer></script> |
- After completing this, log into your Google Tag Manager account.
- Click on the hyperlinked container name of the hotel’s website.
- Click on the ‘Variables’ section on the left hand side of the page.
- Create a new variable by clicking on the ‘New’ button.
- Give the variable a title (ex: THN Variable).
- Click on the box labelled ‘Variable Configuration’.
- Select the option of ‘RegEx Table’.
- Click on the ‘Input Variable’ dropdown menu and select the option of ‘Page URL’.
- Click on the ‘+Add Row’.
- Insert the unique URL element identified from the first hotel (in the example 1248) in the Pattern and the corresponding section of the script in between the quotation marks in the ‘Output’.
For the script below, only the section in RED should be added in the Output section of each row:
<script src='https://www.thehotelsnetwork.com/js/hotel_price_widget.js?hotel_id=1100298&property_id=1026063&account_key=439cc3b3e2cf9e7acfff137f831ec673' async></script>
- Add as many rows as unique URL items available under that GTM account with the corresponding modified script.
- Click on ‘Advanced Settings’ and untick the two last items on the list (“Full Matches Only” & “Enable Capture Groups and Replace Functionality”).
- Save the ‘Variable’ changes and close.
- Click on the ‘Tags’ section on the left hand side of the page.
- Create a new tag by clicking on the 'New' button.
- Give the tag a title (ex: THN Tag).
- Click on the box labelled ‘Tag Configuration’.
- Select the option Custom HTML.
- Add the previously deleted section of the script:
- <script src= async></script>
- Add two braces {{ in the same way as seen in the image below to uncover the list of variables available.
- Select the variable you’ve just created.
- Under the Tag Configuration settings, click on the section called 'Triggers'.
- Select the trigger “Window Loaded - All Pages”.
- Hit “Save” in the top right.
- Publish the changes you’ve made.
Each hotel script will now fire every time the identifying item for each hotel’s website is visible in the URL.
Installing the script on the booking engine
To get it up and running in your booking engine you’ll need to reach out to them and ask to have the scripts added in the HTMLs as described below.
Place the corresponding hotel script exactly as provided on the HTML before the end of the body tag </body>. It is important to do so on every page of the booking engine (all the way to the end of the booking process), in every language and on every device (desktop and mobile versions).
To make sure the script has been properly installed on all of the pages where it should be there’s further clarification below.
- The script must be installed on ALL desktop & mobile pages.
- Booking engine pages (Calendar page, Rooms & Rates, Registration page, Confirmation page).
- Each of the different languages of the website pages (for example: .com / .fr / .es / … ) in both mobile and desktop versions, so that the widgets display in all languages and devices.
Repeat this process for all hotel scripts provided.
Comments
0 comments
Please sign in to leave a comment.