If you have ads from which you want to see the conversion rate or want to use cross-site tracking or even affiliate marketing tracking, instead of adding your Google Analytics tag to your WeTravel profile, you can use the setup below to follow the entire customer journey end-to-end.
We highly recommend hiring a professional to set up this feature on your website if you lack the experience to do it yourself.
To have the tracking system you use on your website listen to events from WeTravel, you must add code to your website header. This will allow two specific events from WeTravel to be merged into your original customer journey. The two events are when the Book Now button is clicked and when conversions happen.
If a customer clicks on a WeTravel embedded widget, like the Checkout Pop-up (child frame), your website (parent frame) will receive events via the window.postMessage function in JS. Additionally, another event will be sent when the customer reaches the confirmation page (conversion event).
To integrate this, you need to use event listeners that can capture the events sent from the embed widget and send the corresponding tracking events to your tracking tool. This approach is compatible with any tracking code, including Facebook Pixel, Google Analytics 4, and some affiliate marketing codes.
When adding the below code to your header, remember to replace the tracking ID with your own:
<!-- Google tag initializing (gtag.js) | TODO: Adjust Tracking Id -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX"></script>
<script>
// ######### START configuring GA (ignore if you already have this part) #########
window.dataLayer = window.dataLayer || [];
function gtag() { dataLayer.push(arguments); }
gtag('js', new Date());
gtag('config', 'G-XXXXXXXXXX'); // TODO: Adjust Tracking Id
// ######### END configuring GA #########
// ######### START initializing Listener for events #########
const eventMethod = window.addEventListener
? 'addEventListener'
: 'attachEvent';
const eventer = window[eventMethod];
const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
eventer(messageEvent, (e) => {
var data = e.data;
if (data.type === 'bookingConfirmed') {
// ######### START Tracking Booking Conformation event #########
gtag('event', 'purchase', {
transaction_id: data.order_id,
value: data.total_amount,
currency: data.currency,
items: [
{
affiliation: 'WeTravel',
item_id: data.trip_uuid,
item_name: data.trip_title,
item_category: data.trip_category,
quantity: 1,
price: data.total_amount,
},
],
});
// ######### END Tracking Booking Conformation event #########
}
if (e.data.type === 'bookNowClicked') {
// ######### START Tracking Book Now Button Click event #########
gtag('event', 'Book Now Button Click', {
event_category: data.source,
event_label: data.trip_title,
});
// ######### END Tracking Book Now Button Click event #########
}
});
// ######### END initializing Listener for events #########
</script>
Facebook pixel:
<script>
// ######### START initializing Facebook Pixel Code + Page View event #########
// (ignore if you already have this part)
!(function (f, b, e, v, n, t, s) {
if (f.fbq) return;
n = f.fbq = function () {
n.callMethod
? n.callMethod.apply(n, arguments)
: n.queue.push(arguments);
};
if (!f._fbq) f._fbq = n;
n.push = n;
n.loaded = !0;
n.version = '2.0';
n.queue = [];
t = b.createElement(e);
t.async = !0;
t.src = v;
s = b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t, s);
})(window, document, 'script', 'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', 'PIXELID'); // Update PIXEL ID
fbq('track', 'PageView');
// ######### END initializing Facebook Pixel Code + Page View event #########
// ######### START initializing Listener for events #########
const eventMethod = window.addEventListener ? 'addEventListener' : 'attachEvent';
const eventer = window[eventMethod];
const messageEvent = eventMethod === 'attachEvent' ? 'onmessage' : 'message';
eventer(messageEvent, (e) => {
const data = e.data;
if (data.type === 'bookingConfirmed') {
// ######### START Tracking Booking Confirmation event #########
fbq('track', 'Purchase', {
content_ids: [data.trip_uuid],
content_name: data.trip_title,
value: data.total_amount,
currency: data.currency,
});
// ######### END Tracking Booking Confirmation event #########
}
if (data.type === 'bookNowClicked') {
// ######### START Tracking Book Now Button Click event #########
// Confirm this Custom Event in the dashboard once received
fbq('trackCustom', 'Book Now Button Click', {
source: data.source,
content_name: data.trip_title,
});
// ######### END Tracking Book Now Button Click event #########
}
});
// ######### END initializing Listener for events #########
</script>
<!-- START tracking Facebook Pixel no-script Page View event (ignore if you already have this part) -->
<noscript>
<img
height="1"
width="1"
style="display:none"
src="https://www.facebook.com/tr?id=PIXELID&ev=PageView&noscript=1"
alt="Facebook Pixel"
/>
</noscript>
FAQ
What to do if I need more help?
If you or your developer run into issues, you’re welcome to contact info@wetravel.com with a screenshot of the code you are adding and a brief description of the outcome you are trying to achieve. While we cannot guarantee in-depth support for custom code, we’ll do our best to point you in the right direction.
Should I also add the Google Analytics 4 Code to my WeTravel profile?
We recommend sticking to only one tracking method. Setting up both (code in your header and adding your GA4 tag to your WeTravel profile) may lead to double tracking of events and, therefore, unreliable data. Click here to learn how to connect your Google Analytics account to WeTravel.