Animaatiot rich media -mainoksissa

Richie Ads -mainokset on suunniteltu niin, että ne ovat käytettävissä heti kun käyttäjä kohtaa mainoksen siirryttyään mainossivulle pyyhkäisyeleellä. Tämän mahdollistamiseksi mainosten lataus ja HTML:n renderöinti käynnistetään jo taustalla ennen kuin käyttäjä on saapunut mainokseen. Kun käyttäjä avaa mainoksen, hän näkee ensin esikatselukuvan mainoksesta. Tästä esikatselukuvasta tehdään pehmeä ristivaihto oikeaan mainossivuun sitten kun mainoksen HTML on valmis näytettäväksi.

Tästä arkkitehtuurista johtuen mainosten ei tule käynnistää animaatioita heti sivun latausvaiheessa vaan vasta, kun mainos saa tiedon lukijan saapumisesta mainossivulle. Muussa tapauksessa mainos kuluttaa taustalla resursseja turhaan animointiin. Pahimmassa tapauksessa animaatio jää piiloon mainoksen esikatselukuvan alle.

Richie Ads ilmoittaa mainokselle käyttäjän saapumisesta sivulle MRAID 2.0 -rajapinnan kautta. MRAID (“Mobile Rich Media Ad Interface Definitions”) on tähän käyttöön suunniteltu IAB:n (Interactive Advertising Bureau) rajapintastandardi.

Alla on kuvattu esimerkki siitä, miten MRAID alustetaan ja miten siltä saa tiedon käyttäjän saapumisesta sivulle. Esimerkissä animaatiot voi käynnistää, kun adDidAppear()-funktiota kutsutaan. Animaatioiden toimivuus tulee tämän jälkeen testata Richie Ads Preview -sovelluksella. Huom: Richie Ads ja Richie Ads Preview -sovellus lisäävät mraid.js-tiedoston aineistoon automaattisesti. Sitä ei siis tarvita mainospaketissa.

<!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>