Android tablet -kokosivu

Pystyorientaatio

1600 x 2560 px

Vaakaorientaatio

2560 x 1600 px

Aineisto kannattaa tehdä responsiiviseksi määrittelemällä elementtien sijainnit suhteellisiksi siten, että mainos toimii sekä iPad- että Android-tabletilla, jolloin aineisto voidaan ajaa kaikilla alustoilla.

Kokosivun mainos näytetään artikkelien välissä, käyttäjä saapuu mainokseen ja poistuu mainoksesta swipellä. Mainosaineisto voi jatkua alaspäin pituussuunnassa, jolloin käyttäjä scrollaa alas.

Html-toteutuksessa on huomioitava, että aineisto on tehtävä skaalautuvaksi erikokoisille näytöille määrittelemällä kuvat ja html-elementit suhteellisiksi. 

Tekniikka ja tiedostokoot

Kokosivun mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video- elementit, CSS-animaatiot, yms.). Pieniä poikkeuksia lukuunottamatta Richien mainosnäkymät toimivat samalla tavalla kuin laitteen selain. Laitteen selain 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 aineisto-zipin 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ä. Pelkkää kuvaa sisältävät aineistot voidaan toimittaa jpg- tai png-kuvina. 

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();}). Erityisesti jotkin animaatiotyökalut lisäävät tätä automaattisesti, mutta voit testata mainoksesta poistumisen Richie Preview -sovelluksella. 

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. 

Mainoksen sisäinen analytiikka

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.

ESIMERKKI 1
Eventin lisääminen esim. mainoksen painikkeeseen.
<script type="text/javascript">
    function clickBanner (event_name)
    {
      richie.addEvent(["clickBanner", event_name]);
    }
</script>
...
<a href="..." onclick="clickBanner('painikeavaus')" ></a>

ESIMERKKI 2
Analytiikka-eventin lisääminen videon starttiin (ensimmäinen play eriteltynä):
<script type="text/javascript">

  var playcount = 0;

  function playEvent () {
    var eventname = "otherPlay";
    playcount++;
    if (playcount === 1) {
      eventname = "firstPlay";
    }
    richie.addEvent([eventname]);
  }
 
</script>
...
<video poster="poster.jpg" onplay="playEvent()">
<source src="http://streaming.server.com/playlist.m3u8" type="video/mp4">

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" />

Aineistojen toimitusaika

Valmiiden aineistojen toimitus vähintään 3 arkipäivää ennen kampanjan alkua, jotta aineistojen ja analytiikan toimivuus ehditään testaamaan ja mahdolliset ongelmat selvittämään ajoissa. 

Mainoksen testaaminen Android Richie Ads Previewllä

Mainosaineiston toimivuutta Android-laitteella voi testata lataamalla Richie Ads Preview -sovellus Google Play Storesta. Sovellus liitetään ensimmäisellä käyttökerralla omaan Dropbox-tiliin, jonka jälkeen aineistoja voi testata sovelluksella siirtämällä mainokset kansioina Dropboxiin luotuun Apps/Richie Ads Preview -kansioon. Kansio on yhteinen iOS-sovelluksen kanssa, vanhat Richie Preview Android -kansiot eivät ole käytössä, ja ne voidaan poistaa.

Sovelluksen avulla voit testata myös swipe-eleen toimivuuden, jotta aineisto ei estä käyttäjää pääsemästä seuraavaan artikkeliin sekä mainoksen sisäisen analytiikan tallentumisen. 

Esimerkkiaineistot tablet kokosivu


iPad & Android tablet example ad (still image)

Responsiivinen aineisto, jossa Android-tabletin taustakuva cropataan iPadin näytöllä. Aineiston kuviin on merkitty turva-alueet.

Download iPad & Android tablet example ad (still image)

Bootstrap ad example

Responsiivinen mainosaineisto lisätietonäkymin. Aineisto on tehty käyttäen Bootstrap-pohjaa.

Download Bootstrap ad example

Richie Showcase -sovellus

Esimerkkejä aiemmista mainostoteutuksista voit katsella Richie Showcase iPad-sovelluksesta, joka on ladattavissa App Storesta. Kaikki Showcase-sovelluksen iPad-mainoksissa olevat toiminnallisuudet ovat toteutettavissa myös muiden alustojen mainoksiin.