Google Tag Manager integration

 Google Tag Manager integration Table of Contents: 1. Introduction 2. Create a Tag Manager account and Container 3. Rules 3.1 Add the Rules that fire your Tags 3.1.1. “All pages” Rule 3.1.2. “Contacted” Rule 3.1.3. “Booked” Rule 3.1.4. “Book Now Clicked” Rule 3.2. The Rules tab 4. Macros 4.1. GuestCentric’s Booking Conversion Macros 4.1.1. List of Macros available to access in Google Tag Manager 4.1.2. Add the Macros you want to use 4.1.3. Macros tab 4.2. Macros for “Individual Tags” 5. Tags 5.1. Add and configure the Tags 5.1.1. Website Book Now link 5.1.2. Website Book Now link decorate 5.1.3. Analytics Website and Booking Engine Pageview 5.1.4. Analytics Booking Engine Goal 5.1.5. Analytics Booking Engine Ecommerce 5.1.6. Adwords Website Contact 5.1.7. Adwords Booking Engine Conversion 5.1.8. Custom URLs pixel Conversion 5.2. The Tags tab 6. Publish (a Version of your Container) 7. Setup Tag Manager in Guestcentric’s backoffice 8. Conclusion Last updated on 2014­10­08 by Guestcentric SA 1 1. Introduction “Google Tag Manager allows you to conveniently manage tags (such as tracking and marketing optimization tags) on your site. By adding your Google Tag Manager Container ID to your website we will be able to add and update AdWords, Google Analytics, Floodlight and non­Google tags from the Google Tag Manager user interface instead of editing site code.” In Guestcentric’s backoffice, you used to add codes/Tags individually in SETUP > HOME > SET GOOGLE CREDENTIALS > Individual Tags. Those codes/Tags are used for your... ● Website Analytics ­ Google Analytics Pageviews/Campaigns/etc. ● Website Contact ­ Google Adwords Contact Form Conversion ● Booking Engine Adwords Conversion ­ Google Adwords Reservation Conversion ● Booking Engine “Other Booking Conversion URLs” ­ Other/custom Reservation Conversions Now you can choose to setup and manage all those codes/Tags and more (Guestcentric related or not) in Google Tag Manager. For this you’ll have to create a Google Tag Manager account, setup a Container and add and configure all Tags you need (for Google Analytics, Adwords Conversion Tracking, Custom URLs, etc.) > See sections 2, 3, 4, 5 and 6 for detailed instructions. For Guestcentric’s related Tags (regarding your Website and Booking Engine) to run you just have to insert in Guestcentric’s backoffice your Google Tag Manager Container ID, in SETUP > HOME > SET GOOGLE CREDENTIALS > Tag Manager. > See section 7 for detailed instructions. Important: Before switching from Individual Tags to Tag Manager make sure you know how to correctly configure the Tags you need (for Google Analytics, Adwords Conversion Tracking, Custom URLs, etc.) in Google’s Tag Manager interface (inside your account and Container). It’s not Guestcentric’s intention or responsibility to know and instruct you on how to setup all the different (and constantly changing) available Tags in Google’s Tag Manager interface. This document can however help you setting up: ● a Google Tag Manager account and a Container to group all your Tags ­ in section 2; ● the Firing Rules needed for your Tags to be fired ­ in section 3; ● the Macros (variables with values related to a Reservation) we make available for your Tags when a Reservation is made (or addons/vouchers are bought) ­ in section 4; ● some demonstrative Tags ­ in section 5; ● a Published Version of your Container ­ in section 6; ● Tag Manager in Guestcentric’s backoffice ­ in section 7; 2 2. Create a Tag Manager account and Container STEP 1: In http://www.google.pt/tagmanager/ “Sign in” with your google account or create a new account. STEP 2: To setup Google Tag Manager, start by naming your Account. Bear in mind that one Account can hold several Containers. STEP 3: Set up your first Container by naming it, selecting WEB PAGES and selecting your TIME ZONE. When you are done, select CREATE ACCOUNT AND CONTAINER. 3 STEP 4: Read the Terms and Conditions and select I ACCEPT. STEP 5: Finish by clicking on the Container’s name (in this case: GC_Container) or in ADD TAGS LATER button. Notice the code that appears next to you Container Name (GTM­XXXXXX), it’s the Container ID you’ll later have to add in Guestcentric’s backoffice. 4 3. Rules “In web containers, the rule(s) attached to a tag govern when the tag is fired or not fired.” “In web containers, a tag must have at least one rule in order to fire. Rules are evaluated during runtime and associated tags are fired (or not fired) when the rule conditions are met.” 3.1 Add the Rules that fire your Tags Google Tag Manager requires the Tags to have at least one rule in order to “fire”. Rules are evaluated during runtime and associated Tags are “fired” (or not fired) when the Rule conditions are met. You must create the Rules you want to use. 5 3.1.1. “All pages” Rule (for your Website Google Analytics tracking ­ Pageviews/Campaigns/etc.) Inside your newly created Container, this Rule should already exist under the Rules tab. Anyway, if it doesn’t exist or if you deleted it, you should create a new one as follows. STEP 1: Inside your Container, Click the NEW button and then select RULE. STEP 2: Add a name for your Rule: All pages STEP 3: Select {{url}} and then matches RegEx STEP 4: Type .* in the input box STEP 5: Click on Save. 6 7 3.1.2. “Contacted” Rule (for your Website Contact Form tracking/conversion) STEP 1: Inside your Container, Click the NEW button and then select RULE. STEP 2: Add a name for your Rule: Contacted STEP 3: Select {{event}} and then equals STEP 4: Type contacted in the input box (IMPORTANT: must be exactly contacted, it’s case sensitive) STEP 5: Click on Save. 8 3.1.3. “Booked” Rule (for the Booking Engine reservation Conversion) STEP 1: Inside your Container, Click the NEW button and then select RULE. STEP 2: Add a name for your Rule: Booked STEP 3: Select {{event}} and then equals STEP 4: Type booked in the input box (IMPORTANT: must be exactly booked, it’s case sensitive) STEP 5: Click on Save. 9 3.1.4. “Book Now Clicked” Rule (for the Website/Booking Engine Cross­Domain tracking) STEP 1: Inside your Container, Click the NEW button and then select RULE. STEP 2: Add a name for your Rule: Book Now Clicked STEP 3: Select {{event}} and then equals STEP 4: Type gtm.formSubmit in the input box (IMPORTANT: must be exactly gtm.formSubmit, it’s case sensitive) STEP 5: Click the “+” (plus sign), select {{url}} and then does not contain STEP 6: Type secure.guestcentric.net in the input box STEP 7: Click the “+” (plus sign), select {{element url}} and then contains STEP 8: Type secure.guestcentric.net in the input box STEP 9: Click on Save. 10 3.2. The Rules tab If you created all four Rules as described above, click in the Rules tab and you should see something like this: 11 4. Macros “Macros are name­value pairs for which the value is populated during runtime. For example, the pre­defined macro named “url” has been defined such that its value is the current page URL. Google Tag Manager provides a set of predefined macros in each Web or Mobile App container that you create. With these macros, you’re able to create the most commonly needed tags and rules. However, you can create additional macros to suit your specific requirements.” 4.1. GuestCentric’s Booking Conversion Macros When a reservation is made (or addons/vouchers are bought) through Guestcentric’s Booking Engine a set of “name­value pairs” are sent to Tag Manager’s Container (if correctly configured and set). These are the Macros you can use to send values to Adwords, Google Analytics, your Custom URLs, etc. The Macros must be of type “Data Layer Variable”, "Data Layer Version": 2. 4.1.1. List of Macros available to access in Google Tag Manager Name Description gcReservation.code the reservation code gcReservation.propertyName the Hotel/Property name gcReservation.offer the reservation's offer name gcReservation.offerId the reservation's offer id gcReservation.isPromo true ­ if the offer is a promotion; false ­ if not a promotion gcReservation.mealPlan the Meal plan Title gcReservation.checkIn the check­in date gcReservation.checkOut the check­out date gcReservation.nights the number of nights gcReservation.quantity the number/amount of rooms gcReservation.adults the number of adults gcReservation.children the number of children gcReservation.addons the addon(s) array gcReservation.addons[x].name the addon name (no need to create it in Macros) gcReservation.addons[x].netPriceTotal the addon net price (no need to create it in Macros) gcReservation.products the product/voucher(s) array gcReservation.products[x].code the product code (no need to create it in Macros) gcReservation.products[x].name the product name (no need to create it in Macros) gcReservation.products[x].netPriceTotal the product total net price (no need to create it in Macros) gcReservation.products[x].quantity the product quantity (no need to create it in Macros) 12 gcPrice.currency the currency used in the reservation gcPrice.total the reservation's total price gcPrice.net the reservation's net price ­ without taxes and fees gcPrice.netAddons the reservation addon's total net price gcPrice.netProducts the reservation products's total net price gcPrice.netStay the reservation stay's net price gcPrice.taxes the reservation's taxes gcPrice.fees the reservation's fees gcPrice.perUnit the net price per room gcGuest.firstName the guest's first name gcGuest.lastName the guest's last name gcGuest.name the guest's name ­ first and last gcGuest.city the guest's city gcGuest.zip the guest's zip code gcGuest.country the guest's country gcGuest.payment the guest's payment method gcReferrer the address/URL of the webpage that linked to the Booking Engine gcLanguage the Booking Engine's language when making the reservation gcCustomParam custom parameter set in "Book Now" links ­ optional gcMobile true ­ if the reservation was made in the Mobile Booking Engine; false ­ if not gcClientId your Client ID in Guestcentric's platform ­ eg: HOTELX gcChannelKey Guestcentric's Channel Key used 13 4.1.2. Add the Macros you want to use You can add some or all of the above Macros to use with your Tags in your Tag Manager Container. Following is an example on how to add the Macro: STEP 1: Inside your Container, Click the NEW button and then select MACRO. STEP 2: Add a name for your Macro, e.g.: gcPrice.total STEP 3: Select Data Layer Variable STEP 4: Type the Data Layer Variable Name (e.g.: gcPrice.total) in the input box STEP 5: Make sure the selected Data Layer Version is Version 2 STEP 6: You can set a default value ­ optional. STEP 7: Click on Save. 14 4.1.3. Macros tab After creating, as described above, all the Macros you want to use, click the Macros tab and you should see something like this: 15 4.2. Macros for “Individual Tags” If in Guestcentric’s backoffice (SETUP > HOME > SET GOOGLE CREDENTIALS) you are not using Tag Manager, but are using Individual Tags the above Macros won’t be available to your codes. In that case you can still only use for Booking Conversion: ● in Adwords Booking Conversion Code: value (reservation total price, automatically sent with your code) ● in “Other booking conversion URL(s): [[AMOUNT]], [[RESERVCODE]], [[CHECKIN]] and [[CHECKOUT]] 16 5. Tags “Tags are tiny bits of website code that let you measure traffic and visitor behavior, understand the impact of online advertising and social channels, use remarketing and audience targeting, test and improve your site, and more.” 5.1. Add and configure the Tags After all the necessary Rules have been created you can (finally) add and configure the Tags you want. Below, we’ll show you how to create the following Tags: 1. Website Book Now link ­ section 5.1.1. ○
