Modules Documentation ADMAN. Phaistos Networks

Size: px

Start display at page:

Download "Modules Documentation ADMAN. Phaistos Networks"

Bethany Hines
5 years ago
Views:

1 Modules Documentation ADMAN Phaistos Networks

2 Table of Contents TABLE OF CONTENTS... 2 KEYWORDS... 5 FLASH BANNERS... 6 Options... 6 Public methods... 6 Public events... 6 Example... 7 EXPANDING BANNERS... 8 Options... 8 Public Methods... 8 Public events... 9 Example... 9 FLOATING BANNERS Options Public methods Public events Example INTERSTITIAL BANNERS Options Public events Example Creating the Interstitial webpage BILLBOARD [RISING STARS] Options Example SIDEKICK [RISING STARS] Copyright Phaistos Networks 2

3 Options Public Events Example SLIDER [RISING STARS] Options Public Events Example FILMSTRIP [RISING STARS] Options Example REACTIVE ADS Options Public events Examples ADMAN.OVERLAY Parameters Options Public methods Example ADMAN. TRANSITION Parameters Options Public methods Example TRACKING INTERACTIONS Creative guidelines Banner s guidelines in ADMAN platform Copyright Phaistos Networks 3

4 METRICS Default Metrics Custom Metrics BANNER WITH MULTIPLE BUTTONS BANNER WITH MULTIPLE BUTTONS (INTERACTIONS VERSION) Copyright Phaistos Networks 4

5 Keywords ADMAN has preserved keywords for richmedia banners that are replaced with the appropriate values when the banner goes live. $DESTINATION $DESTINATION keyword stands for the destination url and it is replaced with the value of Target text field. $RSOURCE $RSOURCE keyword stands for the richmedia banner source file and it is replaced with the value of Richmedia banner text field. $SOURCE $SOURCE keyword stands for the image source file and it is replaced with the value of Image Banner text field. This image is also used as a backup image when users browser either doesn t support Javascript or it has been disabled. $RND $RND keyword is replaced with a random number, when banner is rendered. $BANNERSRV $BANNERSRV keyword is replaced with the banner host value that it is defined at the account settings. $ADMAN_AD_ID $ADMAN_AD_ID keyword is replaced with the instance id. $KEYWORD $KEYWORD is replaced with the webspace keyword; it is defined by publisher sites in the webspace tag. More info about keywords $REFERER $REFERER keyword is replaced with the document referrer. Used in Iframe webspaces tags. $BGCOLOR $BGCOLOR keyword is replaced with the background color that can be provided through the iframe tag by the publisher site. e.g...kw='+kw+'&tpid='+window.admantpid+'&bg=red&rnd='+rnd Copyright Phaistos Networks 5

6 Flash Banners Options src url width height clicktag :.swf file source, required : clickthrough url, required : the width of the movie to be displayed, required : the height of the movie to be displayed, required : clicktag, optional, default: go wmode : the value of movie s wmode parameter. Optional, default: opaque waitdom : wait for the DOMContent to be loaded, optional, default: true bgcolor : set the value of movie s bgolor parameter, e.g. bgcolor: # image Flash Player : alternative image. It is rendered when browser doesn t support syncedto : reference to other creative that is synced to. For more information, refer to Synchonized Banners: Guidelines for Administrators documentation active : Optional, default: true. If false, creative will not be visible and will require activate() to start. enablemetrics : Optional, default: false. Enable time metrics. flashvars Public methods invokeevent(type) activate deactivate Public events oninit onover onout onclick onframe Default timer : hovertimer, which counts the total time a user s pointer is over the banner : pairs(object) of flashvars, optional e.g. flashvars : { myvar : 'test' : Triggers an action of given type : Makes the creative visible, if it is hidden : Hides the movie, if it is visible : triggers on initialization(rendering) : triggers on mouseover : triggers on mouseout : triggers on click : triggers in # frame onprogress : triggers when on $ onload : triggers when flash is loaded Copyright Phaistos Networks 6

