HTML guidelines


Formater og størrelser:

  • Maks kB-grense: 100kB på mobil og 100kB på desktop/tablet (initial load). KB grensen varierer fra forskjellige format, les mer om spesifikasjoner for displayannonsering her
  • Materiellet sendes som zip-fil (flat filstruktur).
  • Maks 15 ressurser per annonse.

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, CSS, bildefiler og JavaScript. Det finnes kun to unntak:

  • Nytt innhold kan lastes etter bruker-interkasjon (for eksempel lasting av video). Mouseover regnes ikke som en interaksjon.
  • Det er tillatt å bruke polite loading. Denne kan da bli byttet ut med rich media content når siden er ferdig lastet. For mer informasjon om polite loading:
  • Det er tillatt å benytte siste versjon av jQuery så lenge denne hentes fra Google CDN.

JavaScript og jQuery:

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

Kodesnutten for å importere jQuery-biblioteket kan da se slik ut:

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

Google HTML-krav (ved hosting av materiell hos publisist):

Klikkteller

For at vi skal kunne telle klikk må vi legge inn en click macro-parameter. Klikktaggen skal være lett å lese - altså ingen minifiering eller obfuskering, men komprimer gjerne resten av koden og andre filer. Ligger den i et skjult JavaScript får vi ikke lagt til dette, og kan derfor ikke telle klikk. Alle klikk skal åpne et nytt vindu eller fane.

Her er et eksempel på en clickTag i et HTML-dokument:

<html>
<head>
<!-- replace width and height with correct size -->
<meta name="ad.size" content="width=320,height=250">
<!-- replace clickTag with correct URL -->
<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)">
<!-- all content that needs to be clickable has to be inserted within the <a> tag – the code below is just an example -->
<img src="images/banner.png">

</a>
</body>
</html>

Nb: Alt som er i bold må tilpasses og dobbeltsjekk at materiellet ditt er klikkbart!


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:

Mer info finner du her.

Rich media, video og brukerinteraksjon:

Rich media - krav og rapporteringsmuligheter

For alle HTML-annonser trenger vi en fallback. Dette er en bildeversjon (PNG/JPG/GIF) av annonsen.

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

Ved behov for mer avansert funksjonalitet og rapporteringsmuligheter, har vi mulighet til å laste opp creatives i Google DoubleClick Studio. Du er da nødt til å følge disse retningslinjene.

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

Videoannonser som skal loope automatisk, må leveres som HTML. Autoplay tillates ikke på mobil. Generelle kB-grenser før brukerinteraksjon gjelder også her.

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 per fil. For å ivareta god ytelse så er det viktig å ha et lavt antall kall/request.

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 fil henvisningene 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

Vi anbefaler å alltid holde størrelsen på annonsemateriell så lav som mulig. De viktigste anbefalingene våre for å få til en best mulig brukeropplevelse er:

  • Hold filstørrelsen på alle assets så lav som mulig.
  • Begrens antall kall til det minimale. Disse køes opp og tar tid å gjennomføre.
  • Benytt media queries og server skalerte bilder til forskjellige skjermstørrelser.
  • Benytt populære CDN for JavaScript-bibliotek – 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 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.

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 [email protected].

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:

www.jpeg.io - Nettbasert komprimering og konvertering av alle typer bildefiler til JPG.

www.pngmini.com - Applikasjon for å redusere filstørrelse på png-filer (kun for Mac).

www.handbrake.fr - Applikasjon for å komprimere og konvertere video (Mac + Windows).

HTML og CSS:

www.caniuse.com - Sjekk støtte for HTML/CSS (browsersupport).

www.brackets.io/ - Gratis code-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

Begrensninger:

  • Adobe Edge animate og SVG støttes ikke.