PRODUCT
Follow

Overview

Introduction and Screenshots

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:
  • This feature does not work in local preview.
  • This feature is not supported when the ad is served in a mobile app.

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. 

insight1.jpg    insight2.jpg

Demos/Downloads

The following table provides links to the template and demo for the In-Sight Ad Feature feature.

Template

Sizmek_InSight_3_0_0.zip

Demo

Preview Demo

Supported Platforms

Platform

Supported Version

Windows

Internet Explorer 10+, Edge, Firefox, Chrome

Mac

Firefox, Chrome, Safari

iPhone

iOS 9.0 and later

iPad

iOS 9.0 and later

Android

Android 4.4 and later ( including tablets)

Assets

Workspaces Available

The In-Sight Ad Feature includes one HTML Workspace built using the HTML Polite Banner. 

Included Workspace Files

File Name 

Description

config.js

Sizmek Ad Configuration file

images/DefaultImage300x250.gif

Demo Default Backup image

index.html

Demo HTML index file

scripts/insight.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

  

Implementing the Ad Feature

Getting Started

Before you begin, make sure you have the following resources available:

 

Add the In-Sight Ad Feature to Your Workspace Code

The following steps illustrate how to add the In-Sight Ad Feature to your creative Workspace.

Procedure
  1. Include the In-Sight Javascript file in the head of your Workspace index.html file:

    <script type="text/javascript" src="scripts/insight.js"></script>

  1. Include the In-Sight Stylesheet: 

    <link type="text/css" rel="stylesheet" href="styles/styles.css"/>

  1. 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>

  1. 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>

In-Sight Parameters

Parameter

Type

Description

threshold

Number

Threshold at which the ad is considered visible or hidden 0-100.

 

Setting up the In-Sight Ad Feature Sizmek Ad Suite

  1. Zip the Workspace folder.
  2. Log in to the Sizmek Advertising Suite.
  3. Click Creative > Asset Library, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. Click Creative > Ads. Then, click New Ad and select Blank Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the Ad Format list.
  8. Under Main Assets select the Workspace folder and default image.
  9. Click Save

Known Issues

  • 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 Sizmek is unable to guarantee the accuracy of the viewability data.

 

 

Was this article helpful?
0 out of 0 found this helpful
Have more questions? Submit a request

Comments