HTML5-bannerin lyhyt oppimäärä, toimintaperiaate ja hyöty

HTML5-display-banneri on rakenteeltaan aivan kuin pieni nettisivu. Sen sisältö on kirjoitettu HTML-, CSS- ja  JavaScript-kielillä, jotka mahdollistavat banneriin lähestulkoon kaikki sellaiset selaimessa toimivat ominaisuudet, joihin olemme verkkosivustoillakin tottuneet. Todellisesta nettisivusta poiketen nämä pienet sivustot näkyvät kuitenkin samoilla mainospaikoilla kuin tavallisetkin kuvatiedostobannerit. HTML5 mahdollistaa siis display-bannerin visualisointiin lähes kaiken sen, mitä voimme kuvitella myös normaalille nettisivulle – poislukien tietenkin raskaimmat palvelinpuolen operaatiot.

Tavallisten kuvien lisäksi HTML5-bannerin sisältö voi olla esimerkiksi:

• animaatiota
• videota
• interaktiivisia elementtejä (esimerkiksi kuvakaruselli, joka navigoi napin avulla diasta toiseen)
• dynaamista sisältöä (kuranttia tuotetietoa suoraan omasta tietokannasta; esimerkiksi ajankohtaiset tarjoukset)
• jopa pelejä

Miksi ja milloin banneri kannattaa tehdä HTML5-muotoon?

Koodikieli saattaa kuulostaa vaikealta (tai jopa turhanpäiväiseltä teknisyyden tavoittelulta) tutun ja turvallisen kuvabannerin sijaan. Todellisuudessa jo melko alkeellisilla HTML- ja CCS-taidoilla muotoiltu HTML5-banneri voi olla kauniimpi, nopeampi, mitattavampi ja brändivaikutukseltaan tehokkaampi kuin tavallinen still-kuva.

Otsikon kysymykseen ei kuitenkaan voida antaa yksiselitteistä vastausta. Siksi onkin enemmän kuin suositeltavaa kysyä tekniseltä ja visuaaliselta ammattilaiselta, milloin ja miten banneriin kannattaa tuottaa animointia, interaktiivisuutta tai hienostuneempaa teknologiaa. Kehnosti toteutettu ja perusteltu HTML5-banneri voi valitettavasti olla myös ärsyttävästi vilkkuva pieni neliö, joka maksoi moninkertaisesti enemmän kuin tavallinen jpeg-banneri. Se voi olla myös selaimen jäädyttävä spagettikoodihirviö, joka ei ehdi latautua ennen kuin käyttäjä on jo selannut iltapäivälehden etusivun loppuun.

Pahimmillaan kehnosti toteutetun bannerin trafikoituminen voi viivästyä väärien clickTAG-skriptien takia päiväkausia, jolloin HTML5 ei välttämättä ehdi edes liveksi ennen kampanjan päättymistä. Neonväreissä vilkkuva otsikko voi tuntua mahtavalta huomiokeinolta, vaikka se saattaakin olla jopa uskottavan brändi-imagon itsemurha. Taustakuvan muuttaminen säädatan perusteella voi myös tuntua hienolta innovoinnilta, mutta käyttäjälle se voi olla täysin yhdentekevää. HTML5-banneria suunniteltaessa onkin pohdittava, tuoko se todellista lisäarvoa käyttäjälle ja mainostajalle vai ainoastaan koodarille.

Mitä lisäarvoa HTML5 sitten tuo display-mainontaan?

HTML5-bannerien lisäarvo mainostajalle ja käyttäjälle on aina tapauskohtaista, sillä se riippuu myös mediabudjetin koosta ja bannerin käytön pituudesta. Yleisenä sääntönä voidaan kuitenkin sanoa, että dynaamisten templaattien rakentaminen kannattaa erityisesti silloin, kun tarkoituksena on tehdä display-mainontaa pitkään ja ikään kuin jatkuvana oppimisprosessina.

