Download presentation
Presentation is loading. Please wait.
1
Dynamic Creative Optimization with Dynamic Creative Optimization with
Sizmek HTML5 DCO
2
Thanks @Scott Ries for the initial deck & advanced workspace!
Agenda What is HTML5 DCO? Building HTML5 DCO ads Hands-on examples Where to get information Near term roadmap Next Steps Ries for the initial deck & advanced workspace!
3
HTML5 DCO (Dynamic Creative
What is HTML5 DCO (Dynamic Creative Optimization)?
4
Your client has a thousand products
5
and wants to feature all of them
and wants you to feature all of them and wants to feature all of them
6
with all possible colour, pricing and feature details
$19,990 $23,850 $14,593 $16,990 with all the possible color, pricing and feature details $14,593 with all possible colour, pricing and feature details
7
$19,990 $23,850 $14,593 $16,990 all in one ad. $14,593 all in one ad.
8
Why HTML5?
9
Because we need to reach people where they are
$19,990 $23,850 $14,593 $16,990 Because we need to reach people where they are... $14,593 Because we need to reach people where they are
10
and increasingly that means mobile users
$19,990 $23,850 $14,593 $16,990 and increasingly that means mobile users… $14,593 and increasingly that means mobile users
11
and other HTML5 enabled devices
$19,990 $23,850 $14,593 $16,990 and other HTML5 enabled devices $14,593 and other HTML5 enabled devices
12
How to build Sizmek HTML5 DCO ads
13
HTML5 DCO – Files Involved
index.html – main ad creative file config.js –JSON file used for AdKit configuration. Contains DCO schema
14
What’s AdKit? Sizmek’s Creative AdKit - a new tool for ad developers
JS library with ad-related functionalities for quick HTML5 ad dev Current functionality - DCO (Smart Versioning) More functionality planned for AdKit in coming months
15
Adding DCO to Your Ad in 5 Steps
Add AdKit references to your index.html file Define your ad’s DCO schema using config.js Use DCO elements in your ad code Zip your workspace and upload to the platform Populate your ad with versions
16
Use any of the tools you would normally build HTML5 projects with
17
AdKit References Remove EBLoader reference
Replace with AdKit reference Note: AdKit references EBLoader, retaining all EBLoader functionality <head> <script type="text/javascript" src=" </head> <head> <script type="text/javascript“ src=" ys.com/BurstingScript/adKit/adkit.js"></script> </head>
18
AdKit References (2) If you’ve been waiting for EBLoader to initialize
You should now be waiting for AdKit, like this: if (!EB.isInitialized()){ EB.addEventListener(EBG.EventName.EB_INITIALIZED, startAd); }else{ startAd(); } adkit.onReady(startAd);
19
Your DCO Schema - 2 Types of Data Elements
Variables HTML Components Your DCO schema will be created on the platform when you upload your workspace These Variable and HTML components will become Dynamic – their values will be populated by versions on the platform
20
Variables Variables are used by the ad’s JavaScript code
Retrieved via the AdKit API
21
Variable Type (variable)
Variables Define a DCO variable in config.js Using the variable in your index.html code define({ "SV": { "svData": [ { "svKey": "varName", "svType": “variable", "value": "War and Peace" } ] } }); Variable Name Variable Type (variable) Default Value function handleSVData(data) { var myData = adkit.getSVData("varName"); // your JS code which uses the variable value } adkit.onReady(handleSVData);
22
A dynamic html element will provide the values for the DOM element
HTML Components HTML code fragments They populate <div> tags in the ad’s index.html file with dynamic data Associate a DOM element (on index.html) with an AdKit element (in config.js) A dynamic html element will provide the values for the DOM element
23
index.html config.js <div id="BookPrice" style="width: 100%; height: 100%; layout: absolute; "></div> The <div> “BookPrice” is updated with the value of the dynamic element “Price” 4 define( { "ITEMS": [ { "id": "BookPrice", "type": "adkit-html", "svkey": "Price" } ], "SV": { "svData": [ { "svKey": "Price", "svType": "html", "value": "<b>7.99</b>" } ] } ); Map the “BookPrice” div element above to an AdKit html type named “BookPrice” 1 Link it to an SV html element named “Price” 2 Create an SV html element named “Price” 3
24
Zip your files and upload workspace
25
Your Master Ad is ready
26
Hands On Example – Simple Workspace
“Hello World” – HTML5 Polite
27
Hands On Example – More Complex Workspace
Custom Dev Template – HTML5 Single Expandable
28
Hands On Example – Automotive
(By Scott Ries) Here
29
Getting Info/Help This training deck + session recording will be on Sizmek Source Build guide here and on Sizmek Source: Sizmek University course – forthcoming Who to contact Support – Almog Almado Product Marketing – Jaime Singson Product Management – Tal Rayman
30
Near-term Roadmap Image Element Video Element Update Workspace
Now – DCO data (versions) is overwritten when updating (like Flash) Q3 – If no DCO schema changes Keep DCO data Q4 – Handle additions/deletions to DCO schema Ad Factory DCO
31
Ad Factory DCO Mark an item as Smart… and that’s it
32
Versioning your Sizmek HTML5 DCO ads
Introduce the Platform…SizmekMDX…previously Sizmek
33
At this stage you can chose to version your ads using either Excel sheets
34
At this stage you can chose to version your ads using either Excel sheets
35
or using an XML data feed
36
or using an XML data feed
37
to create as many versions as needed
38
and get a relevant message to your customer where they are.
and get a relevant message to your customers where they are. and get a relevant message to your customer where they are.
39
Pricing HTML5 pricing is structured similarly to its Standard/Rich Media Flash counterparts: a premium CPM applied on top of Ad Serving
40
Next Steps HTML5 DCO is expected to bring in significant Q4 revenue
Show this to customers, they love it! FlashTalking/PointRoll/AdForm/Celtra have dynamic creative on HTML5 but only unscalable Single Versioning, not Mass Versioning. This is a new, strong selling point for Mobile ads Talk to us – this is a new feature, lets us know if you run into any issues Practice! Using your own workspaces Using our samples (available on Source)
41
Product Manager – Mobile
Thank You! Tal Rayman Product Manager – Mobile Sizmek HTML5 DCO
Similar presentations
