Building for Vungle: Customizing the Creative Experience

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

Initialization

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-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
Powered by Creativity Driven by Performance Sign Up Here

Questions?

Need further assistance, feel free to reach out to us, we’re here to help!

Was this article helpful?