Digimainonnan aineisto-ohjeet

Formaatti

• jpg, png, 3rd party tag (iframe), HTML5

• Yksi linkki ja koko mainos toimii linkkialueena 

• Aineistoihin voi toimittaa omat klikki-/ impressioseurannat.

Aineiston koot

• 620 x 891 px (300 kt)

Huom.  3rd party tag -aineistot:  Sisältö voi olla kevyesti animoitua. Medialla on oikeus pyytää korjauksia toteutukseen, mikäli katsoo sen tarpeelliseksi.

Aineistojen toimitus

Aineiston toimitus 2 arkipäivää ennen kampanjan alkua.

Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta. Aineiston toimitusohje.

Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

Formaatti

• jpg, png, 3rd party tag, HTML5

• Yksi linkki ja koko mainos toimii linkkialueena

• Aineistoon voi toimittaa omat klikki-/ impressioseurannat.

• Canvaksella tehdyt animaatiot eivät toimi kunnolla iOS alustalla, emmekä suosittele niiden käyttöä, jos kampanja näkyy meidän iOS sovelluksissamme.

Aineiston koot

• 300x600px (.jpg, .png, tag, HTML5)

• Kilotavuraja 300 kt

Aineistojen toimitus

Aineiston toimitus 2 arkipäivää ennen kampanjan alkua.

Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta. Aineiston toimitusohje

Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

Kuva 600x314, max 80 kt

Otsikko max 90 merkkiä

Otsikossa ei käytetä pisteitä. Kysymysmerkki, ajatusviiva tai kaksoispiste ovat ok. Huutomerkkien käyttöä emme suosittele.

Esimerkiksi: Tunnetko arkiruokien suolapommit? TAI Moni syö tietämättään liikaa suolaa päivittäin TAI  Ensimmäinen pyörä on kuin ensirakkaus – katso motoristien upeat kuvat

Tekstin laatijan on hyvä perehtyä siihen, miten samantyyppisiä aiheita on otsikoitu ja kuvitettu valitussa mediassa aiemmin.

Ingressi (kuvausteksti) max 150 merkkiä

Otsikon ja ingressin tulee olla kieliopillisesti oikein ja hyvää suomea

Sisällön tulee lunastaa otsikon lupaus.

Mainostaja: Mainostajan nimi kuten se halutaan esittää nostossa. Max 32 merkkiä.

Tulospohjaiseen natiiviin lisätään automaattisesti aktivointitekstinä "Lue lisää". Tätä ei tarvitse toimittaa erikseen.

Yksi linkki, koko mainos toimii linkkialueena

Klikin tulee ohjata sisältöön, joka on linjassa otsikon ja ingressin kanssa (ei esimerkiksi tuotekatalogiin, yrityksen sivuston etusivulle tai verkkokauppaan).

Formaatti

• jpg, png, 3rd party tag, HTML5

• Yksi linkki ja koko mainos toimii linkkialueena

• Aineistoon voi toimittaa omat klikki-/ impressioseurannat.

• Canvaksella tehdyt animaatiot eivät toimi kunnolla iOS alustalla, emmekä suosittele niiden käyttöä, jos kampanja näkyy meidän iOS sovelluksissamme.

Aineiston koot

• 300x250px (tag, HTML5)

• 600x500px (.jpg, .png)

• Kilotavuraja 300 kt

• Huomioi kuva-aineistoja tehdessäsi: 600x500 px aineisto skaalataan puhelimen näytön leveyden mukaan, joten kannattaa suunnitella aineisto niin, että se näyttää hyvältä myös pienemmillä näytöillä (min. 300x250 px)

Aineistojen toimitus

Aineiston toimitus 2 arkipäivää ennen kampanjan alkua.

Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta. Aineiston toimitusohje

Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

Desktopiin sekä mobiiliin omat aineistot

Desktop

• 980 x 400px 

• Tiedostomuodot: JPG, PNG, HTML5, 3rd party tag

• Kilotavuraja 300 kt

• Max 5kpl per koko

