RETNINGSLINJER EKSTRA BLADET MOBIL

Transkript

1 RETNINGSLINJER EKSTRA BLADET MOBIL

2 GENERELLE RETNINGSLINJER Annoncøren er ansvarlig for bannermateriale, funktionalitet og design. Bannere, der forstyrrer det redaktionelle indhold eller forårsager tekniske problemer for de besøgende, vil blive fjernet fra siden med det samme. Annoncøren er ansvarlig for at levere bannere, der kan afvikles på alle platforme og i alle browsere. Hvis dette ikke er tilfældet, skal EB Backoffice have besked senest 3 hele arbejdsdage før kampagnestart. Alt bannermateriale skal ligge inden for rammerne af den udpegede bannerplads. Dvs. ingen frem-springende billeder, lag eller popups, som går ud over den specificerede størrelse på banneret. Bannere må ikke ligne redaktionelt indhold i hverken form eller tekst. Vendinger som Læs Mere, Breaking News o.lign. må ikke bruges tekst der omtaler produkter i 3. person må heller ej anvendes. Links skal altid åbne i nyt vindue. Levering af materiale: Bannermaterialet sendes til backoffice_ebn@eb.dk med følgende information: Navn på kunde (i emnefelt ved ) Kampagnenavn Tidspunkt for kampagnestart Evt. bureauordre ID Evt. kontaktperson på mediebureau eller hos kunde Angivelse af format, placering og type Hvor banneret skal linke til (landingpage) Sæt salgskonsulenten cc på mailen

3 REGLER FOR LEVERING Bannermaterialet skal afleveres senest 3 hele arbejdsdage før offentliggørelsen - ved specialformater 4 hele arbejdsdage før offentliggørelse. Hvis en kampagne eksempelvis skal køre mandag morgen, skal materialet være EB Backoffice i hænde senest onsdag morgen. Hvis bannerne er i HTML, skal preview-link medsendes, når materialet afleveres. Hvis bannerne kodes i HTML5 og JavaScript, anbefaler vi følgende Rich Media Editors, der alle opfylder MRAID (Mobile Rich Media Ad Interface Definitions) standarden: Sprout, Celtra, Crisp. Læs mere om MRAID her: Ved forsinket levering kan EB ikke garantere offentliggørelse, og leverandøren kan blive opkrævet et administrationsgebyr. Bannermateriale, som falder uden for rammerne af vægt og format-oversigten, betragtes som specialformater. Hvis specialformater ønskes indrykket, bedes du kontakte EB Backoffice. Vi glæder os over og afprøver gerne nye bannerkoncepter, men skal først kontrollere, at de opfylder vores tekniske og redaktionelle krav. Der er ingen garanti for, at specialformater kan indrykkes. I tilfælde af overvældende negativ bruger-feedback/-forstyrrelse, har EB ret til at gøre indsigelse og dermed få fjernet annoncematerialet, uanset om kampagnen er fuldført eller ej. Annoncøren vil i så fald have ret til at få fuldført kampagnen med andet, accepteret materiale. Kreditnota på kampagnen sendes til kunden, såfremt de ikke ønsker at anvende alternativt materiale.

4 VÆGT OG FORMAT Topbanner: *320x160 Max 60 kb. (inkl. evt. expand) Yderligere bruger interaktion maks. 1 MB gif/png/jpeg/ HTML** (se guidelines nedenfor) Landing page URL Topbanner med expand: *320x x320 / 320x480 Max 60 kb. (inkl. topbanner) Yderligere bruger interaktion maks. 1 MB Lukknap i nederste højre hjørne (40x40) Topbanner med expand og swipe: *Flere billeder i 320x320 / 320x480 Max 60 kb. (inkl. Expand og swipe) Yderligere bruger interaktion maks. 1 MB Lukknap i nederste højre hjørne (40x40) * Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning. **Ved topbanner med expand (og evt. swipe) i HTML, skal expandet kodes således, at det enten skubber siden ned eller lægger sig som et lag oven på siden.

