Spesifikasjoner for HTML-annonser på Amedias publikasjoner


Dette er spesifikasjonen for HTML-annonser på Amedias publikasjoner. Den dekker både annonser for desktop- og mobilutgaven.



1. Formater og størrelser

Hos oss kan dere annonsere med vanlige display-annonser, rich media, native ads, digitale bilag innholdsmarkedsføring med mer.

Alle formater på mobil, tablet og desktop må være under 100kB initial load.

Du kan måle størrelsen på ditt annonsemateriell ved å lage en zip-fil som inkluderer alle elementer som skal være med, også eksterne ressurser som f.eks. JavaScript-bibliotek. Husk å bruke en flat filstruktur. Beregning av maksgrensen skal inkludere alle elementer som annonsen benytter seg av: HTML, bildefiler, CSS og JavaScript.

Unntak

  • Nytt innhold kan lastes etter at en bruker har interagert med annonsen (for eksempel en video). Mouseover regnes ikke som en interaksjon.
  • Det er tillatt å bruke polite loading, så lenge man bruker en “polite banner” til initial load. Denne kan da bli byttet ut med rich media content når siden er ferdig lastet. For mer informasjon om polite loading:  Polite load ad (Adform) 
  • Siste versjon av jQuery (se avsnittet JavaScript og jQuery).


2. JavaScript og jQuery

Du kan bruke jQuery-biblioteket uten å regne det med i den totale størrelsen, så fremt følgende krav oppfylles:

  • Du benytter nyeste tilgjengelige versjon av jQuery.
  • Du benytter  Google CDN 
  • Du benytter den komprimerte versjonen av biblioteket (jquery.min.js)
Kodesnutten for å importere jQuery-biblioteket kan da se slik ut for versjon 3.2.1:

<script src="//ajax.googleapis.com/ajax/libs/jquery/3.2.1/jquery.min.js"> </script>


3. Rich media, video og brukerinteraksjoner



"Rich media"-krav

  • Det er ikke tillatt å benytte innebygd geolokasjon i annonsen.
  • Animasjoner før brukerinteraksjon må gjøres med CSS.


Lyd

  • Avspilling av lyd må aktiveres via brukerinteraksjon (klikk/touch).
  • Hvis det er lyd i annonsen, må det også implementeres mulighet for å skru av lyden.


Video

Generelt

  • Må inkludere en play/pause knapp
  • Autoplay tillates ikke på mobil eller i toppbanner på desktop.
  • Videoannonser som skal loope automatisk, må leveres som HTML.
  • Generelle kB-grenser før brukerinteraksjon gjelder også her.
Før brukerinteraksjon

  • Mute som default. Lyd må aktiveres med klikk.
  • Initial load for hele annonsen før brukerinteraksjon bør holdes så lav som mulig ned mot 100kb, maks 500kb. Jo mindre annonsen er, jo raskere lastes den og det er større mulighet for at brukeren ser annonsen.
  • For å få annonsen så rask som mulig kan en f.eks. ha en preview-versjon av videoen på 5-7 sekunder med autoplay. Og når brukeren klikker spilles hele videoen.
Etter brukerinteraksjon

  • Full versjon av videoen lastes eller streames. Maks 2MB.
  • Anbefalt lengde 30 sek. Maks lengde ett minutt.
  • Når videoen hostes hos annonsør må man være forberedt på den ekstra trafikken dette vil generere og ta høyde for dette.


4. Optimalisering av materiell

På mobile plattformer er det helt essensielt at vi leverer både annonsene og det redaksjonelle innholdet så raskt som mulig. Flere undersøkelser viser at ytelsen har direkte innflytelse på visninger av annonsen, konverteringer og hvordan merkevaren blir oppfattet.

En typisk HTML-side inkluderer gjerne flere eksterne CSS- og JavaScript-filer og gjør dette ved å linke til disse filene i koden. Disse filene lastes ned til mobilen via et https-request (kall) per fil. For å ivareta god ytelse så er det viktig å ha et lavt antall requests.

Følgende krav må derfor imøtekommes:

  • HTML-annonsen skal bestå av en HTML-fil som inkluderer all CSS som er nødvendig for å kjøre annonsen. Det betyr at all CSS skal være inline.
  • Maksimum to request til JavaScript-bibliotek er tillatt (for eksempel en lokal JavaScript-fil og ett eksternt rammeverk). Alle filhenvisninger må ligge i full URL. Hvis vi skal hoste filene på server hos oss må alle filhenvisningene være til root (flat filstruktur). Eventuell mappestruktur forsvinner når vi laster opp filene i vårt annonsestyringssystem.
  • HTML-annonser må være SSL-compliant (HTTPS).