• Aineistoon voi toimittaa omat klikki-/ impressioseurannat.

Mobiili

• JPG, PNG: 600x600px  tai 300x300px

• HTML5, Javascript -tagi: 300x300px

• Kilotavuraja 300 kt

• Max 5kpl per koko

• Aineistoon voi toimittaa omat klikki-/ impressioseurannat.

Huom! HTML5 aineisto voi olla joko responsiivinen tai kiinteän kokoisena 300x300. Mainospaikka skaalautuu päätelaitteen leveyden mukaan.

Aineistojen toimitus

Aineiston toimitus 2 arkipäivää ennen kampanjan alkua.

Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta. Aineiston toimitusohje

Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

Desktop

Tapetin koko on kaikissa medioissa 1600 x 1200 px, kilotavuraja 300kt.

Tiedostomuodot: jpg, png tai gif (ei animoitu)

Tapetti keskitetään sivulle jos ei mediakohtaisissa asemointiohjeissa ole muuta mainittu

Tapetti ei voi latautua tagin takaa eikä se ole klikattava.

Tapetti myydään ainoastaan paraatipaikan yhteyteen! 

Paraatimainoksen mitat 980x400 pikseliä, tiedostomuotona joko jpg, gif, png (kilotavuraja 300 kt), html5 (kilotavuraja 300 kt) tai iframe -tagi.

Huomioi aina HTML5-aineistojen linkitysten https-vaatimukset. Paraatimainos saa latautua kolmannen osapuolen tagin takaa.

Tapetin toteutuksen tulee olla hillitty ja se on hyväksytettävä medialla viimeistään 5 päivää ennen kampanjan alkua.

Medialla on oikeus pyytää korjauksia toteutukseen, mikäli katsovat sen tarpeelliseksi.

Huomioithan, että 1600×1200-kokoinen tapetti ei skaalaudu näyttöresoluution mukaan, joten pienemmissä näytöissä osa sisällöstä voi jäädä näkymättä.

Kts. mediakohtainen asemointiohje

Aineistojen toimitus

Aineiston toimitus 2 arkipäivää ennen kampanjan alkua.

Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta. Aineiston toimitusohje.

Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

Kampanjan aineistona voi olla paraati, pystyparaati tai digikokosivu tai erilaiset yhdistelmät näistä. Paras tavoittavuus saavutetaan käyttämällä kaikkia kolmea mainosmuotoa. 

Digikokosivu

• jpg, png, 3rd party tag (iframe), HTML5 

• Aineisto ei voi olla mp4

• 620 x 891 px (300 kt)

Tarkemmat ohjeet: Digikokosivu

Paraati

Desktop

• 980 x 400px 

• Tiedostomuodot: JPG, PNG, HTML5, 3rd party tag, vaakavideo mp4 (kts ohje)

• Kilotavuraja 300 kt

• Max 5kpl per koko

Mobiili

• JPG, PNG: 600x600px  tai 300x300px

• HTML5, Javascript -tagi: 300x300px

• Kilotavuraja 300 kt

• Max 5kpl per koko

Tarkemmat ohjeet: Paraati

Pystyparaati

• jpg, png, 3rd party tag, HTML5, vaakavideo mp4 (kts ohje)

• Canvaksella tehdyt animaatiot eivät toimi kunnolla iOS alustalla, emmekä suosittele niiden käyttöä, jos kampanja näkyy meidän iOS sovelluksissamme.

• 300x600px 

• Kilotavuraja 300 kt

Tarkemmat ohjeet: Pystyparaati

• Aineiston toimitus 2 arkipäivää ennen kampanjan alkua: GIF, JPG, PNG, HTML5-bannerimainokset, kolmannen osapuolen tagimateriaalit sekä näköislehti- ja mobiiliaineistot
   

• Aineistomäärä max 5 aineistoa per koko
   

• Aineiston toimitus 5 arkipäivää ennen kampanjan alkua: Erikoismainosmuodot
   

