HTML5-mainosten ohje

Aineiston toimitus

Voit käyttää mitä työkalua haluat, Notepad++,CofeeCup, Sublime, Notepad, jne. HTML5 mainos on kuin HTML-sivu, mutta pieni ja kevyt sellainen. Voit käyttää mainoksen rakentamiseen myös HTML5 animointityökaluja, kuten esimerkiksi Adobe Edge ja Google Web Designer.

Huomioi alla olevat ohjeet mainosta rakentaessasi:

  1. Aineistossa on oltava yksi kokoava html-tiedosto (index.html)
  2. Aineisto voi koostua kansiorakenteesta, jossa esimerkiksi tyylitiedostot ja kuvat sijaitsevat omissa kansioissaan.
  3. HTML5-aineisto tulee toimittaa pakattuna tiedostona (.zip). sisältäen kaikki mainokseen liittyvät tiedostot.
  4. Klikit tulee avautua uuteen selaimeen (_blank).
  5. Käytä mainoskohtaisia uniikkeja tunnisteita, luokkia, muuttujia ja funktioita.
  6. Aineiston tyylimäärittelyjen margin-arvoksi tulee asettaa 0, jotta bannerin ulkoreunoille ei ilmesty ylimääräisiä reunaviivoja.
  7. Käytä mieluiten tuplalainausmerkkejä (").
  8. Huomioi, että mainos julkaistaan median sivulla/sovelluksessa iframen sisällä. Tarkistathan, että klikkiseuranta on tehty ohjeistuksemme mukaisesti.
  9. HTML oletusmerkistö on UTF-8
  10. Tiedostokoon laskeminen: Kaikki mainokseen liittyvät tiedostot - kuvat, skriptitiedostot, fontit, tyylitiedostot - tulee laskea mainoksen tiedostokokoon mukaan.
  11. 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.
  12. Mainoksessa saa olla äänet vain käyttäjän aktivoinnista.

 

Klikkiseurannat HTML5-aineistossa

Alla ohjeet kuinka lisätä aineistoon klikkiseurannat, kun HTML5-aineisto ajetaan suoraan Sanoman järjestelmien kautta.

Aineisto tarvitsee oikein toimiakseen molemmat -  Sanoma Click APIn sekä klikkitagien määrityksen.

1) Sanoma Click API

Lisää seuraava koodin pätkä html-koodisi head-osioon:


HUOM! Voit kopioida koodinpätkän täältä »

2) Klikkitagien määrittäminen

Esimerkki 1: Kaksi esimerkkiä clickTagin määrittämisestä jos klikkiseuranta/laskeutumissivun URL lisätään suoraan HTML-koodiin:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickUrl('https://yourlinkgoeshere'); return false;">Click here</a>

Esimerkki 2: Esimerkki clickTAGn määrittämisestä jos klikkiseuranta/laskeutumissivun URL määritellään mainospalvelimen puolella:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a> 

Esimerkki 3: Esimerkki useamman clickTagin määrittämisestä. Voit käyttää korkeintaan viittä clickTAGian: clickTAG, clickTAG1, clickTAG2, clickTAG3, clickTAG4.
Huomioithan, että mainospalvelin raportoi kaikki clickTagin kokonaisuutena, ei erikseen.

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a> <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG1'); return false;">Click here</a> <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG2'); return false;">Click here, too</a> <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG3'); return false;">Click here, too</a> <a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG4'); return false;">Click here, too</a>

HTML5 best practices

Paranna ensilatausta

  • Käytä 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ä.

Kuvatiedostot

  • Optimoi kaikki kuvat
  • Esilataa kuvat kun tarpeellista
  • Yhdistä kuvat kun mahdollista (sprite sheet)
  • Käytä sprite sheetejä useamman kuvan ja animaation näyttämiseen

Vältä:

  • Mainoksessa ei saa käyttää häiritsevän nopeita/vilkkuvia animaatioita grafiikassa, tekstissä eikä taustan elementeissä.
  • Vältä animaatioita, jotka syövät prosessoritehoja. (20% keskimääräinen prosessoritehon kuormitus hyväksytään, pysyvät 70% piikit hylätään.)
  • Vältä tai vähennä:
    • eval() käyttöä välttääksesi turvallisuusriskit
    • Vältä globaaleja muuttujia
    • luuppien ja ajastimien käyttöä (tyhjennä/peruuta setInterval ja setTimeout heti, kun se on suoritettu)
    •  setInterval
    •  setTimeout
    •  requestAnimationFrame
  • Minimoi DOM yhteydet
  • Vältä jQueryn käyttöä - jQuery ei ole suositeltavaa HTML5 mainoksissa, sillä sen suorituskyky on huono varsinkin mobiililaitteissa. Lisäksi jQuery on tarpeettoman raskas, suurinta osaa kirjaston funktioista ei tarvita. Sen sijaan voit käyttää kevyempiä JS-kirjastoja, kuten GreenSockVanilla Javascript tai Zepto JavaScript

HTML5 animaatiotyökalut

Voit käyttää mainoksen toteuttamiseen animointityökaluja, kuten esimerkiksi Adobe Edge ja Google Web Designer. Huomioi, että aineistoon tulee sijoittaa clickTAG, jotta mainoksen klikit välittyvät mainospalvelimelle.

Olemme luoneet yksityiskohtaiset ohjeet klikkiseurantojen lisäämiseen. Yleisohjeen lisäksi olemme kasanneet omat ohjeet klikkiseurantojen lisäämiseen Adobe Edgelle ja Google Web Designerille sekä HTML5-materiaaleille, jotka on toteutettu Adobe Flashilla tai käännetty HTML5-muotoon Swiffylla.

Hyödyllisiä tietolähteitä