Tablet-kokosivu kuvana

Pystyorientaatio

1536 x 2008 px (retina) 

Vaakaorientaatio

2048 x 1496 px (retina)

Jos mainosaineisto sisältää pelkästään kuvaa, aineiston voi toimittaa png-kuvana tai hyvälaatuisena jpg-kuvana, jolloin aineistoon lisätään automaattisesti koko kuva-alueen kokoinen linkkialue. Pysty- ja vaakakuvien yhteenlaskettu maksimitiedostokoko on 5 MB. Yhden kuvan maksimitiedostokoko on 3 MB.

Kuva-aineisto skaalautuu automaattisesti Androidin erikokoisille näytöille. Reunoille lisätään automaattisesti mustaa marginaalia, jos laitteen näytöllä on erilainen kuvasuhde. 

Tablet-kokosivu käyttäen rich mediaa

Mainosnäkymät toimivat samalla tavalla kuin laitteiden selain, eli mainokset toteutetaan HTML5, CSS ja Javascript -tekniikoilla vastaavalla tavalla kuin verkkosivustot iPadillä ja Androideilla. Richie Ads tukee kaikkia laitteen tukemia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video- elementit, CSS-animaatiot paikannus, gyroscope, accelerometer yms.). 

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 alaspäin vastaavalla tavalla kuin millä tahansa verkkosivulla. Huomaa, että voit käyttää usein mainosaineistona myös mainostajan responsiviista kampanjasivua, jolloin mainostettava sisältö on heti käyttäjän nähtävillä ylimääräisen klikkauksen sijaan, ja mainos saa näin parhaimmat mahdolliset tehon.

Mainosaineiston tulee toimia myös offline-tilassa, joten huomioi, että esimerkiksi Javascript-tiedostot ja fonttitiedostot sisältyvät aineistopakettiin. 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ä. 

Aineisto kannattaa tehdä responsiiviseksi määrittelemällä elementtien sijainnit suhteellisiksi siten, että mainos toimii sekä iPad- että Android-laitteilla, jolloin aineisto voidaan ajaa kaikilla alustoilla. Huomaathan tehdessä aina Androidin erilaiset näyttökoot, jotka vaihtelevat hyvin pienistä laitteista suuriin tabletteihin: kannattaa testata aineisto siis myös erittäin kapealla selainikkunalla. Jos aineisto on optimoitu pelkästään iPadille, kannattaa toimittaa aineistosta myös kuva-aineisto-ohjeilla tehdyt still-kuvat.

Suunnittelussa kannattaa huomioida, että käyttäjä jää hyvin harvoin odottelemaan mainoksen sisällön ilmestymistä, joten emme suosittele käyttämään mainoksessa odottelua vaativia introanimaatioita. Animaatioita voi käyttää eleissä ja elementeissä tehosteena, kunhan sisältö on käyttäjän nähtävillä välittömästi. Suosittelemme kuitenkin välttämään raskaita, paljon laitteen työmuistia kuluttavia animaatioita.

Iframeja käytettäessä on huomioitava, että näihin ei tule upottaa linkkejä tai interaktioita. 

Mainosaineiston on oltava MRAID-yhteensopiva.

Esimerkkiaineisto

<!DOCTYPE html>
<html>
    <head>
        <meta charset="utf-8">
        
        <!-- This tag is required, and it must be included in document
        before any other script which uses MRAID is included -->
        <script src="mraid.js"></script>
        
        <script type="text/javascript">
        function onMraidInit() {
            if (mraid.getState() === 'loading') {
                mraid.addEventListener('ready', onSdkReady);
            } else {
                onSdkReady();
            }
        }

        function onSdkReady() {
            // Wait for the ad to become viewable for the first time
            if (mraid.isViewable()) {
                adDidAppear();
            } else {
                mraid.addEventListener('viewableChange', function(viewable) {
                    if (viewable) {
                           adDidAppear();
                    } else {
                           adDidDisappear();
                    }
                });
            }
        }

        function adDidAppear() {
            // The ad is now on screen
        }
        
        function adDidDisappear() {
            // The ad is now off-screen
        }
        
        // This function starts MRAID initialization
        onMraidInit();
        </script>
    </head>

    <body>
        <!-- ad content goes here -->
    </body>

