PRODUCT
Follow

Overview

The HTML Comm module enables communication between elements in the ad and between different ads. You can trigger simultaneous animations and functions across all ads serving on the same page, which provides a dynamic and seamless experience and overall control.

The HTML Comm module resolves iFrame limitations and provides direct script communication between all your ad elements (banners, panels, and iFrames) on the same page, within the same campaign. HTML ads are served into iFrames. The iFrame acts as a sandbox, preventing JavaScript inside from accessing other content on the page, including other ads. In HTML Expandable ads, the banner and panel are in separate iFrames, and therefore are unable to communicate with each other. The Comm module overcomes this restriction, allowing easy access between ads on the same page, as well as between the banner and panel iFrames for the same ad.

The following table describes the functionality supported by the Comm module.

Functionality

Supported

Scope

Banner and panel communications

DOC_tick.gif

N/A

Multiple panel communications

DOC_tick.gif

N/A

Multiple ad communications

DOC_tick.gif

Same campaign only.

Custom script to banner/panel communications

DOC_cross_blue.jpg

Endpoints must be served from the same origin server, due to browsers same origin policy.

Ad server to ad server communications within same campaign

DOC_cross_blue.jpg

Endpoints must be served from the same origin server, due to browsers same origin policy.

Communication between browser windows or tab

DOC_cross_blue.jpg

Within the same window tab only.

To use the Comm module, you must load it by adding it to the EBModulesToLoad array.

<script>EBModulesToLoad = ['Comm'];</script>

Methods

EB.Comm.broadcast

Calls a named function in the Comm objects in all available iFrames. The function is called, if it exists, in all of the creative iFrame elements from the same campaign on the page using the Comm module. There is no return value.

Code Syntax

EB.Comm.broadcast(function_name, function_params);

Parameters

Name

Type

Description

function_name

String

Name of the function to call, including the path from the window namespace.

function_params

  • String for one parameter

  • Array for multiple parameters

Arguments to apply to the function.

Example

function checkIfAdKitReady(event) {
    // This example will call the function startAnimation with the parameter color3 on any ad/panel displaying in the same browser tab 
   EB.Comm.broadcast('startAnimation', 'color3');
   // This example will call the function startAnimation with the parameters color2 and color3 on any ad/panel displaying in the same browser tab
  EB.Comm.broadcast('startAnimation', ['color2','color3']);
}

window.addEventListener('load', checkIfAdKitReady);

EB.Comm.callWhenConnected

Sets up a function call to be made in each list of Comm Object names when all of those windows become available for calling. The named function must already exist in all of the specified windows. If the named function does not exist in any of the windows, the call will fail silently, and proceed to the next window in the list, if any.

Code Syntax

EB.Comm.callWhenConnected(Comm_Object_names, function_name, function_params);

Parameters

Name

Type

Description

Comm_Object_names

  • String for one parameter

  • Array for multiple parameters

Name or list name that the function should be called.

function_name

String

Name of the function to call, including the path from the window namespace.

function_params

  • String for one parameter

  • Array for multiple parameters

Arguments to apply to the function.

Example

function checkIfAdKitReady(event) {
    //The function startAnimation will be called for each Comm objects when all are available.
    EB.Comm.callWhenConnected(['banner300x250', 'panel500x300'],startAnimation,'color3');
}

window.addEventListener('load', checkIfAdKitReady);

EB.Comm.getName

Retrieves the name of the Comm object. Returns a string with the current name of the object if set with setName method. If not set, it will return an empty string.

Code Syntax

EB.Comm.getName();

Example

function checkIfAdKitReady(event) {
    //Prints in the console the name of the Comm object
    console.log(EB.Comm.getName());
}

window.addEventListener('load', checkIfAdKitReady);

EB.Comm.setName

Sets a public name for the Comm object in the creative element (ad or panel) so that it can be discovered from another Comm object displaying in the same browser tab.

Code Syntax

EB.Comm.setName(name);

Parameters

Name

Type

Description

name

String

Name for the Comm object.

Example

function checkIfAdKitReady(event) {
    //Set the name of the Comm object to 'expandedPanel'
    EB.Comm.setName('expandedPanel');
}

window.addEventListener('load', checkIfAdKitReady);

EB.Comm.isConnected

Checks if an element or list of elements were loaded and are available for Comm module. The function returns true if the element or the group of elements are available. The return value is false if one or more elements are not available yet.

Code Syntax

EB.Comm.isConnected(object_names);

Parameters

Name

Type

Description

object_names

  • String for one parameter

  • Array for multiple parameters

Name or array of names to check.

Example

function checkIfAdKitReady(event) {
    //Returns true or false depending if an object was declared as 'banner300x250' using setName method in other ad/panel displayed in the same browser tab.
    EB.Comm.isConnected('banner300x250');
    //Returns true or false depending if all objects was declared using setName method in other ad/panel displayed in the same browser tab.
        EB.Comm.isConnected(['banner300x250', 'panel500x300']);
}

window.addEventListener('load', checkIfAdKitReady);
Was this article helpful?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments