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 initializing + 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',
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) => {
var data = e.data;
if (data.type === 'bookingConfirmed') {
// ######### START Tracking Booking Conformation event #########
fbq('track', 'purchase', {
content_ids: [data.trip_uuid],
content_name: data.trip_title,
value: data.total_amount,
currency: data.currency,
});
// ######### END Tracking Booking Conformation event #########
}
if (e.data.type === 'bookNowClicked') {
// ######### START Tracking Book Now Button Click event #########
// ######### You will need to confirm this Custom Event once you recieve the event in your dashboard #########
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"/> // update PIXEL ID
</noscript>
FAQ
Can I track my affiliate marketing?
If you have a specific affiliate code you would like to add to your header, please contact us via info@wetravel.com and we can help you set up the specific code that is needed for your affiliate program.
What to do if I need more help?
If you or your developer cannot get the code to work, please write to info@wetravel.com with a screenshot of the code you are adding and the outcome you are looking for. This way, our specialist team can give you personalized help.
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.