GloohAds - Ecooh templating

# iFrame

# Overview

This document explains how to embed the Glooh templating engine in your application and also defines the parameters that are available in the application.

By appending parameters to the IFrame URL, you can initialise and customise the experience in your application. For example, you can initialise a fresh new creative by using the creative_id parameter or load a previously made creative using the original_creative_id parameter. You can also use the observe the status of what's happening inside the iFrame by listening to window.onmessage events.

# Requirements

The user's browser must support the HTML5 postMessage feature. Most modern browsers support postMessage.

Embedded templating must have a viewport that is at least 800px by 400px.

# BU tag - loading the correct iFrame

When creating a user, a tag can be passed on. If no tag has been passed on - the iFrame will load for Ecooh ; and the video rendering will be sent to Ecooh.

If a tag has been passed (such as mall_fr) - the iFrame will initialise as go_live and the video rendering will be sent to that endpoint.

# Initialising the iFrame

The sample HTML page below creates an embedded GloohAds that will initialise a new creative, for a specific user. The numbered comments in the HTML are explained in the list below the example.

<!DOCTYPE html>
<html lang="en" style="height: 100%;">
  <head>
    <meta charset="UTF-8" />
    <meta http-equiv="X-UA-Compatible" content="IE=edge" />
    <meta name="viewport" content="width=device-width, initial-scale=1.0" />
    <title>Demo</title>
  </head>
  <body style="height: 100%;">
    <div id="iframe"></div>
  </body>
  <script>
    const iframe = document.createElement("iframe");
    iframe.id = "iframeHandler";

    // ECOOH's campaign_brief_id :
    const campaign_brief_id = "my_custom_brief_id_79623";

    // ECOOH's creative_id (uuidv4)
    const creative_id = "123-123";
    const refreshToken = "";
    const accessToken = "ey....";
    iframe.width = "100%";
    iframe.height = "800px";
    iframe.src = `https://ecooh.staging.glooh.media?refresh_token=${refreshToken}&access_token=${accessToken}&campaign_brief_id=${campaign_brief_id}&creative_id=${creative_id}`;
    document.getElementById("iframe").appendChild(iframe);

    window.onmessage = (e) => {
      console.log("Receive in demo.html : ", e.data);
    };
  </script>
</html>

# Supported parameters

Parameter Comments
access_token* User's access token
refresh_token* User's refresh token
creative_id* Creative ID (guid)
campaign_brief_id* Campaign brief ID (guid)
original_creative_id If duplicating a previous creative
initData Initialisation data
tag Allow to add a tag to the creative and filters the templates

*Mandatory parameter

# Communication between Glooh and your platform

When key actions happen in the interface, the iFrame will send events

window.onmessage = (e) => {
  console.log("Receive in demo.html : ", e.data);
};

Format of the data will be :

{
  type:string,
  data: object,
}

# Outgoing events

event type data Comments
changePage from:"templatePicker",
to:"Customization"		 When changing from the gallery page to the customisation page
changePage from:"Customization",
to:"Validation"		 When changing from customisation page to the validation (before submission page)
data message: string When some data are asked
creativeFinished When the creative has been submitted for validation (& rendering)
error message:"no_access_token", verbose:"No Access Token" When no access token has been passed on to initialise the iFrame
error message:"creative_published",
verbose:"Cannot edit creative not draft"		 If a user is attempting to modify a creative that was already submitted for validation.
error message:"creative_not_valid",
verbose:"Creative id is not valid"		 If a user is trying to access a creative that doesn't exist or that doesn't belong to them.
error message:"no_creative_id_available",
verbose:"No Creative id available"		 If a user is trying to access the pages Customization / Validation without having the creative created. The creative is created when the user clicks on the Customization button, after having picked a template.

# Supported incoming events

All events must be sent through iframe.contentWindow.postMessage(string, '*')

event type data Comments
getCurrentPage {"type":"getCurrentPage","data":null} Ask for the current page
changePage {"type":"changePage","data":"Customization"} Change page to the desired page. Supported page names : 'TemplatePicker, Customization, Validation'

# Examples

← API - Creative →