How to Add First Party Data to VAST Booster and Adserving

Introduction

This document details how to incorporate first-party data into your VAST tags using Viously's VAST Booster and VAST Adserving environments. This allows for enhanced targeting and personalization of your ads.

Incorporating Custom Data from Your Webpage

You can add custom data from your webpage directly into the VAST tag using data-vast-booster-custom-macro and data-vast-adserving-custom-macro properties in the Viously's export code:

<div class="vsly-player" data-template="MY_TEMPLATE_ID" data-vast-booster-custom-macro="&my_var1=my_value1&my_var2=my_value2" data-vast-adserving-custom-macro="&my_var1=my_value1&my_var2=my_value2" id="MY_VIDEO_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>

For Google VAST, include data in &cust_params= and URL encode:

<div class="vsly-player" data-template="MY_TEMPLATE_ID" data-vast-booster-custom-macro="&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" data-vast-adserving-custom-macro="&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" id="MY_VIDEO_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>

These data will be concatenated to your VAST url that you have setup in your platform settings.

Asynchronously Adding Data

Method 1: Define a Global Variable viously_params

Define the variable before any interaction with the Viously player to ensure all data is available for use:

<div class="vsly-player" data-template="MY_TEMPLATE_ID" id="MY_VIDEO_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>
<script>
(function() {
    let permutiveData = retrievePermutiveData();

    window.viously_params = {
        custom_macro: {
            vast_adserving: "&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" + encodeURIComponent('&permutive=' + permutiveData),
            vast_booster: "&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" + encodeURIComponent('&permutive=' + permutiveData)
        }
    };

    function retrievePermutiveData() {
        try {
            const rawData = window.localStorage.getItem('_psegs');
            return rawData ? JSON.parse(rawData) : '';
        } catch (error) {
            return '';
        }
    }
})();
</script>

These data will be used for all player hosted the webpage.

Method 2: Add data for a specific player

Dynamically append data to the Viously player as soon as it's available:

<div class="vsly-player" data-template="MY_TEMPLATE_ID" id="MY_VIDEO_ID" style="background:#ddd;padding-top:56.25%;font-size:0;position:relative;overflow:hidden;width:100%;"></div>
<script>
(function() {
    let permutiveData = retrievePermutiveData();
    let viouslyPlayer = document.getElementById('MY_VIDEO_ID');
  
    if (viouslyPlayer) {
        viouslyPlayer.setAttribute('data-vast-adserving-custom-macro', "&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" + encodeURIComponent('&permutive=' + permutiveData));
        viouslyPlayer.setAttribute('data-vast-booster-custom-macro', "&cust_params=my_var1%3Dmy_value1%26my_var2%3Dmy_value2" + encodeURIComponent('&permutive=' + permutiveData));
    }

    function retrievePermutiveData() {
        try {
            const rawData = window.localStorage.getItem('_psegs');
            return rawData ? JSON.parse(rawData) : '';
        } catch (error) {
            return '';
        }
    }
})();
</script>

This integration ensures your asynchronous data is utilized effectively in your VAST implementations, enhancing the relevance and performance of your ad campaigns.

For any queries or assistance, please reach out to [email protected].