HTML5-bannerien lisäarvosta voidaan koota pitkää listaa, vaikka jokainen hyöty ei missään nimessä pädekään jokaiseen banneriin. Tässä on kuitenkin muutamia keskeisiä hyötyjä, joita HTML5-bannereilla voidaan saavuttaa:

• Tyylikkäästi tehty animointi voi parantaa bannerin saamaa huomiota.
• Ovelat sisältöratkaisut mahdollistavat laajemman informaation välittämisen, vaikka käyttäjä ei klikkaisikaan sivustolle (mitä käyttäjät ylipäätään harvoin tekevät).
  • Laajemman tuoteinfon tarjoaminen bannerissa – esimerkiksi usean freimin ansiosta – voi olla myös käyttäjäystävällistä viestintää; sen sijaan, että käyttäjää yritetään clickbait-taktiikoin juonitella pois uutisten parista mainostajan sivustolle, tarjotaan hänelle runsaasti tietoa jo mainoksessa itsessään.
  • Karusellilla saadaan enemmän arvoa mediakuluille, sillä mainosimpressioista maksetaan kuitenkin sama hinta – olipa käytössä sitten yksi still-kuva tai viiden freimin karuselli.
• Dynaamisen sisällön avulla voidaan tehostaa bannerivariaatioiden tuotantoa tai räätälöidä bannereiden sisältöä käyttäjän mukaan. Dynamiikan ansiosta voidaan esimerkiksi:
  • tuottaa A/B-testaamista (tai ihan vain banneriväsymyksen ehkäisemistä) varten lähes loputon määrä variaatioita avaamatta Photoshopia kertaakaan.
  • räätälöidä kansainvälisessä kampanjassa mainoksen kieli automaattisesti käyttäjän kohdemaan mukaan avaamatta Photoshopia kertaakaan.
  • näyttää käyttäjälle ostoskoriin jääneitä tuotteita tai vaikka jo ostetun tuotteen komplementteja (nk. dynaaminen retargetointi).

• Simppeliä grafiikkaa ja animointia voidaan tehdä puhtaalla CSS:llä skaalautuvaksi ja kevyeksi niin, ettei kuvan laatu heikkene pakkaamisen takia.
• Hutiklikkausten vähentäminen tekee klikkien mittaamisesta luotettavampaa ja bannereista käyttäjäystävällisempiä.
• Mainonnan performanssin mittaamisen mahdollisuudet kasvavat.

Seuraavaksi  pureudumme listan kahteen viimeiseen kohtaan vielä hieman syvällisemmin, sillä kuvabannereista poiketen nämä hyödyt voidaan aina saavuttaa HTML5-bannereilla.

HTML5-bannerin lisäarvo – tarkempi mittaaminen

Display-mainonnan tulosten mittausongelmia still-kuvia käytettäessä

Perinteisen still-kuvilla tehdyn bannerimainonnan raportoitaviin tuloksiin kuuluu usein vain kulutettu raha, näytetyt impressiot ja klikkaukset (ja toki näistä laskettuja suhdelukuja). Tyypillisesti näistä kolmesta ensimmäiset kaksi ovat melkoisen suuria lukuja ja viimeinen taas mitättömän pieni.

Äärimmäisen huolellinen raportoija saattaa tarjota myös mouse-over/hover -tyyppisiä lukuja, jotka ovat sivustokäyntiä heikompia mutta mainosnäyttöä vahvempia indikaattoreita huomioarvosta. Niiden merkitys mainostajalle on kuitenkin melko kyseenalainen. Lisäksi voidaan saada arvioita peitosta ja toistosta tai kyselytutkimuksen tuloksia brand liftistä (yleensä vähintään muutama viikko kampanjan jälkeen), mutta tulosorientoituneelle ja nopeaa optimointia rakastavalle mainostajalle nämä eivät ole riittävän konkreettisia tuloksia.

