Come preparare un banner HTML5 per l'ad server

Un banner può sembrare perfetto sul tuo schermo e comunque essere rifiutato dal ad server. Quasi sempre il motivo è lo stesso: un dettaglio tecnico che nessuno ha controllato. Questa guida passa in rassegna, in ordine, ciò che conviene verificare prima di caricare un banner HTML5.

Prima di iniziare

Chiedi a chi pubblica (oppure leggi la documentazione della piattaforma di destinazione) tre cose: quali formati accetta, quanto può pesare ogni pezzo e se consente risorse esterne. Questi tre dati determinano tutto il resto, e ogni piattaforma ha i propri.

Il pacchetto: uno .zip con un index.html nella radice

Il banner viene consegnato come file .zip. Dentro, l'index.html deve trovarsi nella radice (non in una cartella) e le risorse, come immagini o font, accanto a lui o in sottocartelle. Un errore molto comune è comprimere la cartella intera invece del suo contenuto: l'ad server apre lo .zip, non trova l'index.html nella radice e lo rifiuta.

Se hai più formati o lingue, ogni combinazione è un pezzo distinto con il suo .zip. BannerMotion li impacchetta così per impostazione predefinita («Un .zip per pezzo») e può anche raggruppare le lingue in cartelle («Un .zip per formato»).

La dimensione dichiarata

Il banner dichiara quanto misura con un tag meta nel <head>. La piattaforma lo legge per sapere come mostrarlo e per verificare che corrisponda allo spazio che hai acquistato.

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

La dimensione del tag, quella del contenitore del banner e quella dello spazio acquistato devono coincidere al pixel. Un banner 300×250 dentro uno spazio 300×600 è un errore di produzione, non della piattaforma.

Il clickTag: il link di destinazione

Il link di destinazione non viene scritto fisso dentro il banner. Il banner legge una variabile chiamata clickTag, che la piattaforma definisce, e la usa quando qualcuno fa clic. In questo modo l'ad server può contare ogni clic prima di reindirizzare alla tua pagina.

<script>
  var clickTag = "https://tu-sitio.com";
</script>

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

Tre dettagli spesso trascurati: la variabile va scritta esattamente clickTag (le maiuscole contano); l'indirizzo che lasci nel file è di prova, perché molte piattaforme lo sostituiscono quando servono l'annuncio; e il banner deve avere una sola azione di clic, che copra tutto il pezzo. Alcune piattaforme usano una propria libreria o un nome diverso: consulta la loro guida.

Il peso massimo dello .zip

Ogni piattaforma stabilisce un massimo per lo .zip. Misura sempre lo .zip finale, non la cartella non compressa, e lascia un margine: è più facile ridurre prima di caricare che correggere un rifiuto. Alcune piattaforme distinguono inoltre tra il caricamento iniziale e il caricamento totale (la cosiddetta polite load).

BannerMotion misura il peso di ogni pezzo durante l'esportazione e lo confronta con un limite configurabile; quel limite non sostituisce quello reale della tua piattaforma. I banner non includono librerie di terze parti, il che aiuta a mantenere il peso basso. [PLACEHOLDER: peso tipico misurato di un pezzo, quando ci sarà una misurazione pubblicabile.]

Cosa pesa di più, dal maggiore al minore: video, immagini (soprattutto con doppia risoluzione per schermi retina), font con molti stili e librerie. Per ridurlo: usa testo e forme vettoriali (SVG) invece di immagini quando possibile, raggruppa le piccole icone in uno sprite, comprimi le foto e carica solo i pesi di font che usi.

Nessuna risorsa esterna

Tutto ciò di cui il banner ha bisogno deve trovarsi dentro lo .zip: immagini, font e librerie. Molte piattaforme bloccano o penalizzano i file richiesti a un altro server (un font da una CDN, una libreria ospitata altrove), perché non possono garantire che siano disponibili né sicuri. In BannerMotion il pacchetto è autosufficiente: non effettua richieste verso altri domini.

Animazione, durata e ripetizioni

Le piattaforme di solito limitano quanto dura l'animazione e quante volte si ripete (spesso circa 30 secondi al massimo e un numero ridotto di cicli). Il valore esatto dipende da ciascuna piattaforma. L'esportatore di BannerMotion parte da un massimo di 30 secondi di durata nel suo preset generico.

Due buone pratiche che non dipendono da nessuno: che messaggio e pulsante siano completi nell'ultimo fotogramma (perché quel fotogramma resta sullo schermo), e che i movimenti usino curve di easing morbide su pochi keyframe scelti con cura, invece di tanti movimenti nervosi.

Immagine di riserva

Alcune piattaforme chiedono un'immagine di riserva (JPG, PNG o GIF) delle stesse dimensioni, che viene mostrata se il browser non esegue l'HTML5. Di solito si usa l'ultimo fotogramma dell'animazione. Conferma se la tua piattaforma la richiede, se va nel pacchetto o separatamente, e con quale peso massimo. In BannerMotion, la riserva statica compare come «Prossimamente» nella schermata di esportazione.

Testare prima di caricare

Estrai lo .zip in una cartella nuova e apri l'index.html nel browser. Verifica che l'animazione si riproduca per intero, che il testo non venga tagliato, che il clic apra l'indirizzo previsto e che non compaia alcun errore nella console del browser. Ripeti con il formato più piccolo e con quello più grande della campagna.

Un banner che non si può testare non è finito.

Checklist di revisione

• Lo .zip ha l'index.html nella radice.
• Il tag ad.size corrisponde alla dimensione del banner e allo spazio acquistato.
• Il clic usa clickTag e c'è una sola azione di clic.
• Lo .zip pesa meno del limite della piattaforma (BannerMotion ti avvisa con il limite che configuri).
• Nessuna risorsa esterna: nulla viene richiesto a un altro dominio.
• Durata e ripetizioni rientrano in ciò che consente la piattaforma.
• L'ultimo fotogramma ha il messaggio completo e il pulsante.
• Testato nel browser, nel formato più piccolo e in quello più grande.

Al caricamento: cos'è il trafficking

Caricare il banner e assegnarlo alla sua campagna, alle date e agli spazi è il lavoro del trafficking. Quando il pacchetto arriva ben preparato, quel passaggio si riduce a caricare, testare nell'anteprima della piattaforma e assegnare. Dopo la pubblicazione, verifica nei report dell'ad server che i clic vengano conteggiati.

BannerMotion esporta ogni pezzo con la dimensione dichiarata, il clickTag incluso e il peso validato, e avvisa se manca qualcosa. L'invio diretto agli ad server è nel piano di prodotto: per ora scarichi il pacchetto e lo carichi a mano.