The In-Sight ad feature leverages the visibility data available through the EB.API. By using this feature, clients can trigger actions such as animation, video, and dynamic content at the moment an ad comes into view within the browser. These actions are triggered on a percentage-based threshold, determined by the client. This allows the user to see the full intended experience, regardless of where the ad is placed on the page.
Important
Important:-
This feature does not work in local preview.
-
This feature is not supported when the ad is served in a mobile app.
Note
Note: This feature no longer uses the PL_Scroll_Detect.js custom script.
The following images display the demo. When the ad is within the visibility threshold, the creative shows that the ad is visible, as seen on the left. On the right, we see that when the ad scrolls outside of the viewport and the visibility falls below the defined threshold, the creative shows that the ad is hidden.
|
|
|
The In-Sight ad feature includes one HTML workspace built using the HTML polite banner.
Before you begin, make sure you have the following resources available:
-
In-Sight ad feature files from Demos/Downloads.
The following steps illustrate how to add the In-Sight ad feature to your creative workspace.
-
Include the In-Sight Javascript file in the head of your workspace index.html file:
<script type="text/javascript" src="scripts/insight.js"></script>
-
Include the In-Sight stylesheet:
<link type="text/css" rel="stylesheet" href="styles/styles.css"/>
-
Instantiate and pass the threshold parameter to the In-Sight script. The threshold parameter will determine when the ad is considered visible or hidden. The threshold parameter is a number from 0-100.
<script>
// Instantiate the In-Sight Script
var inSight = new InSight(60);
</script>
-
Once you've created a new instance of InSight() method, add an event listener and listen for the ON_VISIBILITY event. As the viewport is updated, the event will fire a response, returning the percentage of the ad that is visible. Make sure to add your event handler function like in the example below, using e.detail.visibility - event data object notation to get the percentage value in your handler function.
<script>
// Instantiate the In-Sight Script
var inSight = new InSight(60);
// Add Event Listener for Visibility Data
inSight.addEventListener("ON_VISIBILITY", handleVisibilityEvent, false);
// Handle Visibility Event Response
function handleVisibilityEvent(e) {
// the visibility percentage is available in the response object
var v = e.detail.visibility;
}
</script>
-
Zip the workspacefolder.
-
Log in to the AAS.
-
Click Creative >Asset Library, and upload your workspace to the appropriate asset folder.
-
(Optional) Rename the folder.
-
Click Creative > Ads. Then, click New Ad and select Blank Ad.
-
In the Ad Name field, enter the unique name of your ad.
-
Choose a format from the Ad Format list.
-
Under Main Assets select the workspace folder and default image.
-
Click Save.
-
The ad feature does not work with local preview. Must be served on a placement tag to have access to the visibility data.
-
Up to a one second delay before visibility data is available.
-
Visibility data is not available on Android 4.4 (and below) native browsers.
-
Does not work reliably with Safeframes in Safari.
-
In Safeframe and AMP we rely on viewability data provided to us by the publisher. In this case Amazon is unable to guarantee the accuracy of the viewability data.
Comments