Customize the Adaptive Creative Experience

Ian Harris

March 24, 2022 03:19

Adaptive Creative functionality allows developers to control and customize the ad experience with events.

Download

Javascript Description Example

parent.postMessage("download","*")

Sends an event to Adaptive Creative to initiate a download/click based on user interaction.

Used in an HTML element:

<a href="#" onclick="parent.postMessage
('download','*')">Download Now</a>

Used in a Javascript code block:

ctaButton.onclick = function(){
    parent.postMessage('download','*');
};

parent.postMessage("complete","*")

Sends an event to Adaptive Creative which notifies that the creative experience has completed (based on the user having experienced a significant duration of the ad).

Used in a Javascript code block:

function gameCompleted() {
  parent.postMessage('complete','*');
  console.log("Ad experience has completed");
};

Events

Specific events are posted to the creative to allow the user experience to be updated based on the user environment. You can use the following event handlers to change the creative experience.

Type	Javascript	Description	Example
Initialisation	ad-event-init	Event is triggered once communication between the parent index.html and child ad.html has been established and completed. Use this event to ensure VungleHelper global variable is correctly defined (more information on Vungle Helper).	`//Input VungleHelper.closeDelay //Output 4`
Ad Experience	ad-event-pause	Event is triggered when either the application is closed by the user, or the privacy page is displayed. Use this event to pause animations, audio or video in the creative so they don't continue to play outside the ad experience.	`window.addEventListener('ad-event-pause', function() { // Pause anything inside here });`
Ad Experience	ad-event-resume	Event is triggered when either the application is resumed by the user, or the privacy page is closed. Use this event to resume animations, audio or video in the creative so they begin to play once the creative is once again visible to the user.	`window.addEventListener('ad-event-resume', function() { // Resume anything inside here });`

Vungle Helper

A global variable called VungleHelper provides additional creative capabilities to enhance the ad experience.

VungleHelper may not be immediately accessible when ad.html is loading, as there is a short delay in communication between the parent index.html and child ad.html files. You should always use the ad-event-init event to guarantee VungleHelper accessibility.

Javascript	Description	Example
VungleHelper.closeDelay	Endcard close button delay. Returns a number (in seconds).	`//Input VungleHelper.closeDelay //Output 4`
VungleHelper.rewardedAd	Displays if the ad is rewarded or not. Returns true/false.	`//Input VungleHelper.rewardedAd //Output true`

Download

Events

Vungle Helper

Questions?