How-to: Passing Affiliate tracking using UTM parameters and Javascript from landing pages

If you want to pass affiliate tracking from your website to your YouLi booking pages, you'll need javascript to pick up the right parameter from the URL and append it to the YouLi link

If you want to send your customers to a landing page before they click through to book, but you need to track affiliate codes, be sure to pickup the affiliate code and pass it through.

Affiliate Source Tracking

You can invite Affiliates in YouLi and they get access to a dashboard with links that include their tracking. Learn more about Affiliates.

This article details the case where you don't want them to link straight through to the booking page, but you want them to go to a landing page (or home page) of your website FIRST, then click through to book.

This requires a few extra bits of code to ensure source tracking is captured on your website and passed on.

Passing Affiliate tracking code in a BOOK NOW link

If you want to pass through affiliate tracking from your website to your trip pages, be sure to add utm_medium=affiliate&utm_source=[affiliate-code]

We don't know what your link structure is for your website, so you'll need to amend this code based on the instructions you provide your affiliates. We'll be using our demo company Blue Horizon for these examples.

This example assumes the link to the BOOK NOW is on the FIRST page the customer lands on. If they navigate away and click back, you might need to save the source in a cookie and keep it around. This is done automatically when they are linked to YouLi directly, but must be done in your own website code if linking to your Home Page or Landing Page first.

Blue Horizon adds an affiliate to YouLi with tracking code ABC123
Because Blue Horizon tracks source from many places, they decide to use YouLi's UTM parameter pattern and instructs their affiliates to use these links:
- ```
https://blue-horizon.youli.travel?utm_medium=affiliate&utm_source=ABC123
```
The javascript must then pick up the right parameter from the incoming URL (above) and append it to the link to the YouLi Booking Page.
- How to get a Share Trip Link

[SHARE-TRIP-LINK]?utm_medium=affiliate&utm_source=ABC123

Blue Horizon example:

Blue Horizon uses White Label Domain (WLD), use youli.io if you do not have WLD.

https://trips.blue-horizon.youli.travel/c/blue-horizon/great-barrier-reef?utm_medium=affiliate&utm_source=ABC123

Here's an example of how this might be done.

This is assuming you have a button on the page called BookNowButton on the page that should take the Traveler to the Booking Page.

// get the current URL
const urlParams = new URLSearchParams(window.location.search);

// get the utm_source and utm_medium parameters from the URL
const utmSource = urlParams.get("utm_source");
const utmMedium = urlParams.get("utm_medium");

// create a new script element with the updated parameters
const booknowButton = document.getElement("BookNowButton");
booknowButton.formaction = `https://trips.blue-horizon.youli.travel/c/blue-horizon/great-barrier-reef?utm_medium=${utmMedium}&utm_source=${utmSource}`;

This also passes any other UTM tracking through, so you can know if your bookings are coming from Facebook, an affiliate who didn't pass the right code but gets picked up in the referrer, etc.

Learn more about Source Tracking in YouLi

Learn more about editing Affiliate source when tracking goes wrong

Passing UTM Affiliate tracking to Embed Script

If you are using YouLi embeds, there is a slightly different set of parameters required.

You'll need javascript to pick up the right parameter from the URL and append it to the base URL of the script src.

<script src="https://[domain]/embeds/script/trips/[yourteamalias]/?view=card&style=detailed&trackingmedium=affiliate&trackingsource=[utm_source]"></script>

Here's an example of how this might be done.

This is assuming you have a <div id="my-div"></div> on the page in the location you want the embedded trips to appear.

// get the current URL
const urlParams = new URLSearchParams(window.location.search);

// get the utm_source and utm_medium parameters from the URL
const utmSource = urlParams.get("utm_source");
const utmMedium = urlParams.get("utm_medium");

// create a new script element with the updated parameters
const dynamicScript = document.createElement("script");
dynamicScript.src = `<script src="https://[domain]/embeds/script/trips/[yourteamalias]/?view=card&style=detailed&trackingsource=${utmSource}&trackingmedium=${utmMedium}`;

// get the div element where you want to place the script
const myDiv = document.getElementById("my-div");

// add the new script element to the div element
myDiv.appendChild(dynamicScript);