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 HTML5 Workspace built using the HTML5 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 in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the In-Sight Ad Feature workspace into ZIP files, preserving the directory structure. You can do this with WinZip, 7Zip, or another archiving program.

  1. Zip the Workspace folder.
  2. Log in to the MDX2.0 platform.
  3. Click ManageCreative Assets, and upload your Workspace to the appropriate asset folder.
  4. (Optional) Rename the folder.
  5. From the main menu, select Shortcuts > Create New Ad > Create a New Ad.
  6. In the Ad Name field, enter the unique name of your ad.
  7. Choose a format from the format type list.
  8. Choose the HTML5 Workspace Folder you uploaded to the platform.
  9. Click Save

Sizmek Sizmek Advertising Suite Setup

  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.

Change Log 

October 18, 2017

  • Switched from using the Scroll Action Custom Script to EB.API Visibility Data (therefore, custom script is no longer necessary for this feature)
  • Updated to new Feature Template
  • Migrated to SAS  

March 4, 2016

  • Added Ad Feature Tracking
  • Updated to use AdKit 

July 9, 2015

Initial Release

 

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

Comments