PRODUCT
Follow

Overview

Introduction and Screenshots

Sizmek’s Dynamic Creative allows advertisers to run personalized multi-market prospecting and retargeting campaigns. The ready-to-use Dynamic Creative Templates help make this more accessible to creative agencies who are taking their initial steps into Dynamic Creative, and are happy to use a pre-defined template to get them started. They can also be used by Trading Desks and other advertisers who want to use Dynamic Creative, but don’t have the benefit of a Creative Shop or Developer.

By utilizing Sizmek’s Dynamic Creative, ad templates can house different images, background colors, copy alignments and more. 

For campaigns involving large numbers of versions, it is advised that Mass Versioning be used instead of Single Versioning. This option allows the use of versions via Excel or XML Feed.

This build guide covers the Auto and Apparel templates and comes in the most common size in the Exchange environment: 300x250, 728x90, and 160x600. While these templates demonstrate specific verticals (Auto, Apparel), they are not limited to these verticals and can be used by advertisers outside of these verticals.

For the Auto template, shown below, the client can use Smart Items to quickly change out dealer logos, vehicle images, three lines of text for sales price and description, text alignment and CTA text and color.  

 dco3.jpgdco4.jpg

For the Apparel template, shown below, the client can use Smart Items to quickly change out apparel images such as clothing and accessories, two to three lines of text for sales price and description, text alignment and color and CTA text and color. 

 dco1.jpgdco2.jpg

Demos/Downloads

The following table provides links to the template and demo for the Dynamic Creative Templates ad feature.

Template

Dynamic_Creative_Templates_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 DCO Templates Feature includes one HTML5 Workspace built using the HTML5 Polite Banner. 

Included Workspace Files

Apparel 160x600

File Name 

Description

config.js

Sizmek Ad Configuration file

images/bag1.jpg

Demo product image

images/logo.gif

Demo logo image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOApparelTemplate160x600.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

Apparel 300x250

File Name 

Description

config.js

Sizmek Ad Configuration file

images/bag.png

Demo product image

images/logo.gif

Demo logo image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOApparelTemplate300x250.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

Apparel 728x90

File Name 

Description

config.js

Sizmek Ad Configuration file

images/bag1.jpg

Demo product image

images/logo.gif

Demo logo image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOApparelTemplate728x90.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

Auto 160x600

File Name 

Description

config.js

Sizmek Ad Configuration file

images/logo.png

Demo logo image

images/Sedan_black.png

Demo product image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOAutoTemplate160x600.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

Auto 300x250

File Name 

Description

config.js

Sizmek Ad Configuration file

images/logo_ca.png

Demo logo image

images/SUV_red.png

Demo product image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOAutoTemplate300x250.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

Auto 728x90

File Name 

Description

config.js

Sizmek Ad Configuration file

images/logo.png

Demo logo image

images/Sedan_black.png

Demo product image

images/standalone.jpg

Demo Backup image image

index.html

Demo HTML index file

scripts/DCOAutoTemplate728x90.js

Ad Feature Javascript file

styles/styles.css

Demo Stylesheet

  

Implementing the Ad Feature

Getting Started

The DCO Templates Ad Feature uses the AdKit Custom Script (included below) to pull DCO variables and HTML Content from the platform. The Adkit Custom Script must be added to the Workspace index file for the DCO files to work properly.

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

The AdKit script also requires the addition of the config.js file (this can be found in the Workspace folder in the template provided). This config.js file is used to list all necessary Smart Versioning Variables and the HTML elements that they link to. 

There are two ways a developer can update the Dynamic Creative content, by either editing the dynamic data components in the config.js file, or by using the API. In the template provided both methods are used to load an image file and text, alter the image rotation, and affect the visibility of text. The config.js file uses the adkit-html and adkit-image feature to automatically map Smart Variables to divs in your creative while the creative script uses the adKit getSVData API to update the image rotation and text visibility. 

Configure the Dynamic Data Components in the config.js File