7 Example <script type="text/javascript" language="javascript"> new Adman.Flash({ waitdom : true, src : '$RSOURCE', width : 728, height : 90, url : '$DESTINATION', bgcolor : "#333333", image : " oninit : function(){ alert("adman"); ); Copyright Phaistos Networks 7

8 Expanding Banners Options src url width equalized, :.swf file source, required : clickthrough url, required : array containing min and max width, if set as integer min and max are required height : array containing min and max height, if set as integer min and max are equalized, required offset shield expand collapse : pairs of top and left, optional : use shielding(iframe) on non IE browsers, optional, default: true : expand on mouseover, optional, default: true : collapse on mouseover, optional, default: true expandoninit : expand on initialization, optional, default: false clicktag waitdom wmode flashvars : clicktag, optional, default: go : wait for the DOMContent to be loaded, optional, default: true : movie wmode, optional, default: opaque : pairs of flashvars, optional active : Optional, default: true. If false, creative will not be visible and will require activate() to start enablemetrics : Optional, default: false. Enable metrics. flow zindex Default timer: expandtimer counts the total time the banner is expanded, Default actions: expand and collapse : Optional, default: false. Push down/up the content on expansion. True: push the content instantly flow : { 'expand' : 500, // milliseconds to expand 'collapse': 1000 // milliseconds to collapse : Optional. zindex value, when collapsed iniframe : Default value null. Set to true in order to prevent IFrame bursting functionality. When an expanding banner is delivered through an iframe it tries to reach the parent window element. If iframe bursting file isn t found in publisher s home directory, errors may occur and banner won t be rendered. Public Methods action(type) expand collapse activate deactivate : Triggers an action of given type : Expands : Collapses : Makes the creative visible, if it is hidden : Hides the movie, if it is visible Copyright Phaistos Networks 8

9 Public events oninit : triggers on initialization(rendering) onaction(type): triggers on an action of a given type onexpand oncollapse onover onout onclick onframe : triggers on an expand : triggers on an collapse : triggers on mouseover : triggers on mouseout : triggers on click : triggers in # frame onprogress : triggers when on $ onload Example : triggers when flash is loaded <script type="text/javascript" language="javascript"> new Adman.Expanding({ waitdom : true, src : '$RSOURCE', width : 728, height : [90, 250], url : '$DESTINATION', expand : true, collapse : false, onexpand : function(){ alert("expanded");, oncollapse : function(){ alert("collapsed"); ); Copyright Phaistos Networks 9

10 Floating Banners Options src url width height clicktag wmode flashvars scrolling top bottom left right :.swf file source, required : clickthrough url, required : movie width, required : movie height, required : clicktag, optional, default: go : movie wmode, optional, default: opaque : pairs of flashvars, optional : scroll or not, optional, default: true : top position (pixels from top) : bottom position (pixels from bottom) : left position (pixels from left) : right position (pixels from right) interval : timeout interval for scrolling, optional, default: 10 active : Optional, default: true. If false, creative will not be visible and will require activate() to start. Notes: If options.bottom is set, options.top, banner will be ignored If options.right is set, options.left, banner will be ignored If both options.left and optons.right are undefined, banner will be centered in X-Axis If both options.top and optons.bottom are undefined, banner will be centered in Y-Axis Public methods action(type) start stop close activate deactivate Public events oninit : Triggers an action of given type : starts scrolling : stops the scrolling : closes (kills) the Floating : Makes the creative visible, if it is hidden : Hides the movie, if it is visible : triggers on initialization(rendering) onaction(type): triggers on an action of a given type onstart onstop onframe : triggers on an start : triggers on stop : triggers in # frame Copyright Phaistos Networks 10

11 onprogress : triggers when on $ onframe : triggers in # frame onprogress : triggers when on $ onload Example : triggers when flash is loaded onredirect : triggers when floating scrolling changes direction and returns the current direction status: up or down. e.g. when user scrolls downwards the content, the Floating scrolls also downwards. When user scrolls upwards, the floating changes direction to upwards and the redirect event triggers and returns up status. <script type="text/javascript" language="javascript"> new Adman.Floating({ waitdom : true, src : '$RSOURCE', width : 300, height : 250, url : '$DESTINATION', wmode : 'transparent', scrolling : true, top : 200, left : 100, oninit : function( ) { alert( Init ); ); Copyright Phaistos Networks 11

12 Interstitial Banners Options src (Richmedia banner) url(target) : the interstitial page : clicktrhough url, required Public events oninit : triggers on initialization(html is rendered) Example <script type="text/javascript" language="javascript"> new Adman.Interstitial({ src : '$RSOURCE', url : '$DESTINATION' ); Creating the Interstitial webpage Download the demo file and edit interstitial_prototype.html file. Download demo files Enter the title you prefer: <title>campaign's Title</title> Change the options for the interstitial creative: var options = { url : go, width : 300, height : 250, src image width: the width of the flash movie // You may change width, height, flash movie src and fallback image : ' : ' height: the height of the flash movie src: the absolute URL path to the movie SWF file image: fallback image, for browsers that don t support Flash * You may change the style of the page, e.g the background color to the one you prefer <style type="text/css" media="all"> html, body { height: 100%; width: 100%; background: #FFFFFF; /* Background color - change to anything else*/ </style> * It is recommended to include a link that redirects the user back to the site, for such cases. Copyright Phaistos Networks 12

13 Billboard [Rising Stars] Options same as expanding Example parentelement admanadid : optional. parent DOM element : optional. A unique id <script> new Adman.Billboard({ waitdom : true, src : 'billboard_970x250_as3.swf?sd=5.7', width : [300, -970], height : [30, 250], url : '$DESTINATION', expand : false, flow : true ); Sidekick [Rising Stars] Options fixed slide slide.interval : parameters for fixed creative (see Adman.Flash module) : parameters for sidekick/slider creative (see Adman.Flash module) : time interval for sidekick/slider animation Public Events onshowslider Example onhideslider : triggers when slider is shown : triggers when slider is hidden <script> sidekick = new Adman.SideKick({ fixed : { waitdom : true, src : 'flash300x250_as3.swf', ); width : 300, height : 250, url : '$DESTINATION', slide : { waitdom : true, src : 'sidekick_850x700_as3.swf', width : 850, height : 700, url : '$DESTINATION', interval : 1000 Copyright Phaistos Networks 13

14 Slider [Rising Stars] Options fixed slide : parameters for fixed creative (see Adman.Flash module) : parameters for slider creative (see Adman.Flash module) slide.interval : time interval for slider animation Public Events onshowslider Example onhideslider : triggers when slider is shown : triggers when slider is hidden FilmStrip [Rising Stars] Options same as Adman.Flash module Example slider = new Adman.Slider({ slide : { waitdom : true, src : 'slidercontent_950x550_as3.swf', width : 950, height : 550, url : '$DESTINATION' );, fixed : { waitdom : true, src : 'sliderbar_950x90_as3.swf', width : 950, height : 90, url : '$DESTINATION' <script type="text/javascript" language="javascript"> filmstrip = new Adman.Filmstrip({ waitdom : true, src : 'filmstrip_300x600_as3.swf?v=2345', width : 300, height : 600, url : '$DESTINATION' ); Copyright Phaistos Networks 14

15 ReActive ads Options src :.swf file, image, text, html markup or HTML page URL, required For text or HTML $PHRASE variable can be used and it is replace by current matched phrase. url width height intervals interval mouse-out takes flashvars phrase : clickthrough url, required : ad width. Default: auto : ad height. Default: auto : Expand: Show ad when mouse hovering time exceeds the specified time Collapse: Hide the ad if the specified time interval elapses after place. Default: { expand: 300, collapse: 200 : Flashvars for flash ads. Flashvar phrase is set to the current matched appendbofore : text/html appended before phrase appendafter color enablemetrics expand & collapse once collapse wmode phrases strings. exclude classname closer ad. Public events onexpand Examples oncollapse : text/html appended after phrase : Color for linked phrases in page content. Default 'green', : Enable metrics. Default: false. Default metrics: expandtimer, : Set ad occurrences to one per phrase. Default: false : Collapse on mouse out. Default: true : wmode for flash ads. Default: 'transparent, : Words where Reactive ads are applied to. A string or array of : Words that if exist, ad will not be shown : class applied to ad placeholder div : set image src for close button. It is placed to the right top corner of the : triggers on an expand : triggers on an collapse onaction(type): triggers on an action of a given type Copyright Phaistos Networks 15

16 ADMAN Modules Documentation <script type="text/javascript" language="javascript"> // Flash or Image new Adman.ReActive({ 'src' 'url' ); : '$RSOURCE', : '$DESTINATION', 'phrases' : [ 'Flash', 'mobile ads ], 'width' : 220, 'height' : 200, 'once' : true, 'collapse': true, 'color' : '#f80000', // link color 'appendbefore' : '<span style="color:#999;">text injected by Adman.ReActive</span>' <script type="text/javascript" language="javascript"> // IFrame new Adman.ReActive({ 'classname' : 'iframe-overlay', 'src' : '$DESTINATION, 'width' : 600, 'height' : 550, 'phrases' : 'Hotels, ); 'appendafter' 'collapse': false, 'closer' : 'text appended after', : ' <script type="text/javascript" language="javascript"> // Text new Adman.ReActive({ ); 'classname' 'src' : 'text-overlay', : 'This ad is auto populated from keyword: $PHRASE.<br/> <a href="$destination" target="_blank">click here</a> for more', 'phrases' : Cars, 'color' : '#0000f8', // link color Copyright Phaistos Networks 16

17 Adman.Overlay Adman.Overlay module creates an overlay element that hides webpage s content and reveals only one creative. Parameters instance : the creative that the overlay is connected to. Only this creative will be visible when overlay is open. Options color : Overlay element background color Public methods open close Example : Opens the overlay : Close the overlay <script type="text/javascript" language="javascript"> var banner = new Adman.Expanding({ waitdom: false, src: '$RSOURCE', width: [300, -980], height: [250, -820], url: '$DESTINATION', collapse: false, expand: false, onload: function() { this.overlay = new Adman.Overlay(this, { color: '#ddd');, onexpand: function() { this.overlay.open();, oncollapse: function() { this.overlay.close(); ); Adman. Transition Copyright Phaistos Networks 17

18 Adman.Transition module applies an animation effect on any DOM element by smoothly changing of a css property. Parameters element property Options time oncomplete Public methods start stop o Arguments: : the DOM element : the css property that will be changed : the time interval for the transition in millseconds : triggers when transition is completed : starts the transition. the final value of the css property, e.g. start(1000) pair of values the initial css value and the final value, e.g. start(100, 1000) : stops the transition Example The following example demonstrates a transition on an element with id preview. The height of the element will be changed from 100px to 1000px in 500msecs. <script type="text/javascript" language="javascript"> new Adman.Transition( Adman.$('preview'), 'height', { 'time' : 500, 'oncomplete' : function() { alert('transition completed'); ).start(100, 1000); Tracking Interactions In some occasions you may want to track user s interactions with the flash creative without redirecting to another page. Creative guidelines Copyright Phaistos Networks 18

19 In order for the ADMAN to track interactions, an extra ActionScript should be added at the specified button(s). The movie s ActionScript communicates with the webpage s JavaScript through ExternalInterface API parsing the function s name, as shown below. Steps: Open the advertisement flash movie. Find the button(s) you want to assign the interactions tracking. Add an ExternalInterface statement parsing the appropriate JavaScript function name at the Actions panel: Banner s guidelines in ADMAN platform You must add the javascript function, which is called in the banner s movie when user performs the specified action. That functions calls Adman.track function that creates a 1x1 image, in order to track the interactions. Example: on (rollover) { import flash.external.*; ExternalInterface.call('trackInteractions'); In the above example, function trackinteractions is called when a user reacts with the banner (on rollover action). In ADMAN platform, browse Banner s tab to edit your banner. If it was a Flash banner your code should look like this: ); <script type="text/javascript" language="javascript"> new Adman.Flash({ waitdom : true, src : '$RSOURCE', width : 728, height : 90, url : '$DESTINATION' function trackinteractions( ) { Adman.track('$MOUSEOVER_NOPATHARGS_NOENC'); Then, open the banner s URLs tab and create a new URL parameter with the name used in Adman.track above. Copyright Phaistos Networks 19

20 Copyright Phaistos Networks 20

21 Metrics Metrics are used as timers of user s actions. There are default metrics that need only the option enablemetrics: true to be activated. Default Metrics Flash modules banners have hovertimer, that counts the total time a user has the mouse over the banner. Expanding modules banners have expandtimer, that count the total time the banner is expanded. Also collapses and expansions are counted. Custom Metrics Additionally, you can set up your own metrics. Example: Set a custom timer that holds the total time a video is playing and a custom action that that counts the total times the video is completed. The flash banner trigger the function startplaying, when the video starts playing and the timer start counting with the statement mybanner.$videotimer.start();. When the video is stopped or paused the stopplaying function is called and the videotimer is stopped with the statement mybanner.$videotimer.finish();. When the video is completed the function oncompleted is called and invokes the custom <script action type="text/javascript" videocompleted language="javascript"> with the statement mybanner.$videocompleted.invoke();. mybanner = new Adman.Flash({ // 1. Name the banner, here mybanner waitdom: true, src: '$RSOURCE', width: 300, height: 250, url: '$DESTINATION', enablemetrics: true // 2. Enable metrics ); mybanner.metrics.add({ 'timers': ['videotimer'], // 3. Set custom timer, if any 'actions': ['videocompleted'] ); function startplaying() { console.log('startplaying'); mybanner.$videotimer.start(); function stopplaying() { console.log('stopplaying'); mybanner.$videotimer.finish(); function oncompleted() { console.log('oncompleted'); mybanner.$videocompleted.invoke(); // 4. Set custom actions, if any // use Firebug in Firebox to trace the actions // start videotimer // stop videotimer // invoke custom action videocompleted Copyright Phaistos Networks 21

22 Banner with multiple buttons You can apply multiple buttons in a flash movie redirecting visitor to different URLs. In each button include an extra ExternalInterface call in order to track clicks and the desired destination URL, as shown below: In ADMAN platform in banner HTML code include the javascript function definition. In our example: on (release) { import flash.external.*; ExternalInterface.call('trackClick'); geturl(" "_blank"); function trackclick() { Adman.track('$DESTINATION'); In the Target field write The total of clicks performed, in any of the buttons, will be counted in ADMAN reports. You can distinguish which buttons were triggered. Download demo files: in ActionScript 2, in ActionScript 3 Banner with multiple buttons (interactions version) This way only one button is used for clicktrough tracking. So only its clicks will be counted in campaign s total clicks and CTR. The other buttons s clicks will be reported as interactions. In the clickthrough button include the actionscript geturl(_root.go, "_blank");. In the other buttons include an ExternalInterface statement for tracking interactions and the final destination url. Example: on (release) { import flash.external.*; ExternalInterface.call('trackInteraction1'); geturl(" "_blank"); In ADMAN platoform, in the banner HTML code include the javascript functions used in the actionscript and defined the URLs in order to track the interactions. Example: function trackinteraction1() { Adman.track('$ONE_NOPATHARGS_NOENC'); Download demo files: in ActionScript 2, in ActionScript 3 Copyright Phaistos Networks 22

Flash Ads. Tracking Clicks with Flash Clicks using the ClickTAG

Flash Ads. Tracking Clicks with Flash Clicks using the ClickTAG How-to Guide to Displaying and Tracking Rich-Media/Flash Ads Image advertising varies from standard GIF, JPG, PNG to more interactive ad technologies such as Flash, or rich-media (HTML Ads). Ad Peeps can