Hoe je een HTML5-banner voorbereidt voor de ad server

Een banner kan er op je scherm perfect uitzien en toch door de ad server worden geweigerd. Meestal komt dat door dezelfde oorzaak: een technisch detail dat niemand heeft nagekeken. Deze gids loopt in volgorde langs wat je moet controleren voordat je een HTML5-banner uploadt.

Voordat je begint

Vraag aan wie publiceert (of lees de documentatie van het doelplatform) drie dingen: welke formaten het accepteert, hoeveel elk stuk mag wegen en of externe bronnen zijn toegestaan. Die drie gegevens bepalen al het andere, en elk platform heeft er eigen waarden voor.

Het pakket: een .zip met een index.html in de hoofdmap

De banner wordt geleverd als een .zip-bestand. Daarin moet index.html in de hoofdmap staan (niet in een map), en de bronnen, zoals afbeeldingen of lettertypen, staan ernaast of in submappen. Een veelgemaakte fout is de hele map comprimeren in plaats van de inhoud: de ad server opent de .zip, vindt geen index.html in de hoofdmap en wijst het pakket af.

Als je meerdere formaten of talen hebt, is elke combinatie een apart stuk met een eigen .zip. BannerMotion verpakt ze standaard zo («Eén .zip per stuk») en kan de talen ook in mappen bundelen («Eén .zip per formaat»).

Het opgegeven formaat

De banner geeft zijn formaat aan met een meta-tag in de <head>. Het platform leest die om te weten hoe het moet worden getoond en om te controleren of het overeenkomt met de ruimte die je hebt gekocht.

<meta name="ad.size" content="width=300,height=250">

Het formaat in de tag, dat van de banner-container en dat van de gekochte ruimte moeten tot op de pixel overeenkomen. Een banner van 300×250 in een ruimte van 300×600 is een productiefout, geen fout van het platform.

De clickTag: de bestemmingslink

De bestemmingslink wordt niet vast in de banner geschreven. De banner leest een variabele die clickTag heet, die het platform definieert, en gebruikt die bij een klik. Zo kan de ad server elke klik tellen voordat hij doorverwijst naar je pagina.

<script>
  var clickTag = "https://jouw-site.com";
</script>

<div id="hit" role="link" tabindex="0"></div>
<script>
  document.getElementById("hit").onclick = function () {
    window.open(window.clickTag, "_blank");
  };
</script>

Drie details die vaak over het hoofd worden gezien: de variabele moet exact clickTag heten (hoofdletters tellen); het adres dat je in het bestand zet is een testadres, want veel platforms vervangen het bij het serveren van de advertentie; en de banner moet één klikactie hebben die het hele stuk bestrijkt. Sommige platforms gebruiken een eigen bibliotheek of een andere naam: controleer hun gids.

Het maximumgewicht van de .zip

Elk platform stelt een maximum voor de .zip. Meet altijd de definitieve .zip, niet de ongecomprimeerde map, en houd een marge aan: het is makkelijker om vóór het uploaden te verkleinen dan een afwijzing te repareren. Sommige platforms maken bovendien onderscheid tussen de initiële lading en de totale lading (de zogenoemde polite load).

BannerMotion meet het gewicht van elk stuk bij het exporteren en vergelijkt het met een instelbare limiet; die limiet vervangt de echte limiet van je platform niet. De banners bevatten geen bibliotheken van derden, wat helpt om het gewicht laag te houden. [PLACEHOLDER: typisch gemeten gewicht van één stuk, zodra er een publiceerbare meting is.]

Wat het meeste gewicht toevoegt, van meer naar minder: video’s, afbeeldingen (vooral in dubbele resolutie voor retina-schermen), lettertypen met veel stijlen en bibliotheken. Om het te verlagen: gebruik waar het kan tekst en vectorvormen (SVG) in plaats van afbeeldingen, bundel kleine pictogrammen in een sprite, comprimeer foto’s en laad alleen de lettergewichten die je gebruikt.

Geen externe bronnen

Alles wat de banner nodig heeft, moet in de .zip zitten: afbeeldingen, lettertypen en bibliotheken. Veel platforms blokkeren of bestraffen bestanden die van een andere server worden opgevraagd (een lettertype van een CDN, een bibliotheek elders gehost), omdat ze niet kunnen garanderen dat die beschikbaar of veilig zijn. In BannerMotion is het pakket zelfstandig: het doet geen verzoeken naar andere domeinen.

Animatie, duur en herhalingen

Platforms beperken meestal hoe lang de animatie duurt en hoe vaak die zich herhaalt (vaak maximaal rond de 30 seconden en een beperkt aantal lussen). De exacte waarde hangt van elk platform af. De exporter van BannerMotion gaat in zijn generieke preset uit van een maximale duur van 30 seconden.

Twee goede gewoonten die van niemand afhangen: zorg dat het bericht en de knop compleet zijn in het laatste frame (want dat frame blijft op het scherm staan), en gebruik zachte easing-curves over enkele goed gekozen keyframes in plaats van veel schokkerige bewegingen.

Reserveafbeelding

Sommige platforms vragen om een reserveafbeelding (JPG, PNG of GIF) van hetzelfde formaat, die wordt getoond als de browser de HTML5 niet uitvoert. Gebruikelijk is het laatste frame van de animatie. Bevestig of je platform die verplicht stelt, of die in het pakket moet zitten of los, en met welk maximumgewicht. In BannerMotion verschijnt de statische reserve als «Binnenkort beschikbaar» op het exportscherm.

Testen voordat je uploadt

Pak je .zip uit in een nieuwe map en open index.html in de browser. Controleer of de animatie volledig wordt afgespeeld, of geen tekst wordt afgesneden, of de klik het adres opent dat je verwacht en of er geen fout in de browserconsole verschijnt. Herhaal dit op het kleinste en het grootste formaat van de campagne.

Een banner die je niet kunt testen, is niet af.

Controlelijst

• De .zip heeft index.html in de hoofdmap.
• De ad.size-tag komt overeen met het formaat van de banner en de gekochte ruimte.
• De klik gebruikt clickTag en er is één klikactie.
• De .zip weegt minder dan de limiet van het platform (BannerMotion waarschuwt je met de limiet die je instelt).
• Geen externe bronnen: er wordt niets bij een ander domein opgevraagd.
• Duur en herhalingen vallen binnen wat het platform toestaat.
• Het laatste frame heeft het volledige bericht en de knop.
• Getest in de browser, op het kleinste en het grootste formaat.

Bij het uploaden: wat trafficking is

De banner uploaden en toewijzen aan zijn campagne, datums en ruimtes is het werk van trafficking. Als het pakket goed is voorbereid, beperkt die stap zich tot uploaden, testen in de voorvertoning van het platform en toewijzen. Controleer na het publiceren in de rapporten van de ad server of de kliks worden geteld.

BannerMotion exporteert elk stuk met het opgegeven formaat, de clickTag erbij en het gecontroleerde gewicht, en waarschuwt als er iets ontbreekt. Directe levering aan ad servers staat op het productplan; voorlopig download je het pakket en upload je het zelf.