• Aineisto toimitetaan varauksen jälkeen lähetettävän aineistolinkin kautta.  Aineiston toimitusohje
   

• Jos aineiston toimituksessa latauslinkin kautta ilmenee ongelmia olethan yhteydessä sähköpostitse:  digitrafiikki@sanoma.com

1. Aineistossa on oltava yksi kokoava html-tiedosto (index.html)
    

2. Aineisto voi koostua kansiorakenteesta, jossa esimerkiksi tyylitiedostot ja kuvat sijaitsevat omissa kansioissaan.
    

3. HTML5-aineisto tulee toimittaa pakattuna tiedostona (.zip). sisältäen kaikki mainokseen liittyvät tiedostot.
    

4. Klikit tulee avautua uuteen selaimeen (_blank).
    

5. Käytä mainoskohtaisia uniikkeja tunnisteita, luokkia, muuttujia ja funktioita.
    

6. Aineiston tyylimäärittelyjen margin-arvoksi tulee asettaa 0, jotta bannerin ulkoreunoille ei ilmesty ylimääräisiä reunaviivoja.
    

7. Käytä mieluiten tuplalainausmerkkejä (").
    

8. Huomioi, että mainos julkaistaan median sivulla/sovelluksessa iframen sisällä. Tarkistathan, että klikkiseuranta on tehty ohjeistuksemme mukaisesti.
    

9. HTML oletusmerkistö on UTF-8
    

10. Tiedostokoon laskeminen: Kaikki mainokseen liittyvät tiedostot - kuvat, skriptitiedostot, fontit, tyylitiedostot - tulee laskea mainoksen tiedostokokoon mukaan.
     

11. Pidä tiedostojen määrä järkevänä, jokainen yksittäinen tiedostolataus kuormittaa ja pidentää mainoksen/sivun latausta. Mainoksen ensilatauksen requestien määrä tulee olla 15.
     

12. Mainoksessa saa olla äänet vain käyttäjän aktivoinnista.

Voit käyttää mainoksen toteuttamiseen animointityökaluja. Huomioi, että aineistoon tulee sijoittaa clickTAG, jotta mainoksen klikit välittyvät mainospalvelimelle.

Olemme luoneet yksityiskohtaiset ohjeet klikkiseurantojen lisäämiseen. Yleisohjeen lisäksi löydät omat ohjeet Adobe Edgelle ja Google Web Designerille sekä HTML5-materiaaleille, jotka on toteutettu Adobe Flashilla.

1) Sanoma Click API

Lisää seuraava koodin pätkä html-koodisi head-osioon:

<script src="https://sn.sanoma.fi/js/ClicksApi.js"></script>

2) Klikkitagien määrittäminen

Esimerkki 1: Kaksi esimerkkiä clickTagin määrittämisestä jos klikkiseuranta/laskeutumissivun URL lisätään suoraan HTML-koodiin:

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickUrl('https://yourlinkgoeshere'); return false;">Click here</a>

Esimerkki 2: Kaksi esimerkkiä clickTAGn määrittämisestä jos klikkiseuranta/laskeutumissivun URL määritellään mainospalvelimen puolella. Mikäli "clickTAG" jätetään pois, käytetään Xandr oletustagia

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag('clickTAG'); return false;">Click here</a>

<a href="javascript:void(0);" onclick="SanomaClicksApi.openClickTag(); return false;">Click here</a>

Lataa  ohje: Adobe Edge

Lataa ohje: Google Web Designer

Paranna ensilatausta

• Käytä inline CSS tyylejä ja HTML:ää, jotta mainoksen alkunäkymä latautuisi mahdollisimman nopeasti.

• Rajoita ensilatauksen riippuvuuksia renderöinnin estäviin .js ja .css tiedostoihin.

• Lataa interaktiiviset elementit viivästetysti tai toissijaisena latauksena.

• Raskaat tiedostot tulisi ladata vasta käyttäjän aktivoinnista (esim. video)

• Vältä kaikkia turhia latauksia.

