Taloussanomat ipad Mainosaineistojen tekniset ohjeet 14.11.2012 SISÄLLYS ipad-mainokset 2 Tekniikka ja tiedostokoot 3 Orientaatio 3 Linkit: richie-modal-browser 4 Gesture event 4 RichieORMMA.js 4 Statistiikan lisääminen 4 Testaaminen selaimessa 6 Videoaineistot 6 Aineistojen toimitusaika 6 Aineiston toimitusosoite 6 Tekniset kysymykset 6 1
ipad-mainokset ETUSIVUN MAINOSPAIKAT (HTML5 rich media mahdollista) Mahdolliset etusivun mainospaikat ovat: Vaakapalkki 736 x 240 px Pystypalkki 240 x 488 px Boksi 240 x 240 px Tarkista kampanjavarauksesta varatun mainospaikan koko. Huomaa, että mainoksen kuva-aineisto kannattaa tallentaa tuplakokoisena 2x-kokoon, jolloin se näyttää tarkalta ipadin tarkemmalla Retina-näytöllä. Etusivun mainospaikat ovat sovelluksen alkunäkymässä sisällön joukossa. Mainoksiin on mahdollista toteuttaa toiminnallisia rich media -elementtejä, mutta mainos voi myös sisältää pelkästään still-kuvan, joka ohjaa verkkosivustolle. KOKOSIVU (HTML5 rich media mahdollista) Pystyorientaatio 768 x 1004 px ja Retina-version kuva-aineiston koko 1536 x 2008 px Vaakaorientaatio 1024 x 748 px Retina-version kuva-aineiston koko 2048 x 1496 px Kokosivun mainos näytetään artikkelien välissä, käyttäjä saapuu mainokseen ja poistuu mainoksesta swipellä. Materiaalista tehdään molemmat 2
kokoversiot (Retina ja ei-retina) kummastakin orientaatiosta. Mainosaineisto voi jatkua alaspäin pituussuunnassa, jolloin käyttäjä scrollaa alas. 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). 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. Kokosivun aineistoista toimitetaan sekä Retina että ei-retina - kokoversiot. Retina-aineistossa kaikille kuville on määriteltävä koot, jotta tuplakokoinen kuva-aineisto mahtuu ipadin ruudulle. Retina-aineiston yli 2 megapikselin kuvat on myös tallennettava png-muotoon, jotta vältetään käyttöjärjestelmässä tapahtuva kuvien automaattinen skaalaus pienemmäksi. Etusivun aineisto-zipin tiedostokokoraja on 2 megatavua. Kokosivun aineisto-zipin tiedostokokoraja on 3 megatavua. Retina-version suurempien kuvien takia tiedostokokoraja on 5 megatavua. Mainosaineistot ladataan käyttäjän laitteelle sovellusta käynnistäessä, mikä mahdollistaa verkkobannereita suuremmat tiedostokoot sekä mainosten toiminnan myös offline-käytössä. Orientaatio Kokosivun mainoksen 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" /> 3
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ä 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 laskureissa on kuitenkin mahdollista kunhan tämä ei häiritse poispääsyä mainoksesta. RichieORMMA.js Aineistoon on liitettävä mainoksen sisäistä statistiikkaa 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/richieormma.js Statistiikan lisääminen 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, statistiikat saadaan ainoastaan mainosnäytöistä sekä aineiston ulkopuolelle ohjautuvista klikkauksista, joten suosittelemme statistiikkatallennuksen asettamista kaikkiin mainoksen sisäisiin toiminnallisuuksiin. Samalla tekniikalla on mahdollista tallentaa myös lomaketietoja, jolloin tiedot tallennetaan Richien serverille ja ne toimitetaan kampanjan päätyttyä 4
asiakkaalle. Mainoksessa on mahdollista käyttää myös suoraa verkkoyhteyttä käyttävää html-lomaketta, joka tallentaa tiedot asiakkaan palvelimelle. ESIMERKKI 1 Statistiikka-eventin lisääminen esim. mainoksen painikkeeseen. <script src="richieormma.js" type="text/javascript"></script> <script type="text/javascript"> function clickbanner ()! {!! var payload = {!!! "event"! : "clickbanner"!! };!! window.richie.addevent (payload, null);! } </script>... <a href=... onclick="clickbanner('painikeavaus'); ></a> ESIMERKKI 2 Lomakkeen nimi- ja puhelinnumerotietojen tallentaminen mainosaineistosta Richien serverille. <script src="richieormma.js" type="text/javascript"></script> <script type="text/javascript">! function richie_submit() {!! var keys = ["nimi", "numero"];!! window.richie.addeventforform("yhteydenottolomake", 1, document.forms["kysely"], keys, function () {!!! $('#step1').hide();!!! $('#step2').show();!! });! } </script>... <form class="kysely1" id="kysely" name="kysely" method="post" action="#" onsubmit="richie_submit(); return false"> <div id="step1"> Jätä yhteystietosi <input type="text" name="nimi" id="nimi" placeholder="nimi"><br> <input type="text" name="numero" id="numero" placeholder="puhelinnumero"> <input id="submit" class="submit" type="submit" value="lähetä"> </div> <div id="step2" style="display: none"> Kiitos! </div> 5
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 ipadin Safari-selainta käyttäen. On huomattava, että tuettavat videomuodot vaihtelevat laite- ja käyttöjärjestelmäversiosta riippuen. Aineistojen toimitusaika Katso julkaisijan määrittelemä 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 julkaisijan määrittelemään aineistoosoitteeseen. Mukaan tieto kampanjan aloituksesta sekä kuvaus lisätyistä statistiikkaeventeistä, jotta statistiikan 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 6
tai Leena Saarinen leena@richie.fi puh. 040 560 3709 7