Για την υλοποίηση ενός html5 δημιουργικού μπορείτε να χρησιμοποιήσετε το επιθυμητό javascript framework.

Transcript

1 HTML5 Creatives

2 Βασικές οδηγίες Για την υλοποίηση ενός html5 δημιουργικού μπορείτε να χρησιμοποιήσετε το επιθυμητό javascript framework. Το τελικό δημιουργικό πρέπει να είναι συμβατό με mobile συσκευές, καθώς και να υποστηρίζεται από Internet Explorer 9 και πάνω. Το user experience ή animations δεν είναι απαραίτητο να είναι κοινό σε όλους τους browsers, αλλά να παρέχεται ένα βασικό fallback experience. Παραδιδόμενα υλικά: μία html σελίδα και όλα τα απαραίτητα assets του δημιουργικού (πχ css, images, js). Εισάγετε το adman.js script στο head τμήμα της σελίδας σε κάθε τύπο δημιουργικού για την ορθή διασύνδεση με την υπηρεσία ADMAN. <script src=" Μέτρηση clicks Για την καταμέτρηση των clicks από τον ADMAN κάθε click πρέπει να οδηγεί στην διεύθυνση που θα ληφθεί από την εντολή Adman.html5API.get('click). Παράδειγμα με window.open: window.open(adman.html5api.get('click')); Παράδειγμα με click event σε element: <div onclick="window.open(adman.html5api.get('click'))"></div> Κατασκευή με Hype window.open(decodeuri(adman.html5api.get('click'))); Μετατροπή από Flash (Swiffy) ADMAN by Phaistos Networks S.A. 1