• Tehostaaksesi mainoksen latautumista yhdistä tiedostot aina kun mahdollista, kuten JavaScript-kirjastot, HTML, CSS.  

• Parantaaksesi visuaalista ensikokemusta tarkista laite ja yhteysnopeus ja tarjoa optimaalisin vaihtoehto. Näytä esimerkiksi hitaammilla yhteysnopeuksilla kevyempi versio mainoksesta, jotta käyttökokemus olisi mahdollisimman hyvä.

Kuvatiedostot

• Optimoi kaikki kuvat

• Esilataa kuvat kun tarpeellista

• Yhdistä kuvat kun mahdollista (sprite sheet)

• Käytä sprite sheetejä useamman kuvan ja animaation näyttämiseen

Vältä näitä

• Mainoksessa ei saa käyttää häiritsevän nopeita/vilkkuvia animaatioita grafiikassa, tekstissä eikä taustan elementeissä.

• Vältä animaatioita, jotka syövät prosessoritehoja. (20% keskimääräinen prosessoritehon kuormitus hyväksytään, pysyvät 70% piikit hylätään.)

• Vältä tai vähennä:

  • eval() käyttöä välttääksesi turvallisuusriskit

  • Vältä globaaleja muuttujia

  • luuppien ja ajastimien käyttöä (tyhjennä/peruuta setInterval ja setTimeout heti, kun se on suoritettu)

  •  setInterval

  •  setTimeout

  •  requestAnimationFrame

• Minimoi DOM yhteydet

• Vältä jQueryn käyttöä - jQuery ei ole suositeltavaa HTML5 mainoksissa, sillä sen suorituskyky on huono varsinkin mobiililaitteissa. Lisäksi jQuery on tarpeettoman raskas, suurinta osaa kirjaston funktioista ei tarvita. Sen sijaan voit käyttää kevyempiä JS-kirjastoja, kuten GreenSock, Vanilla Javascript tai Zepto JavaScript

Voit käyttää mainoksen toteuttamiseen animointityökaluja, kuten esimerkiksi Adobe Edge ja Google Web Designer. Huomioi, että aineistoon tulee sijoittaa clickTAG, jotta mainoksen klikit välittyvät mainospalvelimelle.

Olemme luoneet yksityiskohtaiset ohjeet klikkiseurantojen lisäämiseen. Yleisohjeen lisäksi olemme kasanneet omat ohjeet klikkiseurantojen lisäämiseen Adobe Edgelle ja Google Web Designerille sekä HTML5-materiaaleille, jotka on toteutettu Adobe Flashilla tai käännetty HTML5-muotoon Swiffylla.

Kilotavurajan laskeminen: kaikki mainokseen liittyvät tiedostot lasketaan mukaan.

Mainoksen ensilatauksen requestien maksimimäärä on 15.
Vältä turhia ensilatauksen jälkeen tapahtuvia latauksia. Jos se on mainoksen kannalta välttämätöntä, jälkilataus voi olla kilotavurajoiltaan maksimissaan samansuuruinen kuin ensilataus.

Käyttäjän aktivoinnista (esim. mouseover tai klikkaus) tapahtuva jälkilataus voi olla suurempi.

• Jos haluat paraatin ja tapetin sulautuvan saumattomasti yhdeksi kokonaisuudeksi, kannattaa paraati luoda läpinäkyvällä taustalla. Näin muutamien pikseleiden heitot eri sivupohjissa eivät aiheuta saumoja tapetin ja paraatin välille.
   

• Tapetin tärkeimmät elementit, kuten logot, tarjoukset ja tekstit, kannattaa laittaa riittävän ylös ja lähelle sivun sisältöä (ei kuitenkaan ihan kiinni sisältöön), jotta tapetti toimii mahdollisimman hyvin eri kokoisilla näytöillä. Pienimmillä näytöillä tapetin ala ja ulkoreunat jäävät ruudun ulkopuolelle.
   

