HTML5: Publishers point of view

HTML5: publisher point of view
General
§  Device –  Mostly mobile §  Adver2sers: –  Top adver2ser: 20th Century Fox by Produc2ons –  Started this year: Lidl by BBDO §  Findings De Persgroep adver2sing – 
– 
– 
– 
– 
– 
Engagement / crea2vity higher CTR not always beCer Ideal for branding User experience +1 ! Weight Browser compa2bility –  Firefox, <IE9 HTML5 1. Ways To Deliver 2.  Tes2ng 3.  Learnings 4.  Best Prac2ces Receiving material
Ways to deliver: §  Tags † MediaMind / Adform §  Hard material † ZIP file with all the files (images, index, js,…) §  URL † Link to the page hosted on client side How to traffic tags
1.  Upload as Third Party crea2ve 2.  Inser2ng DFP macro’s <script src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?
cn=rsb&c=28&pli=13301815&PluID=0&w=320&h=250&ncu=$$%%CLICK_URL_UNESC%%$
$&ord=%%CACHEBUSTER%%&ucm=true&mb=1"></script>
<noscript>
<a href="%%CLICK_URL_UNESC%%http://bs.serving-sys.com/BurstingPipe/adServer.bs?
cn=brd&FlightID=13301815&Page=&PluID=0&Pos=1511498480&mb=1" target="_blank"><img
src="http://bs.serving-sys.com/BurstingPipe/adServer.bs?
cn=bsr&FlightID=13301815&Page=&PluID=0&Pos=1511498480&mb=1" border=0 width=320
height=250></a>
</noscript>
3.  Tes2ng 4.  Live How to traffic Tags
tags
1.  Upload files to internal server
2.  Creating URL to index page
†
How to traffic tags
3.  Creating click trackers in DFP and adapt the clickTag
in the material
h"p://pubads.g.doubleclick.net/gampad/clk?id=215052026&iu= 4.  Upload to DFP as iFrame
<iframe name="adv_fox" id="adv_fox" src="http://static2.hln.be/static/nmc/adv/
banners/Fox/Fox_FFTM_HLN-DM_Mobile_320x250-Video/index.html" style="width:
320px; height:250px;" frameborder="0" scrolling="no"></iframe>
5.  Testing
6.  Live
How to traffic tags
1.  Upload to DFP in iFrame
<iframe name="ardennes_scroller" id="ardennes_scroller" src="h"p://www.ardennes-­‐
etape.be/displayPromoloop.do?media=dm" style="width:300px; height:600px;" frameborder="0" scrolling="no"></iframe> Only one clickTag <a href="%%CLICK_URL_ESC%%[%ClickthroughURL%]" target="_blank"> <div style="width:[%Width%]px; height:[%Height%]px; posi2on:absolute;z-­‐index:[%ZIndex
%]"></div></a>
2.  Testing
3.  Live
HTML5 1.  Ways To Deliver 2. TesHng 3.  Learnings 4.  Best Prac2ces Testing
§  ClickTag
–  Banner clickable?
–  Clicks measurable?
–  Clicks counted correctly?
§  Lay-out
– 
– 
– 
– 
Dimensions OK?
Does the banner function properly?
User friendly?
Correct spelling?
§  Setup
–  No interference with site code?
–  Behavior on site?
HTML5 1.  Ways To Deliver 2.  Tes2ng 3. Learnings 4.  Best Prac2ces Learnings
§  Tags –  Click measuring can be an issue –  Responsive † biggest advantage of HTML5 §  Hard Material – 
– 
– 
– 
More 2me consuming Error rate higher Weight has to be limited ClickTags: §  1 ClickTag † transparent DIV §  2 ClickTags † clicktrackers manually inserted §  iFrame –  Sufficient capacity at client side for delivering the banner –  Measuring mul2 clicktags not possible at Publisher side –  Responsibility for good delivery at client side HTML5 1.  Ways To Deliver 2.  Tes2ng 3.  Learnings 4. Best PracHces Delivery best practices
§  Tags –  Publisher Paid §  Mobile §  Desktop when use of Rich Media † for s2mula2ng crea2vity §  Responsive –  DeMorgen.be is responsive –  Advantage of HTML5 –  Banners can be served out of mul2ple ad slots §  Material 5 workdays before start of the campaign –  Tes2ng –  Handling Examples
fr