5 VÆGT OG FORMAT Megabanner: *Format: 320x320 Max 60 kb. Yderligere bruger interaktion maks. 1 MB Type: gif/png/jpeg/html (se guidelines nedenfor) Landing page URL Takeover/Interstitial: *Format: 320x320 Max 60 kb. Type: gif/png/jpeg/html** (se guidelines nedenfor) Lukknap i nederste/øverste højre hjørne (40x40) Landing page URL HTML5: Hvis det ønskes kan formatet laves med animation og transparent baggrund. Dette format afvikles med en Frekvens 1/daglig på alle sektioner undtagen Forsiden af Eb.dk Dette format vises i 7 sekunder og lukkes automatisk derefter *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning. **Ved takeover/interstitial i HTML skal banneret kodes således, at det ligger som et lag oven på siden

6 MOBIL-TEMPLATES På ekstrabladet.dk (mobil) har vi mulighed for at booke specielle formater via templates gennem vores adserving-system. Dette giver muligheden for at afvikle specielle formater uden for meget ekstra omkostning hos de kreative bureauer. Top Expand Inkl. evt. video i banner Top Expand med Swipe Inkl. evt. video I banner Interstitial Banner med Swipe Banner med Video Cube

7 MOBIL-TEMPLATES Top Expand (med evt. video) Top Expand er et topbanner, som expander udover det redaktionelle indhold ved klik på topbanneret. Det er muligt at have en video i banneret, hvis dette ønskes. Materialelevering: Topbanner Pixelformat: *320x160 Filformat: jpeg, gif eller png Expand-banner Pixelformat: *320x320/320x480 Filformat: jpeg, gif eller png Vægt på bannerne må max. være 60KB tilsammen (ex. Top 20KB og Expand 40KB) Landingpage URL Evt. impression tracking URL Evt. Video Hvis der skal video i expand-delen, skal der være plads til det i banneret, dvs. der skal være en ramme, hvori vi ved, at videoen skal indsættes. Pixelformat: max resolution 320x480 Filformat: MP4 og/eller WEBM Vægt: max 1 MB Evt. tracking Urler for hhv. Play, Pause eller End video *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

8 MOBIL-TEMPLATES Top Expand med Swipe (inkl. evt. video) Top Expand med Swipe er et topbanner, som expander udover det redaktionelle indhold ved klik på topbanneret. Swipe-funktionen kommer frem i det expandede format, hvor man kan swipe frem og tilbage mellem forskellige budskaber. Materialelevering: Topbanner Pixelformat: *320x160 Filformat: jpeg, gif eller png Expand-bannere Pixelformat: *320x320/320x480 Filformat: jpeg, gif eller png Vægt på bannerne må max. være 60KB tilsammen (ex. Top 10KB og Expand1 30KB, Expand2 30KB, Expand3 30KB) Landingpage URL Evt. impression tracking URL Evt. Video Hvis der skal video i expand-delen, skal der være plads til det i banneret, dvs. der skal være en ramme, hvori vi ved, at videoen skal indsættes. Pixelformat: max resolution 320x480 Filformat: MP4 og/eller WEBM Vægt: max 1 MB Evt. tracking Urler for hhv. Play, Pause eller End video *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

9 MOBIL-TEMPLATES Interstitial Interstitial er et format, der popper frem på siden og ligger udover det redaktionelle indhold. Banneret skal laves med solid baggrund. Banneret vises i 7 sekunder og lukker automatisk derefter. Materialelevering: Interstitial-banner Pixelformat: *300x300/320x320 Filformat: jpeg, gif eller png Vægt: max. 60KB Landingpage URL Evt. impression tracking URL *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

10 MOBIL-TEMPLATES Banner-Swipe Banner med Swipe er et format, hvori man kan swipe frem og tilbage mellem forskellige budskaber. Materialelevering: Banner Pixelformat: *Top (320x160), Mega (320x320) Filformat: jpeg, gif eller png Vægt på bannerne må max. være 60KB tilsammen (ex. Banner1 33KB, Banner2 33KB, Banner3 34KB) Landingpage URL (evt. forskellige - per slide) Evt. impression tracking URL *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

11 MOBIL-TEMPLATES Banner med video Banner med video er et format, hvori man kan klikke på banneret for at afspille video. Materialelevering: Banner Pixelformat: Top *(320x160) eller Mega (320x320) Filformat: jpeg, gif eller png Landingpage URL Evt. impression tracking URL Video Der skal være plads til det i banneret, dvs. der skal være en ramme, hvori vi ved, at videoen skal indsættes. Pixelformat: max resolution 320x480 Filformat: MP4 og/eller WEBM Vægt: max 1 MB Evt. tracking Urler for hhv. Play, Pause eller End video *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

