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>

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=[affiliate-code]

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

Learn more about how to pass utm tracking parameters