</html>

Kokosivun aineistot toimitetaan zip-tiedostona. Aineiston index.html -tiedoston tulee olla aineiston juuressa. Mahdolliset muut HTML-tiedostot tulee sijoittaa myös aineiston juureen. Loput tiedostot voivat olla juuressa tai kansioissa. Kokosivun aineisto-zipin tiedostokokoraja on 5 megatavua. 

Tekniikka ja tiedostokoot

Kokosivun mainokset toteutetaan HTML, CSS ja Javascript -tekniikoilla. Richie Ads tukee uusimpia HTML5- ja CSS3-ominaisuuksia (esim. audio- ja video- elementit, CSS-animaatiot, yms.). Pieniä poikkeuksia lukuunottamatta Richie Adsin mainosnäkymät toimivat samalla tavalla kuin laitteiden selain. Mainosta voi siis ajatella web-sivuna, joka sisältää kaikki tarvittavat tiedostot paikallisesti.

Kokosivun aineistot toimitetaan zip-tiedostoina. Aineiston index.html -tiedosto tulee olla aineiston juuressa, kaikki muut tiedostot voivat olla kansioissa. Kaikista html-aineistoista toimitetaan sekä Retina että ei-Retina - kokoversiot. Pelkkää kuvaa sisältävät aineistot voidaan toimittaa png-kuvina pelkästään retina-koossa.

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ä.

Mainoksen testaaminen iOS Richie Ads Previewllä

Testaa mainosaineistosi toimivuus oikeassa ympäristössä analytiikkoineen lataamalla Richie Ads Preview -sovellus App Storesta iPadille tai iPhonelle.

Sovellus noutaa mainosaineistoja esikatseltavaksi Richie Ads Preview- palvelusta QR-koodien välityksellä. Skannaamalla QR-koodin sovelluksella voit esikatsella ja tarkistaa aineiston toimivuuden muutamassa sekunnissa.

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. 

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

Linkkimääritys

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ä. Jos linkkimääritystä ei muokata, sivusto aukeaa suoraan mainosnäkymän sisällä, eikä käyttäjä pääse palaamaan sovelluksen sisältöön. 

Mahdollinen mediatoimiston seuranta-URL on liitettävä valmiiksi mainosaineistoon, joten se kannattaa kysyä mediatoimistolta jo etukäteen aineistoa tehtäessä. 

Testaaminen selaimessa

Aineistoa voi testata selaimessa ilman virheilmoituksia lisäämällä URLin loppuun: ?richie_browser_mode=1

Video mainoksessa

Videotiedosto mahdollista ladata mainoksen mukana laitteelle, ja näin mahdollistaa toisto myös offline-tilassa, jos aineisto-zipin yhteenlaskettu tiedostokoko jää alle 5 MB:n (mobiilissa 3 MB). 

Suuremmat videotiedostot on streamattava asiakkaan/digitoimiston omalta palvelimelta. Videon streamauksessa on käytettävä HTTPS-protokollaa.

Huomaa, että autoplaytä on käytettävä ainoastaan siten, että äänet ovat oletuksena mutella, eli videon äänet kytketään päälle vasta käyttäjän aloitteesta.

Muistathan lisätä videon starttiin analytiikka-event esimerkkiohjeillamme. Huomaa, että embedded Youtube-videoista ei tallennu analytiikkaa Richie Adsin kampanjaraportille.

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. 

Esimerkkiaineistoja

Ohessa muutamia esimerkkiaineistoja, joita voit käyttää mainosten pohjana kuvia ja tekstiä vaihtamalla. Huomaa, että mainospohjat ovat vain esimerkkejä, voit aina tehdä omanlaisiasi käyttäen haluamiasi työkaluja. Testaa aina toteutuksesi Richie Preview -sovelluksilla. 

Blog article

Responsve Bootstrap blog article template for native advertising full page ads (tablet and mobile).



Download Blog article

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.