Helsingin Sanomat ipad Sovelluksen mainosaineistojen tekniset ohjeet: kokosivu ja etusivu 13.5.2013 SISÄLLYS ipad-mainokset 2 Tekniikka ja tiedostokoot 3 Orientaatio 4 Linkit: richie-modal-browser 4 Gesture event 4 Analytiikan lisääminen ja RichieORMMA.js 5 Testaaminen selaimessa 6 Videoaineistot 6 Aineistojen toimitusaika 7 Aineiston toimitusosoite 7 Tekniset kysymykset 7 1
ipad-mainokset KOKOSIVU (HTML5 rich media mahdollista) Pystyorientaatio 768 x 1004 px 1536 x 2008 px (Retina) Vaakaorientaatio 1024 x 748 px 2048 x 1496 px (Retina) Kokosivun mainos näytetään artikkelien välissä, käyttäjä saapuu mainokseen ja poistuu mainoksesta swipellä. Materiaalista tehdään molemmat kokoversiot (Retina ja ei-retina) kummastakin orientaatiosta. Mainosaineisto voi jatkua alaspäin pituussuunnassa, jolloin käyttäjä scrollaa alas. Huom. html-toteutuksessa on huomioitava, että retina-aineiston 2x-kuville on määriteltävät koot, esimerkiksi css:llä: background-image: url(background-1536x2008.png); background-size: 768px 1004px; Aineistojen html:t voivat siis olla identtiset, kunhan kaikille kuvaelementeille on määritelty koot. Suunnittelussa kannattaa huomioida esimerkiksi painikkeiden ja tekstin koko, jotta elementit eivät ole liian pieniä kosketusnäytölle. Interaktiivisten elementtien kuten painikkeiden suositeltu vähimmäiskoko on 44 x 44 px (Retina-näytöllä 88 x 88 px). 2
ETUSIVU (still-kuva + linkki) Etusivu 1436 x 1682 px (Retina), näytetään koossa 718 x 841 px Etusivun mainos näytetään etusivulla kyseisenä julkaisupäivänä. Etusivun mainos sisältää vain still-kuvan ilman toiminnallisuuksia sekä yhden, koko kuva-alan laajuisen linkin asiakkaan verkkosivustolle. Etusivun mainoksesta ei voida linkittää kokosivun mainokseen. Etusivun aineistosta voidaan toimittaa pelkkä retina-koko png-kuvaformaatissa. Tekniikka ja tiedostokoot Kokosivun mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja videoelementit, CSS-animaatiot, yms.). Pieniä poikkeuksia lukuunottamatta Richien mainosnäkymät toimivat samalla tavalla kuin ios-laitteiden Safariselain. Safari (joko ios-laitteella tai Macille saatavalla ios-simulaattorilla) on siten paras tapa testata mainostoteutuksia. Kokosivun aineistot toimitetaan zip-tiedostoina. Aineiston index.html - tiedosto tulee olla aineiston juuressa, kaikki muut tiedostot voivat olla kansioissa. Kaikista aineistoista toimitetaan sekä Retina että ei-retina - kokoversiot. Retina-aineiston yli 2 megapikselin kuvat on tallennettava pngmuotoon, jotta vältetään käyttöjärjestelmässä tapahtuva kuvien automaattinen skaalaus pienemmäksi. Kokosivun aineisto-zipin tiedostokokoraja on 3 megatavua. Retina-version suurempien kuvien takia tiedostokokoraja on 5 megatavua. Mainosaineistot 3
ladataan käyttäjän laitteelle sovellusta käynnistäessä, mikä mahdollistaa verkkobannereita suuremmat tiedostokoot sekä mainosten toiminnan myös offline-käytössä. Pelkkää kuvaa sisältävät aineistot voidaan toimittaa png-kuvina pelkästään retina-koossa. Orientaatio Landscape ja portrait -orientaatiot tehdään samaan mainosaineistoon, ja ne määritellään CSS Media Queryitä käyttäen. ESIMERKKI <link rel="stylesheet" media="all and (orientation:portrait)" href="css/portrait.css" /> <link rel="stylesheet" media="all and (orientation:landscape)" href="css/landscape.css" /> Linkit: richie-modal-browser Mainosaineiston ulkopuolisissa linkityksissä on käytettävä http:n sijaan muotoa richie-modal-browser://www.example.com. Tällöin linkin kohteena oleva sivusto aukeaa mainosnäkymässä. Https-linkeissä käytetään muotoa richie-modal-browser-https:// www.example.com. Jos linkki halutaan erityisistä teknisistä syistä aukeavan erikseen Safarissa, linkin muoto on richie-external://www.example.com. Mahdollinen mediatoimiston seuranta-url on liitettävä valmiiksi mainosaineistoon, joten se kannattaa kysyä mediatoimistolta jo etukäteen aineistoa tehtäessä. Gesture event Käyttäjä poistuu mainoksesta swipella, joten tätä ei voi käyttää mainoksen sisällä liikkumiseen, eikä mainosaineisto saa estää käyttäjää poistumasta mainoksesta. (ÄLÄ käytä esimerkiksi document.ontouchmove = function(e) {e.preventdefault();}) Swipen käyttö pienillä alueilla (esimerkiksi slidereissa tai vastaavissa toteutuksissa) on kuitenkin mahdollista kunhan tämä ei häiritse käyttäjän poistumista mainoksesta. 4
Analytiikan lisääminen ja RichieORMMA.js Mainosaineistoissa on mahdollista tallentaa tapahtumatietoja käyttäjän toimista, esim. mainoksen sisäisistä painikkeiden ja videon klikkauksista. Event-tietojen tallennus onnistuu myös offline-tilassa. Jos event-tallennuksia ei lisätä aineistoon, analytiikat saadaan ainoastaan mainosnäytöistä sekä aineiston ulkopuolelle ohjautuvista klikkauksista, joten suosittelemme analytiikkatallennuksen asettamista kaikkiin mainoksen sisäisiin toiminnallisuuksiin. Aineistoon on liitettävä mainoksen sisäistä analytiikkaa varten RichieORMMA.js -tiedosto. Tiedostoon ei saa tehdä muutoksia, sillä tiedosto saatetaan vaihtaa trafikoinnin yhteydessä uudempaan. Tiedosto on ladattavissa osoitteesta: http://www.richie.fi/technical/hs/ ESIMERKKI 1 Eventin lisääminen esim. mainoksen painikkeeseen. <script src="richieormma.js" type="text/javascript"></script> <script type="text/javascript"> function clickbanner ()! function clickbanner (event_name) { var payload = { "event" : "clickbanner", "type" : event_name }; window.richie.addevent(payload, null); } </script>... <a href=... onclick="clickbanner('painikeavaus')" ></a> ESIMERKKI 2 Analytiikka-eventin lisääminen videon starttiin: <script src="richieormma.js" type="text/javascript"></script> <script type="text/javascript"> 5
!! var playcount = 0;!! function playevent ()!! {!!! playcount++;!!! var eventname = "otherplay";!!! if (playcount === 1) {!!!! eventname = "firstplay";!!! }!!! var payload = {!!!! "event"! : eventname!!! };!!! window.richie.addevent (payload, null);!! } </script>... <video poster="poster.jpg" onplay="playevent()"> <source src="http://streaming.server.com/playlist.m3u8" type="video/mp4"> Testaaminen selaimessa Aineistoa voi testata selaimessa ilman virheilmoituksia lisäämällä URLin loppuun:?richie_browser_mode=1 Videoaineistot Jos mainosaineisto-zipin tiedostokoko jää alle 3 megatavuun (Retina-versio 5 megatavua), on videotiedosto mahdollista ladata mainoksen mukana laitteelle, ja näin mahdollistaa toisto myös offline-tilassa. Suuremmat tiedostot on streamattava ulkopuoliselta serveriltä vastaavaan tapaan kuin verkkobannereissa. Video voi käynnistyä vasta käyttäjän aloitteesta. Videoaineiston toimivuus tulee varmistaa iphonen ja ipadin Safari-selainta käyttäen. On huomattava, että tuettavat videomuodot vaihtelevat laite- ja käyttöjärjestelmäversiosta riippuen. 6
Aineistojen toimitusaika Valmiiden aineistojen toimitus vähintään 3 arkipäivää ennen kampanjan alkua, jotta aineistojen ja statistiikan toimivuus ehditään testaamaan ja mahdolliset ongelmat selvittämään ajoissa. Aineiston toimitusosoite Aineistojen toimitus sähköpostilla osoitteeseen: verkkomedia.aineisto@sanoma.fi Mukaan tieto kampanjan aloituksesta sekä kuvaus lisätyistä analytiikkaeventeistä, jotta analytiikan tallennus voidaan testata sekä aineiston tekijän yhteystiedot. Mahdolliset mediatoimiston seuranta-urlit on liitettävä suoraan mainosaineiston linkkeihin. Seurantapikselit eivät toimi mainoksissa johtuen aineistoiden taustalatauksista ja sovelluksen offline-käytöstä. Tekniset kysymykset Richie Oy aineisto@richie.fi www.richie.fi 7