How-to: Javascript Examples to Dynamically Change the Embedded Trips on website or pass utm tracking codes to your trips

How-to: setup a filter to change what trips are displayed on your website & How-to: to ensure your utm tracking codes are passed through from your website

See the example below for how this was achieved with Pristine Trails

Code Sample

This will need to be adjusted based on your site styles and desired behavior.

<style>
    #load {
        width: 48px;
        height: 48px;
        border: 5px solid #b8905e;
        border-bottom-color: transparent;
        border-radius: 50%;
        display: inline-block;
        box-sizing: border-box;
        animation: rotation 1s linear infinite;
    }

    @keyframes rotation {
        0% {
            transform: rotate(0deg);
        }

        100% {
            transform: rotate(360deg);
        }
    }


    @media only screen and (max-width: 768px) {
        .trip-card-wrapper.detailed h3 a {
            font-size: 15px !important;
        }

        .trip-card-wrapper.detailed {
            margin-left: 0px !important;
            margin-right: 0px !important;
        }
    }
</style>

<div>
    <div>
        <h3>Use the dropdowns to filter trips by year, month and moon cycle</h3>
    </div>
    <div>
        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">
            <option value="">All Years</option>
            <option value="2023">2023</option>
            <option value="2024">2024</option>
        </select>
    </div>
    <div>
        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">
            <option value="">All Months</option>
            <option value="Jan-Mar">Jan-Mar</option>
            <option value="Apr-Jun">Apr-Jun</option>
            <option value="Jul-Sep">Jul-Sep</option>
            <option value="Oct-Dec">Oct-Dec</option>


        </select>
    </div>
    <div>
        <select id="trip-switch-dropdown" class="trip-switch-filter" onchange="switchDropdown()">
            <option value="">All Moon Cycles</option>
            <option value="Full Moon">Full Moon</option>

        </select>
    </div>
</div>
<div>
    <div style="text-align: center;">
        <div id="load"></div>
    </div>
    <div id="placeholder-search-results">&nbsp;</div>
</div>


<script>


    function loadScript(el, o) {
        return new Promise((resolve) => {
            let script = document.createElement("script");
            script.onload = () => {
                document.getElementById('load').style.visibility = "hidden";
                resolve();
            };
            script.src = o.src;
            console.log(script);

            el.appendChild(script);
        });
    }




    function switchDropdown() {
        document.getElementById('load').style.visibility = "visible";
        var dropdown = document.getElementsByClassName("trip-switch-filter");
        var selectedValue = [];
        var dropdownArray = [...dropdown]
        for (let i = 0; i < dropdownArray.length; i++) {
            var val = dropdownArray[i].options[dropdownArray[i].selectedIndex].value;
            // for(let j = 0; j < )

            if (val !== "") {
                selectedValue.push(val);
            }

        }
        console.log(selectedValue);
        reloadTrips(selectedValue);
    }


    function reloadTrips(tags) {
        tags = tags || [];
        // Clear search results from page
        var el = document.getElementById('placeholder-search-results');
        el.innerHTML = '';

       // Fetch new search results and render on page
// Get this from the SHARE TRIP LINK -> INTEGRATE WITH WEBSITE
      var baseUrl = 'https://youli.io/embeds/script/trips/[your-team-alias-here]/?view=card&style=detailed&tags=';
       
var tagsAsQueryString = tags.map(function (tag) {
            // return encodeURI(tag);
            return tag;

        }).join(',');
        loadScript(el, {
            // src: baseUrl + (tagsAsQueryString ? "set-departure,"+tagsAsQueryString : "set-departure")
            src: baseUrl + tagsAsQueryString

        }).then(() => {
                setupYouLiCardDropdownsEvents();    // a function from the YouLi embed script
            });;
    }

    // When user selects from dropdown reload search results
    // var dropdown = document.getElementById('trip-filter-dropdown');
    // dropdown.addEventListener('change', function (event) {
    //     reloadTrips([{ text: event.target.value }])
    // });

    // Load all trips to start with
    reloadTrips();
    // }());
</script>

Where to get baseURL

  1. On any trip or from the dashboard, click to SHARE TRIP LINK
  2. Click to INTEGRATE WITH WEBSITE
  3. Click to copy next to EMBED ALL LISTED TRIPS
  4. Get the URL referenced in the script tags, in bold in code block below
<script src="https://youli.io/embeds/script/trips/mystic-adventures/?view=card&style=detailed"></script>

NOTE: In the src URL the domain is "youli.io", but this would be replaced with your white label domain if you have that configured. For example: "trips.runwildretreats.com"

Passing UTM Affiliate tracking

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

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

<script src="https://[domain]/embeds/script/trips/[yourteamalias]/?view=card&style=detailed&utm_medium=affiliate&utm_source=[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&utm_source=${utmSource}&utm_medium=${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);