HTML5-mainokset

HTML5-mainos on kuin pieni ja kevyt HTML-sivu. Voit käyttää mainoksen rakentamiseen työkalua kuten Notepad++, CofeeCup, Sublime, Notepad tai animointityökaluja kuten Adobe Animate tai Google Web Designer.

Yleisohjeet

HTML5 mainosten ohjeet koskevat myös tagin takaa ajettavia aineistoja.
Aineiston tulee olla SSL (HTTPS) yhteensopiva.
Desktop-kampanjoissa tulee käyttää iframe-tageja.
On suositeltavaa, että kaikki mainoksessa käytettävät tiedostot, kuten esimerkiksi mainoksessa käytetyt kuvat, JavaScript-kirjastot, fonttitiedostot ja CSS-tiedostot latautuvat kyseisen kolmannen osapuolen toimijan palvelimilta, eivät sijaitse jaetuilla palvelimilla.
Linkkien tulee avautua uuteen välilehteen (_blank).
Määritä mainoksille uniikit tunnisteet, luokat, muuttujat ja funktiot.
Aineiston bodyn margin-arvoksi tulee asettaa 0, jotta bannerin ulkoreunoille ei ilmesty ylimääräisiä reunaviivoja.
Huomioi, että mainos julkaistaan median sivulla/sovelluksessa iframen sisällä.
Tarkista että klikkiseuranta on tehty ohjeistuksemme mukaisesti.
HTML oletusmerkistö on UTF-8
Pidä tiedostojen määrä järkevänä, jokainen yksittäinen tiedostolataus kuormittaa ja pidentää mainoksen/sivun latausta. Mainoksen ensilatauksen requestien määrä tulee olla 15.

Zip-muodossa toimitettava aineisto

Huomioi aineiston kokorajoitukset.
Mainoksen tulee latautua zip-paketin juuressa olevasta index.html-tiedostosta.
Aineisto voi koostua kansiorakenteesta, jossa esimerkiksi tyylitiedostot ja kuvat sijaitsevat omissa kansioissaan.
Zip-paketin tulee sisältää kaikki mainokseen liittyvät tiedostot.
Kaikki mainokseen liittyvät tiedostot (kuvat, skriptitiedostot, fontit, tyylitiedostot) tulee laskea mainoksen tiedostokokoon mukaan.

Mobiililaitteilla näytettävä aineisto

Testaa mainos iOS, Android ja Windows Phone alustoilla. Aineiston tulee toimia vähintään iOS9+, Android 4.4+ ja WP 8.1+ alustaversioissa.
Ilmoita aineiston toimituksen yhteydessä jos mainos toimii vain jollain tietyillä alustoilla tai tietyillä laitteilla.

Hyödyllisiä työkaluja:

Vinkkejä hyvään suorituskykyyn

Käytä mahdollisuuksien mukaan inline CSS-tyylejä ja HTML:ää, jotta mainoksen alkunäkymä latautuisi mahdollisimman nopeasti.
Rajoita ensilatauksen riippuvuuksia renderöinnin estäviin .js ja .css tiedostoihin.
Lataa interaktiiviset elementit viivästetysti tai toissijaisena latauksena.
Raskaat tiedostot tulisi ladata vasta käyttäjän aktivoinnista (esim. video).
Vältä kaikkia turhia latauksia.
Tehostaaksesi mainoksen latautumista yhdistä tiedostot aina kun mahdollista, kuten JavaScript-kirjastot, HTML, CSS.
Parantaaksesi visuaalista ensikokemusta tarkista laite ja yhteysnopeus ja tarjoa optimaalisin vaihtoehto. Näytä esimerkiksi hitaammilla yhteysnopeuksilla kevyempi versio mainoksesta, jotta käyttökokemus olisi mahdollisimman hyvä.
Optimoi kaikki kuvat.
Esilataa kuvat kun on tarpeellista.

Vältä aineistossa

Häiritsevän nopeita/vilkkuvia animaatioita
Globaaleja muuttujia
Luuppien ja ajastimien käyttöä (Tyhjennä/peruuta setInterval ja setTimeout heti, kun se on suoritettu.)
Minimoi DOM yhteydet
jQueryn käyttöä

Klikkiseuranta

Jotta mainoksen klikkauksia voidaan mitata, täytyy HTML5-aineistoon määrittää klikkiseuranta alla olevien ohjeiden mukaisesti. Klikkiseuranta käyttää IAB:n clickTag-standardia. Klikkiseuranta täytyy lisätä myös silloin, kun käytetään HTML5-animaatiotyökalua, kuten Adobe Animatea tai Google Web Designeriä. Voit käyttää clickTagien testaamiseen esimerkiksi Googlen HTML5 Validator -palvelua.

Tarkempia ohjeita ja esimerkkejä HTML5-aineistojen klikkiseurannasta löydät Smart Ad Serverin HTML5 clicks management -dokumentista.

Lisää seuraava javascript html-koodisi head-osioon

<script src="https://ns.sascdn.com/diff/templates/js/banner/sas-clicktag-3.1.js"></script>

Klikkiseurannan määrittäminen

Esimerkki 1:
clickTagin määrittäminen, jos klikkiseuranta/laskeutumissivun URL lisätään suoraan HTML-koodiin.

<!-- Define clickArea in HTML -->
<a id="clickArea"></a>

<!-- Define clickTag and bind click event to clickArea -->
<script type="text/javascript">
    var clickTag = "click-target-url";
    var clickArea = document.getElementById("clickArea");
    clickArea.onclick = function () {
        window.open(clickTag, "blank");
    }
</script>

Esimerkki 2:
clickTAGin määrittäminen linkin href-attribuuttiin. Mainoksen Javascriptien tulee käynnistyä vasta kun klikkiseurannan Javascript on latautunut.

<!-- Define clickArea in HTML -->
<a id="clickArea" target="_blank"></a>

<!-- Define clickTag and set link target to clickTag -->
<script type="text/javascript">
    var clickTag = "click-target-url";

    function init() {
        /* this is a customer function which start building the ad */
        var clickArea = document.getElementById("clickArea");
        clickArea.href = clickTag;
        /* etc. */
    }
    sas.clicktag.register(function () {
        init();
    });
</script>

Esimerkki 3:
Useamman clickTagin määrittäminen. Voit käyttää korkeintaan viittä clickTAGia: clickTAG0, clickTAG1, clickTAG2, clickTAG3, clickTAG4. Huomioi, että mainospalvelin raportoi kaikki klikit aineistokohtaisesti – ei kohdeosoitteiden mukaan eriteltynä.

<!-- Define clickAreas in HTML -->
<a id="clickArea0" target="_blank"></a>
<a id="clickArea1" target="_blank"></a>
<a id="clickArea2" target="_blank"></a>

<!-- Define clickTags and bind click events to clickAreas -->
<script type="text/javascript">
    var clickTag0 = "first click url";
    var clickTag1 = "second click url";
    var clickTag2 = "third click url";

    var clickArea0 = document.getElementById("clickArea0");
    clickArea0.onclick = function () {
        window.open(clickTag0, "blank");
    }

    var clickArea1 = document.getElementById("clickArea1");
    clickArea1.onclick = function () {
        window.open(clickTag1, "blank");
    }

    var clickArea2 = document.getElementById("clickArea2");
    clickArea2.onclick = function () {
        window.open(clickTag2, "blank");
    }
</script>