Για την υλοποίηση ενός 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> ADMAN by Phaistos Networks S.A. 1

3 Κατασκευή με Hype window.open(decodeuri(adman.html5api.get('click'))); Πολλαπλά URLs Σε περίπτωση το δημιουργικό είχε πολλαπλά links/buttons με διαφορετικό URL, θα πρέπει σε καθένα από αυτά να κατευθύνετε τον χρήστη στο επιθυμητό URL και ταύτοχρονα να εκτελείτε την εντολή του ADMAN για την καταγραφή του click, όπως στο παρακάτω παράδειγμα: <a href=" target="_blank" onclick="window.open(adman.html5api.get('click'))"></a> Μέτρηση 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 αρχεία ADMAN by Phaistos Networks S.A. 2

4 Expanding creatives Expand Έπειτα από ενέργεια του χρήστη, είτε άμεσα εάν πρόκειται για δημιουργικό που είναι expanded εξαρχής, πρέπει να εκτελεστεί η expand εντολή: Adman.html5API.expand(); Collapse Αντίστοιχα όταν το δημιουργικό γίνει collapsed, είτε με ενέργεια του χρήστη ή έπειτα από τέλος του εικαστικού, πρέπει να εκτελέστει η παρακάτω εντολή: Adman.html5API.collapse(); Κατεβάστε demo αρχεία Floating creatives Close Κλήση της εντολής Adman.html5API.done() μετά από click στο close button. Adman.html5API.done(); Αυτόματο κλείσιμο Κλήση είτε με timeout είτε μετά από το τέλος του animation, της παραπάνω εντολής. Παράδειγμα με timeout για κλείσιμο μετά από 10 δευτερόλεπτα: settimeout(function() { Adman.html5API.done();, 10000); Κατεβάστε demo αρχεία ADMAN by Phaistos Networks S.A. 3

5 Interstitial creatives Μία interstitial page πρέπει να έχει τον παρακάτω βασικό κώδικα: <script src=" <script> // 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]), done = function () { top.location = url; // redirects user back to site ; window.admanpa = matches[2] && [JSON.parse(decodeURIComponent(matches[2]))]; </script> Για το 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> Για την καταμέτρηση viewability ορίστε την παρακάτω εντολή δίνοντας ως πρώτο όρισμα το σωστό element προς μέτρηση: <script> // if you need viewability give the correct element id new Adman.Viewable( document.getelementbyid('banner') ).enable(); /script> ADMAN by Phaistos Networks S.A. 4

6 Κατεβάστε demo σελίδα 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 */ ADMAN by Phaistos Networks S.A. 5

7 Callback function (όταν το Sidekick ανοίγει) Εφόσον ο χρήστης μπορεί να κλείσει το sidekick αλληλεπιδρώντας με ένα από τα δύο δημιουργικά, πρέπει να προστεθεί μία callback function slideropened' στο window. Μέσω αυτής της function κάθε φορά το έτερο δημιουργικό θα λαμβάνει μήνυμα ότι έχει κλείσει sidekick, ώστε για παράδειγμα να εμφανίζεται ξανά το button για την εμφάνιση του sidekick. window.slideropened = function () { /* go to frame where show button is shown */ Κατεβάστε demo σελίδα Slider [Rising Star] Όμοιο με το sidekick, με την διαφορά ότι το in-page creative είναι μία οριζόντια μπάρα στο κάτω μέρος της σελίδας και έπειτα η σελίδα μεγαλώνει και γίνεται scroll προς τα δεξία, μέχρις ότου να μην εμφανίζεται καθόλου το content της σελίδας. Οι εντολές είναι ίδιες με εκείνες του Sidekick (δείτε παραπάνω). Κατεβάστε demo σελίδα Filmstrip [Rising Star] Το FilmStrip creative αποτελείται από 5 sections (σε ένα αρχείο). Σε αυτό υπάρχουν previous και next buttons, ώστε ο χρήστης να πλοηγείται σε προηγούμενο ή επόμενο section αντίστοιχα. ADMAN by Phaistos Networks S.A. 6

8 Σε κάθε επόμενη προβολή το banner θα εμφανίσει το επόμενο section από αυτό που έχει σταματήσει ο χρήστης. Για την ανάπτυξη Filmstrips creatives ακολουθείτε τις βασικές οδηγίες παραπάνω. Έπειτα με την χρήση cookie κρατήστε σε ποιο section είχε σταματήσει ο χρήστης όταν πατάει το button για το επόμενο ή προηγούμενο section. Ενδεικτικά ανάθεση cookie στον χρήστη με χρήση Adman API: Adman.Utils.setCookie('adman-filmstrip', currentsection); Πριν από την έναρξη του ad αν βρεθεί το cookie προχωρήστε το επόμενο section ή διαφορετικά στο πρώτο. Ενδεικτικός κώδικας για τον υπολογισμό του επόμενου section: <script> 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> Synergy/Synchronized Τα synergy ή synchronized δημιουργικά αποτελούνται από 2 ή περισσότερα html αρχεία. ADMAN by Phaistos Networks S.A. 7

9 Για τον συγχρονισμό τους έπειτα από ενέργεια του χρήστη απαιτείται η χρήση 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. 8

10 Αν στο παραπάνω παράδειγμα υπήρχαν 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. 9