3 Αν το Flash banner ήταν σύμφωνα με τις εντολές για click button του Adman (_root.go ή root.loaderinfo.parameters.go), προσθέστε με την εντολή setflashvars το click URL, όπως στο παρακάτω υπόδειγμα: <script src="//static.adman.gr/adman.js"></script> var stage = new swiffy.stage( document.getelementbyid('swiffycontainer'), swiffyobject, {); stage.setflashvars("go="+encodeuricomponent(adman.html5api.get('click'))); stage.start(); </script> Αν το Flash banner είχε διαφορετική εντολή στο click button (π.χ. clicktag ή clicktag), αντικαταστήστε ανάλογα την λέξη go στην εντολή setflashvars: stage.setflashvars( "clicktag="+encodeuricomponent(adman.html5api.get('click'))); Σε περίπτωση που το flash banner δεν είχε click button, προσθέστε το click event στο stage element, παραλείποντας την εντολή setflashvars: <div id="swiffycontainer" style="width: 300px; height: 250px;" onclick="window.open(adman.html5api.get('click'))"> </div> Τέλος προσθέστε στο style το rule: canvas {cursor: pointer; Preloader Σε creatives με preloader, που φορτώνουν δεύτερη html σελίδα έπειτα από ενέργεια του χρήστη, δηλώστε στο URL της νέας σελίδας το τρέχων location.search ως εξής: window.open("video.html" + window.location.search, "_self"); ADMAN by Phaistos Networks S.A. 2

4 Μέτρηση Interactions Τα interactions αναφέρονται στην ανίχνευση την αλληλεπιδράσεων του χρήστη με το δημιουργικό. Για την καταμέτρηση ενεργειών από τον ADMAN του χρήστη, πρέπει να προστεθεί επιπλέον javascript κλήση το όρισμα το όνομα του εκάστοτε interaction. Ενημερώστε τον διαχειριστή του Adman για το όνομα του interaction. Adman.track(Adman.html5API.get('interaction_name')); Παράδειγμα: var interactclickhandler = function () { console.log('interaction_name'); //usefull for traffickers Adman.track(Adman.html5API.get('interaction_name')); Κατεβάστε demo αρχεία Μετατροπή από flash Στην αντίστοιχη ενέργεια του χρήστη κάνετε κλήση της javascript function μέσω ExternalInterface API. AS2: import flash.external.*; ExternalInterface.call('interaction_name'); AS3: import flash.external.externalinterface; ExternalInterface.call('interaction_name'); Έπειτα στην html σελίδα συμπληρώστε στην javascript function: <script src="//static.adman.gr/adman.js"></script> var stage = new swiffy.stage( document.getelementbyid('swiffycontainer'), swiffyobject, {); stage.setflashvars("go="+encodeuricomponent(adman.html5api.get('click'))); ADMAN by Phaistos Networks S.A. 3

5 Expanding creatives Expand Έπειτα από ενέργεια του χρήστη, είτε άμεσα εάν πρόκειται για δημιουργικό που είναι expanded εξαρχής, πρέπει να εκτελεστεί η expand εντολή: Adman.html5API.expand(); Collapse Αντίστοιχα όταν το δημιουργικό γίνει collapsed, είτε με ενέργεια του χρήστη ή έπειτα από τέλος του εικαστικού, πρέπει να εκτελέστει η παρακάτω εντολή: Adman.html5API.collapse(); Κατεβάστε demo αρχεία Μετατροπή από Flash Ακολουθείτε τις οδηγίες του ADMAN για Expanding flash creatives. Έπειτα στη html σελίδα, συμπεριλαμβάνετε τις εντολές όπως στο υπόδειγμα <script src="//static.adman.gr/adman.js"></script> var stage = new swiffy.stage( document.getelementbyid('swiffycontainer'), swiffyobject, {); stage.setflashvars("go="+encodeuricomponent(adman.html5api.get('click'))); stage.setflashvars('admaninstance=adman.html5api'); </script> Floating creatives Close Κλήση της εντολής Adman.html5API.done() μετά από click στο close button Adman.html5API.done(); ADMAN by Phaistos Networks S.A. 4

6 Αυτόματο κλείσιμο Κλήση είτε με timeout είτε μετά από το τέλος του animation, της παραπάνω εντολής. Παράδειγμα με timeout για κλείσιμο μετά από 10 δευτερόλεπτα: settimeout(function() { Adman.html5API.done();, 10000); Κατεβάστε demo αρχεία Μετατροπή από Flash Ακολουθείτε τις οδηγίες για flash floating banners για click & close button, καθώς και timeout (ExternalInterface.call("done");). Έπειτα στην html page συμπεριλάβετε τις εντολές για το click και τον ορισμό της done function για το κλείσιμο, όπως παρακάτω: <script src="//static.adman.gr/adman.js"></script> var stage = new swiffy.stage( document.getelementbyid('swiffycontainer'), swiffyobject, {); stage.setflashvars("go="+encodeuricomponent(adman.html5api.get('click'))); stage.start(); var done = function () { Adman.html5API.done(); </script> Interstitial creatives Μία interstitial page πρέπει να έχει τον παρακάτω βασικό κώδικα: <script src=" // Don't change this var matches = document.location.search.split(' '), url = matches[0] && decodeuricomponent(matches[0].match(/adman=(.*)/)[1]), go = matches[1] && decodeuricomponent(matches[1]), ADMAN by Phaistos Networks S.A. 5

7 Για το redirection στο site μετά από μερικά δευτερόλεπτα, εκτελέστε την εντολή done με χρήση timeout: settimeout(done, 10000) Αντίστοιχα αν υπάρχει κάποιο link για την επιστροφή στο site, καλέστε την εντολή done όπως παρακάτω: <a href="#" onclick="done();" class="back">επιστροφή στο site</a> Για την καταμέτρηση clicks ορίστε με click event και καλέστε την εντολή window.open(go): <div id="banner" onclick="window.open(go)"></div> Κατεβάστε demo σελίδα Μετατροπή από Flash Συμπεριλάβετε στην html σελίδα της εντολές για το click και το timeout όπως στο παρακάτω υπόδειγμα: var stage = new swiffy.stage(document.getelementbyid('swiffycontainer'), swiffyobject, {); // Don't change this var matches = document.location.search.split(' '), url = matches[0] && decodeuricomponent(matches[0].replace(/\?adman=/, '')), go = matches[1] && decodeuricomponent(matches[1]), done = function () { top.location = url; // redirects user back to site ; stage.setflashvars("go="+go); stage.start(); settimeout(done, 10000); </script> ADMAN by Phaistos Networks S.A. 6

8 Sidekick [Rising Star] Το Sidekick αποτελείται από δύο ξεχωριστά δημιουργικά/αρχεία. Ένα In-page creative, όπου έπειτα από click "σπρώχνει" την σελίδα αριστερά και εμφανίζεται ένα μεγαλύτερο δημιουργικό (slider). Η μετακίνηση της σελίδας είναι ίση με το πλάτος του slider banner. Show sidekick button To in-page creative πρέπει να έχει ένα button με την εξής εντολή: Adman.html5API.showSlider(); Close sidekick button Και τα δύο δημιουργικά πρέπει να έχουν button ώστε ο χρήστης να έχει την δυνατότητα κλείσει το sidekick, αλληλεπιδρώντας με το καθένα από αυτά. Στα buttons πρέπει να προστεθεί η εξής εντολή: Adman.html5API.hideSlider(); Callback function (όταν το Sidekick κλείνει) Εφόσον ο χρήστης μπορεί να κλείσει το sidekick αλληλεπιδρώντας με ένα από τα δύο δημιουργικά, πρέπει να προστεθεί μία callback function sliderclosed' στο window. Μέσω αυτής της function κάθε φορά το έτερο δημιουργικό θα λαμβάνει μήνυμα ότι έχει κλείσει sidekick, ώστε για παράδειγμα να εμφανίζεται ξανά το button για την εμφάνιση του sidekick. window.sliderclosed = function () { /* go to frame where show button is shown */ Slider [Rising Star] Όμοιο με το sidekick, με την διαφορά ότι το in-page creative είναι μία οριζόντια μπάρα στο κάτω μέρος της σελίδας και έπειτα η σελίδα μεγαλώνει και γίνεται scroll προς τα δεξία, μέχρις ότου να μην εμφανίζεται καθόλου το content της σελίδας. ADMAN by Phaistos Networks S.A. 7

9 Οι εντολές είναι ίδιες με εκείνες του Sidekick (δείτε παραπάνω). Filmstrip [Rising Star] Το FilmStrip creative αποτελείται από 5 sections (σε ένα αρχείο). Σε αυτό υπάρχουν previous και next buttons, ώστε ο χρήστης να πλοηγείται σε προηγούμενο ή επόμενο section αντίστοιχα. Σε κάθε επόμενη προβολή το banner θα εμφανίσει το επόμενο section από αυτό που έχει σταματήσει ο χρήστης. Για την ανάπτυξη Filmstrips creatives ακολουθείτε τις βασικές οδηγίες παραπάνω. Έπειτα με την χρήση cookie κρατήστε σε ποιο section είχε σταματήσει ο χρήστης όταν πατάει το button για το επόμενο ή προηγούμενο section. Ενδεικτικά ανάθεση cookie στον χρήστη με χρήση Adman API: Adman.Utils.setCookie('adman-filmstrip', currentsection); Πριν από την έναρξη του ad αν βρεθεί το cookie προχωρήστε το επόμενο section ή διαφορετικά στο πρώτο. Ενδεικτικός κώδικας για τον υπολογισμό του επόμενου section: var totalsections = 5; var currentsection = 0; var storedsection = Adman.Utils.getCookie('adman-filmstrip')? Adman.Utils.getCookie('adman-filmstrip')*1 : 0; if (storedsection!== totalsections) { currentsection = storedsection + 1; if (currentsection) { /* add your code here to show the current section */ Adman.Utils.setCookie('adman-filmstrip', currentsection); </script> ADMAN by Phaistos Networks S.A. 8

10 Synergy/Synchronized Τα synergy ή synchronized δημιουργικά αποτελούνται από 2 ή περισσότερα html αρχεία. Για τον συγχρονισμό τους έπειτα από ενέργεια του χρήστη απαιτείται η χρήση javascript εντολών με κλήσεις από τα iframes προς το parent window και ανάποδα. Για παράδειγμα έστω ότι έχουμε ένα synergy με ένα 970x250 html creative και ένα 300x250 creative. Θέλουμε με click στο 300x250 να ξεκινήσει ένα video στο 970x250. Εντολή στο 300x250: Adman.html5API.send('sync', {fn: 'playvideo'); Εντολή στο parent window: window.playvideo = function () { var = iframe_970x250 = document.getelementbyid('iframe_970x250'); Adman.html5API.send('sync', {fn: 'playvideo', iframe_970x250); Εντολή στο 970x250: window.playvideo = function () { /* start playing video */ Η αλληλουχία των εντολών έχει ως εξής: Το 300x250 στέλνει την εντολή playvideo στο parent window Το parent window λαμβάνει την εντολή playvideo, και εφόσον βρεθεί η αντίστοιχη function εκτελείται και έπειτα στέλνεται ξανά η ίδια εντολή προς το 970x250 iframe. To 970x250 iframe λαμβάνει την εντολή playvideo και εφόσον υπάρχει η αντίστοιχη function εκτελείται και εκείνη. Επίσης μπορείτε να δίνεται arguments για την εκτέλεση της εντολή. ADMAN by Phaistos Networks S.A. 9

11 Αν στο παραπάνω παράδειγμα υπήρχαν 3 buttons στο 300x250 και αντίστοιχα 3 videos στο 970x250 και με click του χρήστη στο αντίστοιχο button, πρέπει να ξεκινήσει το αντίστοιχο video. Εντολή στο 300x250: Adman.html5API.send('sync', {fn: 'playvideo', args: 2); Εντολή στο parent window: window.playvideo = function (id) { var iframe_970x250 = document.getelementbyid('iframe_970x250'); Adman.html5API.send('sync', {fn: 'playvideo', args: id, iframe_970x250); Εντολή στο 970x250: window.playvideo = function (id) { /* start playing video with given id */ Κατεβάστε το demo ADMAN by Phaistos Networks S.A. 10