12 MOBIL-TEMPLATES Cube Cube er et format hvori der er 4 sider med forskellige budskaber. Det er et banner som roterer automatisk men man kan ligeledes manuelt swipe frem og tilbage mellem de forskellige budskaber. Materialelevering: 4 x Bannere Pixelformat: Top *(320x160) eller Mega (320x320) Filformat: jpeg, gif eller png Landingpage URL (evt. 4 forskellige - per slide) Evt. impression tracking URL (evt. 4 forskellige - per slide) Evt. Video Hvis der skal video i, skal der være plads til det i banneret, dvs. der skal være en ramme, hvori vi ved, at videoen skal indsættes. Pixelformat: max resolution 320x480 Filformat: MP4 og/eller WEBM Vægt: max 1 MB Evt. tracking Urler for hhv. Play, Pause eller End video *Alle bannere kan leveres i dobbelt op størrelse i forhold til Retina skærme eg. 320x160 = 640x320. Vores banneradserving system vil sørge for at justere størrelsen i forhold til brugerens skærm opløsning.

13 HTML BANNER-GUIDELINES Som udgangspunkt skal bannerne kodes, så de fylder så lidt som muligt, så Ekstra Bladets mobilside også fungerer fornuftigt i brugstilfælde med begrænset netværksforbindelse. Nedenstående punkter er fremgangsmåder til, hvordan man begrænser data load et på telefonen. jquery er allerede inkluderet under ekstrabladet.dk, så der er ingen grund til at inkludere jquery i koden til banneret igen. Vi garanterer, at jquery er opdateret og loadet, inden banneret hentes. Gzip Husk altid at slå gzip til på serveren, som banneret skal hentes fra. På den måde bliver der sendt mindre data over netværket (besparelsen er 50-60%) det gør alting hurtigere og brugeroplevelsen bedre.