• Koska tapettimainoksessa paraati näkyy vain sivun alussa, mainoksen teho paranee, kun tärkein viesti on näkyvillä myös tapetissa, sivun reunoilla. Dynaamisessa tapetissa viesti voi ilmestyä reunoille kun käyttäjä selaa sivua alemmas.
   

• Tapettiaineiston koon saa pienemmäksi, kun jättää sisällön taakse jäävän alueen tyhjäksi. Kannattaa kuitenkin jättää vähän marginaalia, jotta aineisto ei ole liian herkkä pienille leveyden vaihteluille.
   

• Ohjelmallisesti ostetun tapetin ohjeet löytyvät täältä.

• Tapettiin kuuluu paraati 980x400px sekä tapetti 1600x1200px.

• Tapetin ja paraatin yhteispainoraja on 300kt.

• Tapettiaineisto toimitetaan aina kuvana (.jpg, .png)

• Paraatin ja tapetin yhdistelmässä tapettiosio ei ole klikattava.

• Paraatiaineiston voi toimittaa kuva-, tagi- tai HTML5-aineistona.

• Taustaväri mahdollinen, ilmoita hexa-koodina.

• Tapetti keskitetään sivulle jos ei mediakohtaisissa asemointiohjeissa ole muuta mainittu

• Medialla on oikeus pyytää korjauksia toteutukseen, mikäli katsovat sen tarpeelliseksi.

• Huomioithan, että 1600×1200 -kokoinen tapetti ei skaalaudu näyttöresoluution mukaan, joten pienemmissä näytöissä, viewportin leveys alle 1207 px, osa sisällöstä voi jäädä näkymättä.

Mediakohtaiset tapettien asemointiohjeet:

Uutissivustot

• Sisällön leveys on 980px, mutta keskitys tapahtuu 1190px leveyden mukaan. Jos taustakuva on kovin leveä, se ei näy kokonaisena niille joilla on pienemmät näytöt.

• Huomioitavaa taustakuvan suunnittelussa: taustakuva keskitetään sivulle niin, että kuviteltu sisältö on 1190px, mutta koska sisällön näkyvä leveys on 980px, niin oikealle puolelle jää enemmän tilaa tapetin kuvalle. Tapettia ei ole mahdollista kohdistaa millään muulla tavalla.

Katso mallipohja tästä

Lataa tästä PSD-pohja (Psd-pohjan saat ladattua kopioimalla linkin osoitteen uuteen välilehteen.)

Lifestyle: Hyvaterveys.fi, Kodinkuvalehti.fi, Etlehti.fi, Tiede.fi, Vauva.fi, Soppa365.fi 

• Vinkki: Sisältöalueen (1250 px) voit täyttää valkoisella, jotta saat tapetin kilotavurajoitusten mukaiseksi. Ei kuitenkaan liian tiukkaa rajausta jotta sallii pienen asemointiheiton. Tapetti keskitetään sivulle liitteenä olevan PSD-tiedoston mukaisesti.

Katso mallipohja tästä

Lataa tästä PSD-pohja (Psd-pohjan saat ladattua kopioimalla linkin osoitteen uuteen välilehteen.)

• Koko: 1600 x 1200 px

• Kilotavuraja: 300 kt

• HTML5 tai JPG/PNG

• Dynaaminen tapetti koostuu yhdestä tiedostosta. Dynaamisen tapetin yhteydessä ei toimiteta erillistä paraatiaineistoa

• Koko tapetin ja paraatin alue on klikattava.

• Tapetin toteutuksen tulee olla hillitty ja rauhallinen. Animaation tulee loppua 5 sekunnin jälkeen. 

• Medialla on oikeus pyytää korjauksia toteutukseen, mikäli tämä katsotaan käyttökokemuksen kannalta tarpeelliseksi.

• Taustaväri mahdollinen, ilmoita hexa-koodina.

• Huomioithan, että 1600×1200 -kokoinen tapetti ei skaalaudu näyttöresoluution mukaan, joten pienemmissä näytöissä, viewportin leveys alle 1207 px, osa sisällöstä voi jäädä näkymättä.