Ytelse - nettverkstrafikk

Selv om vi har en begrensning på størrelsen på reklamen, så anbefaler vi å uansett holde nettverkstrafikken så lav som mulig. Jo raskere en reklame kan leveres over nettverket, jo mer sannsynlig er det at den vises til en mobil bruker før det er for sent.

De viktigste anbefalingene våre for å få til en best mulig opplevelse på dårlige nettverk:

  • Hold filstørrelsen på alle assets så lav som mulig (JavaScript, CSS og ikke minst bilder).
  • Begrens antall kall til det minimale. Disse køes og tar tid å gjennomføre.
  • Nettverkstrafikk skal kun skje ved initialisering av materiell eller ved direkte brukerinteraksjon med annonsen.
  • Benytt media queries og server skalerte bilder til forskjellige skjermstørrelser.
  • Benytt populære CDN (Google) for JavaScript-biblioteker – da er sjansen størst for at noen av filene allerede er lagret lokalt på enheten.
  • Benytt minify på HTML, CSS og JavaScript.


Ytelse - prosessering

Å begrense prosesseringstid av annonsen handler mye om å redusere bruken av CPU på enheten.

Her er noen tips på veien:

  • Bruk ukomplisert JavaScript og unngå nøstede løkker så mye som mulig
  • Benytt GPU hvor mulig.
  • Unngå generiske CSS-regler. Benytt id og klasser så mye som mulig.
  • Benytt inline CSS på taggen i dokumentet.
  • Spesifiser bildestørrelser i <img> taggen.


Browser policy for produksjon av HTML

Ved produksjon av nettsider og bannerannonser, er det vanskelig å unngå variasjoner i hvordan forskjellige nettleserne og enheter, tegner ut materiellet. Det er også visse funksjoner og features som ikke støttes av alle nettlesere på markedet.

Det er derfor viktig å teste ditt annonsemateriell i forskjellige nettlesere, operativsystem og enheter (mobiler, nettbrett etc.) for å sikre at alt fungerer som det skal. Se liste over nettlesere det bør testes i under.

Title
Title
Desktop
Mobil og tablet
Internet Explorer 11 og Edge
Safari 7, 8, 9 og 10
Safari 9 og 10+
Chrome (nyeste, 44, 38, 34)
Opera v 37+
Facebook for iPhone
Firefox v 49+
Facebook for Android
Chrome v 54+
Internet Explorer 11 og Edge
Publisisten kan ikke stå til ansvar for annonsemateriell som ikke fungerer som det skal. Det er kunde, byrå eller produsent selv, som er ansvarlig for å teste at egenprodusert materiell fungerer tilfredsstillende i alle browsere. Hvis du er i tvil, kan test-tags eller materiell, sendes til  traffic.marked@amedia.no.  Vi har også mulighet til å bistå med produksjon.



Nyttige verktøy for produksjon og optimalisering av annonsemateriell

Det finnes mange gratis verktøy for design og optimalisering av annonsemateriell. Her er noen anbefalinger som kan benyttes for å sikre best mulig leveranse og ytelse av både annonser og nettstedet.

Optimalisering av bilder og video:

  •  tinypng.com  - Nettbasert komprimering og optimalisering av PNG- og JPG-filer.
  •  jpeg.io  - Nettbasert komprimering og konvertering av alle typer bildefiler til JPG.
  •  pngmini.com  - Applikasjon for å redusere filstørrelse på png-filer (kun for Mac).
  •  handbrake.fr  - Applikasjon for å komprimere og konvertere video (Mac + Windows).
HTML og CSS:

  •  caniuse.com  - Sjekk støtte for HTML/CSS (browsersupport).
  •  Visual Studio Code  - Populær og gratis kodeeditor med mange muligheter.
  •  Brackets  - En annen gratis tekst-editor med mange gode add-ons. (Mac + Windows).
Produksjon og optimalisering:

  •  Google Web Designer  - Enkelt verktøy for å bygge rich media-annonser (Mac + Windows).
  •  Pagespeed Insight  - Sjekk hvor godt optimalisert annonsemateriellet ditt er! Jo høyere tall jo bedre! Gir også tilbakemelding på hva du kan gjøre for bedre ytelse på annonsen.
  •  Browserstack.com  - Tjeneste for å teste annonsemateriellet i forskjellige browsere, operativsystemer og enheter.


