HTML5 DCO Advanced Block Build Guide

Sizmek Blocks

HTML5 DCO Advanced Block Build Guide

Table of Contents Overview ............................................................................................................................................................... 2

The HTML5 DCO Advanced Block .................................................................................................................................. 2

Supported Platforms ....................................................................................................................................................... 3

Note .................................................................................................................................................................................... 3

Demos/Downloads .......................................................................................................................................................... 3

Benefits ............................................................................................................................................................................. 4

Use Case ............................................................................................................................................................................ 4

Included Files ........................................................................................................................................................ 5

Implementing the Block ...................................................................................................................................... 6

Configuring The DCO Template Blocks ......................................................................................................................... 6

Block Implementation ................................................................................................................................................. 7

HTML Content Options ................................................................................................................................................ 9

Variable Options ........................................................................................................................................................... 9

Sizmek

Copyright © 2014 Sizmek. All rights reserved. 2

Overview Sizmek’s HTML5 DCO Advanced Block uses the adKit custom script to load dynamic content configured within the Smart Versioning interface, to affect the properties of elements in your HTML5 creative. Once your creative has been established within the platform, users can use the Smart Versioning features to create multiple versions or even import Excel or XML files to create mass versioning.

This Block comes with two templates. One focuses on smart variables and the other on adkit–html content. In both examples, changes can be made to the image, image rotation, text and text visibility.

The HTML5 DCO Advanced Block

Sizmek


Supported Platforms

Platform Supported Version

Windows Internet Explorer 9+, Firefox, Chrome, Safari

Mac Firefox, Chrome, Safari

Platform

Supported Version

iPhone iOS 5.0 and later

iPad iOS 5.0 and later

Android Android 2.3 and later( including tablets)

Note

• The HTML5 DCO Advanced Block requires the adKit Custom Script. o http://ds.serving-sys.com/BurstingScript/adKit/adkit.js

• For campaigns involving large numbers of versions, it is advised that Mass Versioning be used instead of Single Versioning. This feature can be found under Smart Versioning > Multiple Versions. This option allows the use of versions via Excel or XML Feed.

Demos/Downloads

To download the Block, view a demo of the Block or get the latest copy of the build guide, please visit the Formats & Blocks tab of the Creative Zone. For more information, contact your Creative Development Specialist.

Sizmek


Benefits

• Target and retarget - on a massive scale. Relevance = results, and Sizmek’s Dynamic Creative lets you quickly and easily mass produce hundreds of ad variations by geography, product, offer - you name it.

• Don't guess; test. Got more than one big idea? Easily conduct multivariate tests to find the optimal creative approach or combination for each target segment.

• Experiment. Try out different dynamic elements and combinations and let the Smart Versioning Optimization Engine automatically discover what works best.

• Say yes! Accommodate changing client requirements, keep campaigns fresh, and easily update campaigns over time without extra production or re-trafficking.

Use Case

An automobile manufacturer wants to advertise a new line of vehicle but would like the creative to reflect different promotions corresponding to different markets.

Sizmek


Included Files Filename Description

HTML5 Workspace Folder - HTML5 Content

config.js Sizmek’s DCO Variable Config file

css/block_style.css Sizmek Block Stylesheet

images/DefaultImage300x250.gif Sizmek Block default image

images/Starry_Night.jpg Sizmek Block DCO dynamic image

index.html Sizmek Block HTML file

js/dco_advanced_block.js Sizmek Block Javascript file

Filename Description

HTML5 Workspace Folder - Variable

config.js Sizmek’s DCO Variable Config file

css/block_style.css Sizmek Block Stylesheet

images/DefaultImage300x250.gif Sizmek Block default image

images/Starry_Night.jpg Sizmek Block DCO dynamic image

index.html Sizmek Block HTML file

js/dco_advanced_block.js Sizmek Block Javascript file

Sizmek


Implementing the Block Before you Begin

Make sure you have the following resources available:

• HTML5 DCO Advanced Block files

Configuring The DCO Template Blocks The HTML5 DCO Template Block is accompanied by two templates:

HTML5 Workspace Folder - HTML5 Content– Automatically update content using the adkit-html feature.

HTML5 Workspace Folder - Variable– Update content using the adKit getSVData API.

The HTML5 DCO Advanced Block uses the AdKit Custom Script (included below) to pull DCO variables and HTML Content from the platform. This script must be added to the Workspace index file for the DCO files to work properly. The adKit script also requires the addition of the config.js file, found in the Workspace folder. This config.js file is used to list all necessary DCO Variables and HTML Content included in your creative. The adKit script replaces the standard EBloader declaration and includes all previous EB functionality, such as EB.clickthrough();.

<script type="text/javascript" src=" http://ds.serving-sys.com/BurstingScript/adKit/adkit.js">

In both examples, you can update the config file to alter the image, image rotation, text for the image title and visibility of title.

In the HTML5 Content example, the template uses the adkit-html feature to automatically map Smart Variables to divs in your creative and then uses the adKit getSVData API method to update the image rotation and text visibility.

In the Variable example, the template uses the adKit getSVData API method to update all dynamic attributes within the creative. Both examples produce the same results, but show different methods of achieving those results.

For more information on how to add Smart Versioning functionality to your HTML5 ad, see the following link: https://platform.mediamind.com/onlinehelp/MediaMind/External/#20627.asp

Sizmek


Block Implementation

1. Open the config.js file located in the root of the Workspace folder. • Example below:

define({ "SV": { "svData": [{ "svKey": "dco_image", "svType": "String", "value": "images/Starry_Night.jpg" }] } });

2. Update any DCO parameters as needed. 3. Zip and upload ‘HTML5 Workspace Folder’. 4. From the main menu, select Shortcuts > Create New Ad > Create a New Ad. 5. In the Ad Name field, enter the unique name of your ad. 6. From the Ad Format drop-‐down list, select HTML5 Polite Banner. 7. Choose the HTML5 Workspace Folder you uploaded to platform. 8. Choose Default Image. 9. Select Ad Settings > Smart Versioning. 10. Update the Smart Items within the Smart Item List, updating images, text, and variables with your own

text, uploaded image assets and data. • Options listed below.

Sizmek


11. Preview the ad in the Smart Versioning Instant Preview. 12. If this is correct, create a new version by selecting the Create Version button or override the existing

creative by selecting the Override button. 13. Save.

Sizmek


HTML Content Options Smart Item, Description Type, Options

image – id of div that will hold image adkit-html

text – id of div that will hold text adkit-html

image – html content, image tag html

text – html content, text title of image html

dco_rotate – number, degree of rotation String

dco_title – true or false String

Variable Options Smart Item, Description Type, Options

dco_image – image path String

dco_text – text title of image String

dco_rotate – number, degree of rotation String

dco_title – true or false String

Flash is either a registered trademark or trademark of Adobe Systems Incorporated in the United States and/or other countries. Trademark Note: Sizmek, the Sizmek logo, Sizmek Rich Media, Sizmek Mobile, Sizmek Video, Sizmek Channel Connect, Sizmek Workshop, etc. are trademarks and/or registered trademarks of Sizmek. All other trademarks are the property of their respective owners.

Notice The information contained in this document is proprietary and confidential to Sizmek and/or any of its affiliated companies. Disclosure, copying, reproduction, storing or any use of this document or any part thereof without the express prior, written consent of Sizmek or its authorized representatives is strictly prohibited. The information furnished in this document is believed to be accurate and reliable. However no responsibility is assumed by Sizmek for the use of this information. Sizmek reserves the right to make changes to the information included in this document at any time and without notice. Copyright © 2014 Sizmek. All rights reserved.

HTML5 DCO Advanced Block Build Guide

Documents

Transcript of HTML5 DCO Advanced Block Build Guide