Personaliseren via postMessage

PostMessage is een veilige methode om te communiceren tussen verschillende domeinen. Zo ook tussen een website en embedded Ivory player (iFrame). Via deze weg kun je video's realtime personaliseren. Door de data rechtstreeks vanuit een webpagina naar de iFrame te sturen, blijft de data client-side. Deze techniek wordt gekozen wanneer informatie dient te worden opgehaald vanuit een website zonder deze in de omgeving van Ivory Studio op te slaan. Het voordeel hiervan is dat er, buiten de omgeving van de klant (eigen systemen, website, datawarehouse etc.), geen persoonsgegevens worden gedeeld met derden. Deze constructie sluit aan bij beleid omtrent gegevensbescherming in het kader van de AVG.

Hieronder een visuele weergave van de diverse communicatielijnen:

infographic Embed Iframe inclusief PostMessage

Video project configureren

Allereerst moet een video project worden aangemaakt. Daarin moeten de gewenste variabelen worden geconfigureerd. Deze kun je toevoegen in de vorm van 'tags' als het gaat om tekstuele personalisaties. Of binnen de variable trigger met als doel om bijvoorbeeld scènes of afbeeldingen te segmenteren.

Volg onderstaande link om te lezen hoe je tags configureert: https://www.ivorystudio.net/how-to/advanced/variabelen-tonen/

Lees verder over hoe je de variabele trigger gebruikt: https://www.ivorystudio.net/how-to/advanced/variable-trigger-gebruiken/

Video embedden met custom code

Stap 1. Code voorzien van variabelen

Om de player te laten communiceren met de website moet er een conversie plaatsvinden tussen de variabelen zoals gedefinieerd in de website en de variabelen zoals geconfigureerd in het Ivory Studio project. Je kan gebruik maken van het onderstaande voorbeeld script. Pas de code aan met de gekozen variabelen.

<script>
window.addEventListener("message", receiveMessage, false); 

function sendMessage(name, obj) {
 document.getElementById("iv_iframe").contentWindow.postMessage(
 JSON.stringify({ type: name, data: obj }), "*");
}

function receiveMessage(msg) {
 msg = JSON.parse(msg.data);

 if(msg.type == "videoLoaded") {
  var obj = {
   "ivory-variabele_1" : "klant-variabele_x",
   "ivory-variabele_2" : "klant-variabele_y",
   "ivory-variabele_3" : "klant-variabele_z"
  }
  sendMessage( "variables", obj );
 }
}
</script>

Stap 2. Embed code plaatsen

Publiceer het project en plaats de embed code op de website samen de custom code. Het maakt niet uit welke variant je van de embed code gebruikt. Let op: de custom code uit stap 1 moet voor buiten de iFrame code staan.