14 HTML BANNER-GUIDELINES Javascript/CSS CSS skal namespaces separat fra ekstrabladet.dk vi anbefaler, at man yderst sætter en CSS-klasse efter skabelonen: firmanavn_kampagnenavn_bannernavn, og at alle bannerets CSS-selectors bruger denne som udgangspunkt. Eksempel: HTML: <div class= gevalia_uventedegaester_topslider ></div> CSS:.gevalia_uventedegaester_topslider h2 { }. gevalia_uventedegaester_topslider span { } På den måde er der vandtætte skodder imellem ekstrabladet.dks CSS og bannerets. JavaScript i banneret skal holdes inden for en enkelt funktions scope, og alle variabler skal deklareres med var. Eksempel: JAVASCRIPT: (function(){ var a = 2; }()); (Læs mere om denne måde at gøre tingene på her: På denne måde er der ingen mulighed for JavaScript-kode, der karambolerer med ekstrabladet.dks JavaScript. Er dette komplet umuligt at honorere, skal alle metodenavne og variabelnavne begynde med firmanavn_kampagnenavn_bannernavn. Animation. På de mobile platforme kan man forbedre kvaliteten af animationer betragteligt ved at lave dem i CSS3 i stedet for JavaScript. Kort fortalt udnytter CSS3-transformationerne telefonernes indbyggede grafik-processorer til at drive animationen, hvilket er langt hurtigere end at bruge hoved-cpu en, og det giver langt mere flydende animation. Læs mere her:

15 HTML BANNER-GUIDELINES HTTP Minimér antallet af HTTP-kald (roundtrips) ved at samle HTML, CSS og JavaScript i én fil jo færre HTTP-kald desto bedre performance. Cache-headers på serveren, som banneret serveres fra, skal sættes til at løbe hele kampagneperioden ud. Se mere her: ( zindex guidelines til HTML og JavaScript bannere Ved HTML- og JavaScript-bannere skal bannerets zindex altid være højere end mobilsitets. Det anbefales at sætte zindex til >

16 HTML BANNER-GUIDELINES HTML5 bannere der skal understøttes af Adtech skal indeholde følgende: Sæt alle nødvendige scripts i index.html (Roden af mappen). Sæt alle filer I roden af mappen. Må ikke indeholde en mappestruktur. Navngiv id, klasser, funktioner og variabler, så de passer med elementet. Anvend Adserver variabel (_ADCLICK_)* indenfor index.html. Adserver vil ikke erstatte variablerne i js. filer, yderligere HTMLfiler eller andre filtyper. Adserver variabler bruges til eksempelvis at tælle klik eller definere den korrekte sti til billeder. *HTML banner kode eksempel med Adserver variabel i index.html: <a href="_adclick_http:// target="_blank"> <img src = "_ ADPATH_300x250_blau.jpg" width = "300" height = "250" alt = "ADTECH" /> </ a >

17 HTML BANNER-GUIDELINES En anden mulighed er, at hoste alle filerne på en ftp server og angive en iframe: Indsæt Clicktag i index.html før Adserver variabel virker i iframen* Eksempel på iframe med Adserver variable: <iframe src=" style="border:0;overflow:hidden;width:xpx;height:xpx;"></iframe> *Clicktag: HTML5 Edge Animate Eksempel på Javascript kode der opfanger Adserver variable "_ADCLICK_" i iframen. (Indsættes efter sidste <div>) <script type="text/javascript"> var gotourl = location.href.split("?click=")[1]; var foo = document.getelementbyid('stage'); if (typeof foo.addeventlistener!== 'undefined') { foo.addeventlistener( 'click', clickhandler, false ); } else { foo.attachevent( 'click', clickhandler ); } function clickhandler() { window.open(gotourl); } </script>

18 Klikmåling i 3. part HTML-banner Når et banner er booket som 3. part HTML, i en iframe skal links i banneret prefixes med et adtech clicktag. Clicktagget genereres ved at _ADCLICK_ tilføjes som parameter til iframe src en. Eksempelvis: <iframe src=" I bannerkoden skal parameteren så prefixes på links. Eksempelvis: var gotourl = location.href.split("?clicktag=")[1] + " ditbanner.onclick = function() { window.open(gotourl);

19 Polite Load kodning i HTML-banner Polite Load Heavy rich media-bannere kan tynge loadtiden på sitet betydeligt, og som en løsning på dette, anbefaler vi, at der bruges polite-bannere. Polite-bannere tillader, at banneret vejer mere end normalt, fordi image,filen i banneret erstatter originalbanneret i den tid, det tager for sitet at loade færdigt. Først derefter loader den tunge swf-fil. På mobil er det tilladt at hente yderligere 100 KB udover de tilladte 60KB. For at bygge et Polite banner i html5 bruges nedenstående kode: <!DOCTYPE html> <html> <head> <script src=" </head> <body> <script> function pageloadhandler() { alert("the host page has fully loaded!") } if (ADTECH.isPageLoaded()) { pageloadhandler(); } else { ADTECH.addEventListener(com.adtech.RichMediaEvent.PAGE_LOAD, pageloadhandler); } </script> </body> </html>

20 Interstitial kodning i HTML-banner Eksempel på kodning af Interstitial i HTML på engelsk: The easiest way of making an interstitial designed layer model based on HTML elements is to make something like below. <div id="absolute"> <div id="relative"> <div id="creative"> <!-- creative content here --> </div> </div> </div> Now, lets say that the creative has the dimensions 500x500 to make things easier. We need to calculate half of width and height to make the positioning centered later on. Because of the way I usually solve the centering, it will be a lot easier to do it when calculating as I will show below. We start of by centering the container named "absolute" with the following CSS code. #absolute { display: block; width: 500px; height: 500px; position: absolute; top: 50%; left: 50%; }

21 The code above will make the creative centered in a way, but from the centered area, it will reach out 500 pixels down and to the right - incorrect centering in other words. So, what we need to do it to add a negative value with help of margin to solve the issue. #absolute { display: block; width: 500px; height: 500px; position: absolute; top: 50%; left: 50%; margin-top: -250px; /* half height */ margin-left: -250px; /* half width */ } That being said, we now only need to make the element named "relative" working as the outer container for the creative element. The code below should be doing the trick. #relative { display: block; width: 500px; height: 500px; position: relative; } The client can make their own custom CSS-values for the element named "creative" since that makes more sense.