needed for your Website/Booking Engine Cross­Domain tracking 2. Website Book Now link decorate ­ section 5.1.2. ○
needed for your Website/Booking Engine Cross­Domain tracking 3. Analytics Website and Booking Engine Pageview ­ Google Analytics Pageviews/Campaigns/etc. ­ section 5.1.3. ○
fired in your Website and in your Booking Engine every time a page is viewed (loaded) 4. Analytics Booking Engine Goal ­ Google Analytics Goals/Campaigns/etc. ­ section 5.1.4. ○
fired in your Booking Engine when a Reservation is made (or addons/vouchers are bought) 5. Analytics Booking Engine Ecommerce ­ Google Analytics Ecommerce/Campaigns/etc. ­ section 5.1.5. ○
fired in your Booking Engine when a Reservation is made (or addons/vouchers are bought) 6. Adwords Website Contact ­ Google Adwords Contact Form Conversion ­ section 5.1.6. ○
fired in your Website when the Contact Form is submitted 7. Adwords Booking Engine Conversion ­ Google Adwords Reservation Conversion ­ section 5.1.7. ○
fired in your Booking Engine when a Reservation is made (or addons/vouchers are bought) 8. Custom URLs pixel Conversion ­ other/custom Booking Engine Reservation Conversions (“Other Booking Conversion URLs”) ­ section 5.1.8. ○ fired in your Booking Engine when a Reservation is made (or addons/vouchers are bought) Important: For the correct Analytics tracking of the Website and Booking Engine pageviews and campaigns, you must create, at least, the first 3 Tags. The other 5 Tags are used for Conversion tracking. You can add whatever Tags you want and extend the above ones with more advanced configuration settings, but to prevent possible problems that may arise from the use of custom Html and/or Javascript in the Booking Engine, at this point it’s not possible to fire Tags of type Custom HTML Tag that use the Booked Rule. For other Tags or more advanced configuration settings you should know how to do the setup or contact specialized partners to help you with those Tags and features setup. It’s not Guestcentric’s intention or responsibility to know and instruct you on how to setup all the different (and constantly changing) available Tags in Google’s Tag Manager interface. 17 5.1.1. Website Book Now link (for your Website/Booking Engine Cross­Domain tracking) STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Website Book Now link STEP 3: Select the Tag Type: Event Listener > Form Submit Listener STEP 4: Check the Wait For Tags checkbox, and (if not already set) type in Max wait time: 2000 STEP 5: In the Firing Rules area (to the right) click on +ADD. 18 STEP 6: Select All pages and click on SAVE. STEP 7: Click on SAVE. 19 5.1.2. Website Book Now link decorate (for your Website/Booking Engine Cross­Domain tracking) STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Website Book Now link decorate STEP 3: Select the Tag Type: Google Analytics > Universal Analytics STEP 4: Type your Tracking ID (from your Google Analytics account) STEP 5: Select the Track Type: Decorate Form STEP 6: Open More settings and then Cookie Configuration STEP 7: Type in Cookie Domain: auto 20 STEP 8: In the Firing Rules area (to the right) click on +ADD. STEP 9: Select Book Now Clicked and click on SAVE. STEP 10: Click on SAVE. 21 22 5.1.3. Analytics Website and Booking Engine Pageview (for your Google Analytics Website Tracking ­ Pageviews/Campaigns/etc.) STEP 0: First of all, if you don’t want your Website pages or the Booking Engine to count as referral traffic in your Analytics reports, you need to exclude those domains. STEP 0.1: In your Analytcs account, go to Admin, and under your Property select Tracking Info > Referral Exclusion List. STEP 0.2: Exclude your Website and the Booking Engine domains (+ Add Referral Exclusion): STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Analytics Website and Booking Engine Pageview STEP 3: Select the Tag Type: Google Analytics > Universal Analytics 23 STEP 4: Type your Tracking ID (from your Google Analytics account) STEP 5: Select the Track Type: Page View STEP 6: Open More settings and then Cookie Configuration STEP 7: Type in Cookie Domain: auto STEP 8: Also in More settings, open Cross Domain Tracking STEP 9: Type your website’s domain followed by a comma and the booking engine domain in Auto Link Domains: yourwebsite.com, secure.guestcentric.net STEP 10: Select the Allow Linker: True 24 STEP 11: In the Firing Rules area (to the right) click on +ADD. STEP 12: Select All pages and click on SAVE. STEP 13: Click on SAVE. 25 26 5.1.4. Analytics Booking Engine Goal (for your Google Analytics Booking Engine Conversions ­ Goals/Campaigns/etc.) STEP 0: First of all, in your Google Analytics Account, you need to have a Goal. STEP 0.1: Create the Booked Goal of Type Event: STEP 0.2: Configure the Goal details as follows: STEP 0.3: You should now have the Goal ready and recording: 27 STEP 1: Back in your Tag Manager Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Analytics Booking Engine Goal STEP 3: Select the Tag Type: Google Analytics > Universal Analytics STEP 4: Type your Tracking ID (from your Google Analytics account) STEP 5: Select the Track Type: Event STEP 6: In the Event Tracking Parameters add the following: STEP 7: Open More settings and then Cookie Configuration STEP 8: Type in Cookie Domain: auto 28 STEP 9: In the Firing Rules area (to the right) click on +ADD. STEP 10: Select Booked and click on SAVE. STEP 11: Click on SAVE. 29 30 5.1.5. Analytics Booking Engine Ecommerce (for your Google Analytics Booking Engine Conversions ­ Ecommerce/Campaigns/etc.) STEP 0: First of all, in your Google Analytics Account, you need to have Ecommerce enabled. STEP 0.1: Enable Ecommerce: STEP 0.2: Click on NEXT STEP and then SUBMIT: 31 STEP 1: Back in your Tag Manager Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Analytics Booking Engine Ecommerce STEP 3: Select the Tag Type: Google Analytics > Universal Analytics STEP 4: Type your Tracking ID (from your Google Analytics account) STEP 5: Select the Track Type: Transaction STEP 6: Open More settings and then Cookie Configuration STEP 7: Type in Cookie Domain: auto STEP 8: In the Firing Rules area (to the right) click on +ADD. STEP 9: Select Booked and click on SAVE. 32 STEP 10: Click on SAVE. 33 5.1.6. Adwords Website Contact (for your Google Adwords Contact Form Conversions) STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Adwords Website Contact STEP 3: Select the Tag Type: Adwords Conversion Tracking STEP 4: Type your Conversion ID (from your Google Adwords account) STEP 5: Type the Conversion Label: Contacted STEP 6: Type the Conversion Value: 0 STEP 7: In the Firing Rules area (to the right) click on +ADD. STEP 8: Select Contacted and click on SAVE. STEP 9: Click on SAVE. 34 35 5.1.7. Adwords Booking Engine Conversion (for your Google Adwords Reservation Conversions) STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Adwords Booking Engine Conversion STEP 3: Select the Tag Type: Adwords Conversion Tracking STEP 4: Type your Conversion ID (from your Google Adwords account) STEP 5: Type the Conversion Label: Price STEP 6: Select (after clicking on the “+” icon) the Conversion Value: {{gcPrice.total}} STEP 7: In the Firing Rules area (to the right) click on +ADD. STEP 8: Select Booked and click on SAVE. 36 STEP 9: Click on SAVE. 37 5.1.8. Custom URLs pixel Conversion (for other/custom Booking Engine Reservation Conversions ­ “Other Booking Conversion URLs”) STEP 1: Inside your Container, Click the NEW button and then select TAG. STEP 2: Add a name for your Tag: Custom URLs pixel Conversion STEP 3: Select the Tag Type: Custom Image Tag (which is used to call image pixel URLs/Scripts) STEP 4: Type your Custom URL in Image URL: www.somedomain.com/somefile.php?clientId={{gcClientId}}&reservationCode={{gcReservation.code
}}&offerName={{gcReservation.offer}}&checkIn={{gcReservation.checkIn}}&checkOut={{gcReservati
on.checkOut}}&totalPrice={{gcPrice.total}}&customParam={{gcCustomParam}} Note: The above URL is just a demonstrative example that sends some Macros received in the Booking Conversion to a fictitious URL/Script. For a “real world” implementation, at least the “www.somedomain.com/somefile.php” part must be replaced by your own. Also, you should use the Macros you will really need. As you can see in the URL, Macros must be between double curly brackets (so that they can be replaced by the real values). STEP 5: In the Firing Rules area (to the right) click on +ADD. STEP 6: Select Booked and click on SAVE. 38 STEP 7: Click on SAVE. 39 5.2. The Tags tab If you created all the eight Tags as described above (note that you just have to create the ones you want to use), click in the Tags tab and you should see something like this: 40 6. Publish (a Version of your Container) After all the Rules, Macros and Tags are created you need to Publish your Container, with all the latest changes you’ve made. If you forget to Create Version and then Publish your container no Tags will be fired. STEP 1: Click on CREATE VERSION (if any Error is found it will list the Error with a description that may help you fix it) STEP 2: Click on PUBLISH STEP 3: In the Confirmation Dialog Box that appears, click on PUBLISH again And that’s it, after that you should see the version message saying “This version is live”. In the left side, now you should also see the Container Versions. 41 7. Setup Tag Manager in Guestcentric’s backoffice Finally (now that the Google Tag Manager Container is configured), you just have to activate Tag Manager and insert your Container ID in Guestcentric’s backoffice. STEP 1: First you need to go to SETUP, by clicking on the “Setup” button in the top right area. STEP 2: On the SETUP, select SET GOOGLE CREDENTIALS. STEP 3: In SET GOOGLE CREDENTIALS, select the TAG MANAGER button/tab (codes in Individual Tags will no longer be used/fired, but whenever you want you can switch back to using Individual Tags). STEP 4: On the TAG MANAGER tab, insert your Google Tag Manager Container ID on the respective field. 42 STEP 5: To save and close, just select SAVE AND CLOSE (from the Save Menu). STEP 6: Confirm and close by clicking YES on the Dialog that appears. STEP 7: Go to the WEBSITE tab and click on PUBLISH ALL CHANGES to update your Website pages. 43 8. Conclusion By now you should have: ● Your Google Tag Manager account, Container and Tags configured and published; ● “Tag Manager” selected and the Container ID correctly set, in Guestcentric’s backoffice (SETUP > HOME > SET GOOGLE CREDENTIALS); ● Your website re­published. So, if all is set and correct: ● Your Website pages (both desktop and mobile) will send data (Pageviews/Campaigns and Contact Form conversion) to your Google Tag Manager Container, which (if correctly configured) will then fire the Tags you added (for Universal Analytics, Adwords Conversion Tracking, etc.); ● Your Booking Engine (desktop and mobile) will send data (Pageviews/Campaigns/Goals and Ecommerce transactions), as well as all the reservation conversion data (Macros you can access/use) to your Google Tag Manager Container, which (if correctly configured) will then fire the Tags you added (for Universal Analytics, Adwords Conversion Tracking, custom URL(s), etc.). Note: The conversion events (with corresponding data) are sent to your Google Tag Manager Container everytime one of the following actions is performed in the Booking Engine: ● a reservation is made; ● additional products (addons and/or vouchers) have been added to the reservation; ● a product (vouchers) is bought. More information regarding Tag Manager: https://www.google.com/tagmanager/ http://www.google.pt/tagmanager/faq.html https://support.google.com/tagmanager/ 44