Digimainostajat tämän jo tietävätkin: jos ihmisen halutaan klikkaavan bannerista mainostajan sivustolle kesken uutisten lukemisen, on hänelle tarjottava ilmaisia ämpäreitä tai vähintään alennushintaista WC-paperia.

Display-mainonnan tulosten arvioiminen on joka tapauksessa melkoisen epävarmaa touhua. Bannerimainonnan performanssin mittaamissopan lisäksi mittaamista hankaloittaa se, että melkoinen osa impressioista menee niin sanottuun ad fraudiin ja niistä harvoista klikkauksistakin suuri osa on vahinkoja. Vahinkoklikkien määrä lisääntyy erityisesti mobiilissa, jossa banneri usein peittää koko laitteen ruudun.

Mittaaminen HTML5-bannerin avulla

HTML5-banneritkaan eivät suoraan ratkaise yllä esiteltyjä ongelmia, vaikka mittaamista voidaankin jonkin verran parantaa.

• HTML5-banneri voidaan rakentaa esimerkiksi niin, että vain kehote (se nappi, jossa yleensä lukee ”klikkaa tästä”) on klikattava. Tämä vähentää hutiklikkausten määrää, mikä taas parantaa käyttäjäystävällisyyttä,  klikkimittareiden tarkkuutta ja ehkäpä parhaimmillaan jopa brändimielikuvaa.
• Varoituksena mainostajalle mainittakoon, että klikkien määrä tippuu tämän myötä helposti murto-osaan aiemmasta kuvabannerista. Totuus hutiklikkausten ja bottiliikenteen määrästä sattuu, mutta näin saatu tulos on lähempänä käyttäjien todellista kiinnostusta mainosta kohtaan.
• HTML5-bannereihin voidaan rakentaa interaktiivisia elementtejä, joista saadut interaktiot pystytään mittaamaan. Banneri voi olla esimerkiksi diasarjatyyppinen karuselli, jossa käyttäjä voi navigoida dialta toiselle vaikkapa tuotteita selaillen. Vaikka käyttäjä ei päätyisikään klikkaamaan saitille, tuotteiden voidaan nähdä kiinnostaneen ainakin yhtä henkilöä. Tällaisesta bannerista voimme jopa selvittää, mikä tuote on kiinnostanut käyttäjiä eniten. Tätä tietoa ei tietenkään saada pelkän still-kuvan tuijottamisesta.
• Animaatio on rauhallinen ja kestää maksimissaan 30 sekuntia (monien julkaisijoiden maksimi), minkä lisäksi se pysähtyy heti klikattaessa mainosta mistä tahansa. Jos haluat nähdä animaation uudelleen, päivitä sivu.
• Vain tekstielementit toimivat linkkeinä, joten hutiklikkausten määrä vähenee.
• Tekstit ja kuvat tuodaan mainonnassa oleviin bannereihin dynaamisesti, joten mainostekstien päivittäminen on nopeaa ja testaaminen onnistuu Photoshopia avaamatta.

Yhteenveto HTML5-bannereista

Blogikirjoituksen lukeminen ei välttämättä helpottanut ollenkaan valintaasi perinteisten kuvabannerien ja HTML5:n välillä. Tässä on kuitenkin vielä yhteenvetona muutama tilanne, joissa kannattaa pyytää asiantuntijan arvio bannerimainontasi viemisestä HTML5-aikaan:

• Jos aiot tulevaisuudessakin tehdä paljon display-bannerimainontaa, ja mediabudjettisi tai banneriesi määrä (ja sen myötä tuotantobudjetti) on suuri –> HTML5 voi säästää rahaa ja parantaa tuloksia.
• Jos haluat tuottaa jotain visuaalista ja erityisen vaikuttavaa display-mainontaasi
• Jos haluat display-mainonnastasi mitattavampaa ja käyttäjäystävällisempää

Seuraava pohdinta onkin miten tuottaa HTML5-bannerit. Tästä lisää blogissamme myöhemmin.