5. Levering og hosting av materiell

Amedia benytter DoubleClick for Publishers (DFP) fra Google som annonseserver. Materiellet kan hovedsakelig leveres på tre ulike måter:



Hosting av materiell i DFP

Levering

Materiellet leveres som en zip-fil med flat filstruktur. Vi kan ikke ta imot zip-filer på epost pga interne sikkerhetsrutiner, og den må sendes f.eks. med  WeTransfer  til  traffic.marked@amedia.no. 
NB! Husk at alle annonser, ressurser og tracking pixels må leveres via SSL (HTTPS).

Klikkteller

For at DFP skal kjenne igjen klikktelleren må den være lett å lese - altså ingen minifiering eller obfuskering. Komprimer gjerne resten av koden og andre filer. Alle klikk skal åpne et nytt vindu eller fane. NB! Dobbeltsjekk at materiellet ditt er klikkbart!

Her er et enkelt eksempel på en clickTag i et HTML-dokument. Link til en annen implementasjonsmetode finner du under relevant dokumentasjon.

<html>
  <head>
    <meta name="ad.size" content="width=320,height=250">
    <script type="text/javascript">
      var clickTag = "http://www.google.com"; 
    </script>
  </head>
  <body>
  <!-- The rest of your creative code goes here -->
    <a href="javascript:window.open(window.clickTag)">
      <img src="images/banner.png">
    </a>
  </body>
</html>
NB! Info ang. klikktelling i Google Web Designer (GWD)
Dersom du bruker GWD for å lage annonsen må du legge til en Tap Area component og sette opp en Touch/Click event. Se linker for GWD under relevant dokumentasjon lenger ned.

Annonsestørrelse (Size-meta tag)

Til forskjell fra bilder og video har ikke et HTML-dokument noen satt størrelse.
Derfor bruker vi size-meta tag, for å sikre at din annonse vises i riktig størrelse. Her er et eksempel for en annonse som er 320x250px:

<meta name="ad.size" content="width=320,height=250">
Relevant dokumentasjon:

  •  HTML5 requirements (Google) 
  •  How to prepare HTML5 ad with click tracking for DoubleClick for Publishers 
  •  GWD Tap Area setup tips 
  •  GWD Tap Area Component dokumentasjon 


Hosting av materiell hos kunde

Levering

Leveres som iframe, f.eks slik:

<iframe src="https://URL_TIL_ANNONSEN?clickTag=%%CLICK_URL_ESC%%" width="%%WIDTH%%" height="%%HEIGHT%%" frameborder="0" border="0" marginwidth="0" marginheight="0" scrolling="no"></iframe>
NB! Husk at alle annonser, ressurser og tracking pixels må leveres via SSL (HTTPS).

Klikktelling

Som vist i koden over kan det sendes over en click macro via parameteren clickTag. Den kan plukkes opp av annonsen og prefixes til utgående lenker. Da vil det bli registrert klikk i DFP. Tips til hvordan dette kan implementeres i annonsen finnes i avsnitt 3.10.1 "The Clickthrough" i dokumentet under relevant dokumentasjon.

Relevant dokumentasjon:

  •  HTML5 for Digital Advertising (PDF) 


Levering av materiell som tredjeparts script

Levering

Script-tag og ev. tracking pixel. NB! Husk at alle annonser, ressurser og tracking pixels må leveres via SSL (HTTPS).

Macroer

DFP kjenner igjen taggene fra de fleste leverandører og kan sette inn nødvendige macroer automatisk. Se liste med støttede leverandører under. Dersom leverandøren har spesielle behov må AdOps få beskjed om hvor de ulike macroene skal settes inn eller få et script med ferdig satt inn macroer. Se liste over alle macroer under, de vanligste er %%CACHEBUSTER%% og %%CLICK_URL_ESC%%

Relevant dokumentasjon:

  •  Liste med tredjeparts leveradører (Google) 
  •  DFP macros (Google) 
  •  Tracking pixels (Google) 


6. Andre begrensninger

  • I november 2015 bestemte Adobe at Edge Animate ikke lenger skulle utvikles aktivt. Vi tar derfor ikke imot materiell som er laget i Adobe Edge Animate.
  • Inline SVG i HTML-annonser støttes ikke per dags dato.