• Dynaamista tapettia ei voida ajaa kolmannen osapuolen tagin kautta.

• HTML5 dynaaminen tapetti toimii suurimmassa osassa selaimia. On kuitenkin huomioitava, että se ei toimi Internet Explorer 9:ssä tai sitä vanhemmissa selaimissa eikä selaimissa, joista puuttuu HTML5-tuki. Backup-kuva ei ole mahdollinen.

• Klikkiseurannan lisääminen: löydät tarkemmat ohjeet täältä

• Ohjelmallisesti ostetun tapetin ohjeet löytyvät täältä.

Toimita seuraavat elementit/tiedot trafiikille:

• Mainoksen HTML-sivun URL, jos mainos hostataan esim. mainostajan tai mainostoimiston palvelimella TAI zip-tiedosto, joka sisältää mainoksen HTML-sivun ja sen käyttämät kuva-, skripti- ja tyylitiedostot

• Tapetin ympärille jäävän tilan taustavärin koodi (esim. ”#30821b”) tai malli taustaväristä

• Tieto käytetäänkö lukittua vai skrollaavaa tapettivaihtoehtoa

• Kolmannen osapuolen seurantapikselin osoite (valinnainen)

Dynaamisen tapetin asemointi

Uutissivustot

• Dynaaminen tapetti voi olla lukittu tai skrollaava

• Sisällön leveys on 980 px, mutta keskitys tapahtuu 1190 px leveyden mukaan (ks. PSD-pohja).

• Vinkki: Voit täyttää sisältöalueen (980 px) valkoisella, jotta saat tapetin kilotavurajoitusten mukaiseksi. Ei kuitenkaan liian tiukkaa rajausta jotta sallii pienen asemointiheiton. 
  Katso mallipohja tästä
  Lataa tästä PSD-pohjat (Psd-pohjan saat ladattua kopioimalla linkin osoitteen uuteen välilehteen.)

Lifestyle: Hyvaterveys.fi, Kodinkuvalehti.fi, Menaiset.fi, Etlehti.fi, Tiede.fi, Vauva.fi, Soppa365.fi ja Akuankka.fi

• Dynaaminen tapetti voi olla lukittu

• Sivustojen sisällön leveys on 1250px. Vinkki: Sisältöalueen (1250 px) voit täyttää valkoisella, jotta saat tapetin kilotavurajoitusten mukaiseksi. Ei kuitenkaan liian tiukkaa rajausta jotta sallii pienen asemointiheiton. 

• Tapetti keskitetään sivustolle liitteenä olevan PSD-tiedoston mukaisesti
  Katso mallipohja tästä
  Lataa tästä PSD-pohja (Psd-pohjan saat ladattua kopioimalla linkin osoitteen uuteen välilehteen.)

Toteutus koostuu videosta, jonka tulisi olla kokoa 800x600px (media asettaa sen koko sivun kokoiseksi) sekä videon päälle tulevasta 980x400px paraatimainoksesta. Se kannattaa tehdä osittain läpinäkyväksi, jolloin video pyörii sen alla.

Paraati

• Koko: 980x400 px

• Tiedostomuoto: jpg, png, HTML5 (max 250kt)

• Paraati voi olla osittain läpinäkyvä (png tai html5)

• Paraati on klikattava

Tapetti (video)

• 800x600 px kokoinen video

• Tiedostokoko: enintään 3,5 Mt 

• Kuvataajuus: 25 fps 

• Tiedostomuoto: mp4 

• Koodekki: H.264/MPEG-4 AVC

• Ei ääntä

• Tapetin alue on klikattava 

Videotaustasta:

• Video venytetään kattamaan koko taustan, video käynnistyy automaattisesti ja toistetaan luupilla.

• Video voidaan asettaa pysähtymään käyttäjän scrollatessa alas. Oikeaan yläkulmaan tulee pause-/play-nappula.

• Video lähtee heti pyörimään kun käyttäjä menee sivustolle (videossa ei voi olla ääntä).