How to implement TripAdvisor tracking pixel with Adobe DTM

This post will focus on implementation of the TripAdvisor script. Since there is no official documentation done by TripAdvisor on how to implement the script through DTM, I will show you what code is needed and how you implement it.

Background:
This documentation is useful if you have more than one DTM property used on your website. For instance, one for your booking flow and one for the rest of the website. Having more than one DTM property can cause issues if you rely on DTMs ability to store information since information is not shared (which makes sense from a security point of view).
This example takes into consideration you need to store information from one DTM property to another and how you can do it quite easily.

Please don’t forget to test the following solution thoroughly before you publish it to your live website. (The current solution was tested on a Single Page Application (SPA) with a direct call rule, same method can be used for event-based and page load rules)
This post will cover the conversion tag (confirmation of bookings), and how you ensure to get the “refid”.

What you need:
– Access to DTM (Dynamic Tag Manager)
– TripAdvisor Partner ID (contact your account manager if you don’t already have it)
– Pixel_ID (contact your account manager if you don’t already have it)
– DTM switch for Chrome (download DTM switch from here)
– Awesome Cookie Manager (download Awesome Cookie Manager from her)
– TripAdvisor Chrome extension (contact your account manager to get the latest version)

Your conversion script tag should look something like this:

<script> (function(f,a,c,d,g,b,h,e){if(f.taq){return}b=f.taq=function(){b.queue.push(arguments)};b.queue=[];if(/bot|googlebot|crawler|spider|robot|crawling/i.test(c.userAgent)){return}h=a.createElement(d);h.async=true;h.src=g;e=a.getElementsByTagName(d)[0];e.parentNode.insertBefore(h,e)})(window,document,navigator,"script","//static.tacdn.com/js3/taevents-c.js"); 
taq('init', 'PIXEL_ID');

// Customize the below to enable remarketing: 
taq('track', 'PAGEVIEW'); 

// Customize the below to share conversion data: 
taq('track', 'BOOKING_CONFIRMATION', {
    'partner' : PARTNER,
    'refid' : REFID,
    'gbv' : GBV,
    'currency' : CURRENCY,
    'order_id' : ORDER_ID
});
</script>

The code highlighted in the above section is the code we will need to modify in order to get the conversion tracking working.

How to set/store the REFID:

  1. First you need to create “page load rule” in “DTM property 1” that is on the landing pages.
  2. Name the rule “Create tripadvisor cookie from URL”.
  3. Set the condition to “bottom of page”.
  4. Go to “Javascript/Third Party Tags” and create a new “non-sequential” tag. Name it “Tripadvisor cookie”

In the code section of the newly created third party tag, you need to add the following code, but some minor adjustments must be done before you can use it on your domain.

function getParameterByName(name) {
 var match = RegExp('[?&]' + name + '=([^&]*)').exec(window.location.search);
 return match && decodeURIComponent(match[1].replace(/\+/g, ' '));
}
if (window.location.href.indexOf("refid") >= 0) {
var cookieName = 'tripIDCookie';
var cookieValue = getParameterByName("refid");
var myDate = new Date();
myDate.setMonth(myDate.getMonth() + 3);
document.cookie = cookieName +"=" + cookieValue + ";expires=" + myDate + ";domain=.webanalytics-ninja.com;path=/";
} else {}

In the code above, you need to replace the yellow area with your own domain, and don’t forget to define it with a . as prefix. Example: “.yourdomain.com”. This ensures that any subdomains can read the cookie value. (useful when need to use the data on a subdomain).

Save the code above and test if your page load rule is working. The easiest way to test it, is to append the following to your domains url: “?refid=my_page_load_rule_is_working”

Example:
webanalytics-ninja.com?refid=my_page_load_rule_is_working

Before activating the DTM switch, you will need to open the developer console on your Chrome browser (Press F12).

How to test:

Go to chrome and enable the DTM switch in your browser:

   

Once enabled, you will need to reload the page and in your console you will see if the page load rule named and should see the following:

This shows us that the rule is working, which is good. (Important info: the rule will fire off even if the refid is not present in the url but no code will be executed. This is to ensure the tripadvisor cookie is not overwritten on the next page by the page load rule we just created).

Now that we know the rule is firing off, we need to ensure the code inside the rule also executes.
You will need to see if the cookie has been set on your domain. You can do that by going to your other extension you downloaded earlier, Awesome Cookie Manager. In domain, type in your domain and in the cookie name, you will need to type “tripIDCookie”.

In the view above, you should see your own domain name under “Domain”, the tripIDcookie and the value we put in the URL earlier.
A simpler way to test if the cookie is set, is to use the built-in cookie reader from DTM. Type in the following in the console of your browsers developer tool:

_satellite.readCookie(“tripIDCookie”);

If you have the same view, then please do continue. If not, then please re-visit the code and see if you missed any of the steps above.

Implementing the TripAdvisor conversion tag

Now that you have the most important part in place for the conversion tag, you can focus on implementation of the following conversion tag. In my example this would be “DTM property 2” that is used in the booking flow and doesn’t share same logic as the rest of the website.

if (!/\.(TRA)$/.test(s.campaign)) { 
 (function(f,a,c,d,g,b,h,e){if(f.taq){return}b=f.taq=function(){b.queue.push(arguments)};b.queue=[];if(/bot|googlebot|crawler|spider|robot|crawling/i.test(c.userAgent)){return}h=a.createElement(d);h.async=true;h.src=g;e=a.getElementsByTagName(d)[0];e.parentNode.insertBefore(h,e)})(window,document,navigator,"script","//static.tacdn.com/js3/taevents-c.js");
taq('init', 'PIXEL_ID');
taq('track', 'BOOKING_CONFIRMATION', {
'partner' : 'PARTNER',
'refid' : _satellite.readCookie("tripIDCookie"),
'gbv' : PRICE,
'currency' : CONVERSION_CURRENCY,
'order_id' : BOOKING_ID,
'travel_start_date' : BOOKING_START_DATE,
'travel_end_date' : BOOKING_END_DATE
});} else {}

There are several areas that we need to modify in the code above. Most of the values (line 3,5,7,8,9,10 and 11) should be straight forward to extract from your data layer or the page. I have highlighted two areas that are important for you to focus on in order to get the script to work properly and ensure TripAdvisor can map the transaction to their campaigns.

Line 1 has a condition that checks if the s.campaign (campaign tracking variable for Adobe Analytics) has “TRA” in the string. If the s.campaign cookie does exist and it has “TRA” in the tracking code, then the script will be executed. If the condition is not true it will not fire off any script. Please be aware that if you are using Google Analytics, then you need to listen for the utm parameter on your landing page and store that in a cookie as we did with the “refid”. That way you can ensure the script is only triggered if a user came from TripAdvisor.

For the “refid”, marked in line 6. I’m using the read cookie function that comes out of the box with DTM. There is also a read url function in DTM, but once you start working with subdomain and cross references from one DTM property to another, you will need the method above. The tracking call for “refid” must be equal to the cookie we created earlier.

That’s it! Now you only to test if before you release it. Go through your booking flow with DTM enabled on staging and debugging. On the confirmation page, the TripAdvisor chrome extension will trigger off the tracking that you have implemented and that is your guarantee for the tracking script is firing off as it should.
I would recommend to document the test and send it to your account manager and get a sign-off before releasing the code.

Have fun implementing! 🙂