Open the config.js file located in the root of the Workspace folder and edit the smart versioning variable as needed to modify your creative. In the example below we show an Items object and a svData object that includes the following Smart Versioning Item:

 


    define({
      "ITEMS":[
        {
    	    "id" : "dco_image",
            "type" : "adkit-image",
            "svKey" : "image"
		}],
    "SV": {
          "svData": [{
             "svKey": "image",
             "svType": "Image",
             "value": "images/Sedan_Black.jpg"
          }]
      }
   });

  • The ITEMS section
    This section designates tags from the ad’s index.html file, telling AdKit that they will be populated with Dynamic Creative data.
    In the above example:
    • An AdKit item with the id "dco_image" is defined. This item, therefore, correlates to a tag with an ID of "dco_image" inside index.html file.
    • The "dco_image" item is of an Image type ("adkit-image"). This item is linked to a Dynamic Creative element with the svKey (Dynamic Creative Key) "image".
  • The SV section
    This section defines the Dynamic Creative elements. An element named "image" is of an "Image" type, with the default value of "images/Starry_Night.jpg" is defined. 

Configuring Dynamic Creative Variables Using the API

Dynamic Creative variables can be retrieved using the AdKit API. In the example config.js file below, we have one SV svData Object of the type Image with the value "images/Starry_Night.jpg".  


    define({
    "SV": {
          "svData": [{
             "svKey": "image",
             "svType": "Image",
             "value": "images/Sedan_Black.jpg"
          }]
      }
   });

 

Once you have your Smart Versioning data established in the config object, follow the steps below to retrieve this Smart Versioning Variable using the Adkit javascript getSVData API.


    <script>
        function handleSVData(data) {
            var myData = adkit.getSVData("image");
            // your JS code which uses the variable value
        }

        adkit.onReady(handleSVData);
    </script>

 

For more information on how to add Dynamic Creative Functionality to your Workspace see the following Help Article, see this article. 

 

Apparel Smart Items

Name  Description Type Options
headline_1

First line of text

Please note that depending on the font-size and number of characters entered, the text in the headline fields may overlap. 

Variable Text
headline_2 Second line of text Variable Text
headline_3 Third line of text Variable  Text
headline_style Styles for headlines, separated by commas. Ex. ex. 'black,28px,black,22px,black,20px' Variable { font color, font size }
image main image file path Image image file path
logo logo image file path Image image file path
align text alignment Variable

160x600 – bottomcenter, bottomright, bottomleft, left, right, center

300x250 – left, right, center

728x90 – right, rightleft, rightcenter, left, leftright, leftcenter
ctaColor color of the call to action button Variable

hex color

Standalone if set to true, ad will load backup image instead of individual Smart Items Variable

true/false

Auto Smart Items

Name  Description Type Options
headline_1

First line of text

Please note that depending on the font-size and number of characters entered, the text in the headline fields may overlap. 

Variable Text
headline_2 Second line of text Variable Text
headline_3 Third line of text Variable  Text
headline_style Styles for headlines, separated by commas. Ex. ex. 'black,28px,black,22px,black,20px' Variable { font color, font size }
image main image file path Image image file path
logo logo image file path Image image file path
align text alignment Variable

160x600 – bottomcenter, bottomright, bottomleft, left, right, center

300x250 – left, right, center

728x90 – right, rightleft, rightcenter, left, leftright, leftcenter
ctaColor color of the call to action button Variable

hex color

Standalone if set to true, ad will load backup image instead of individual Smart Items Variable

true/false

disclaimer text for disclaimer button Variable

text

copyright text for the disclaimer div overlay Variable text
txtColor text color for the call to action Variable  hex color
border if true, shows a border Variable true/false
bgColor color of background Variable  hex color

  

Setting up the DCO Templates Ad Feature in the Sizmek Platforms

Sizmek MDX2.0 Platform Setup

Archive the DCO Advanced 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 into 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. Save
  10. Select Setup > Smart Versioning and edit Smart Items as needed.
  11. 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. Save
  10. Click on Versions, select your ad and under Dynamics Elements, edit the variables as needed. 
  11. Save

Known Issues

  • Depending on the font-size and number of characters entered, the text in the headline Smart Items may overlap. 
  • Detail rollover functionality will not work on mobile devices

Change Log 

November 15, 2017

  • 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?
1 out of 1 found this helpful
Have more questions? Submit a request

Comments