4wmarketplace.com 4W PUBLISHER IMPLEMENTATION GUIDE September 2014 4wmarketplace.com Support:

Presentazione sul tema: "4wmarketplace.com 4W PUBLISHER IMPLEMENTATION GUIDE September 2014 4wmarketplace.com Support:"— Transcript della presentazione:

1 4wmarketplace.com 4W PUBLISHER IMPLEMENTATION GUIDE September 2014 4wmarketplace.com daniele.rescigno@4wmarketplace.com Support: daniele.rescigno@4wmarketplace.com Una Breve Guida all’implementazione dell’ Applicazione 4w. A short guide to implementation of the iFrame 4w’s application.

2 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

3 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

4 4 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization La Ad Unit – The Ad Unit Il codice di implementazione di 4W consente ai Publisher di ricevere con facilità gli annunci in tempo reale e visualizzarne i risultati pre-definendo un layout ( “ad units” ) sulla pagina web del Publisher. Implementare la Ad Unit comporta un ridotto impegno di tempo e risulta davvero semplice integrarla con la pagina web del Publisher. È possibile scegliere da una selezione di grafiche incorporabili al fine di un funzionamento minimale dell’Ad Unit. Gli annunci vengono forniti come codice HTML da incorporare in un box nella pagina del Publisher. Al fine di permettere all’applicazione di 4W di analizzare correttamente ogni pagina del sito del Publisher, consigliamo di seguire i consigli riportati in questa guida. Implementare la Ad Unit comporta un ridotto impegno di tempo e risulta davvero semplice integrarla con la pagina web del Publisher. È possibile scegliere da una selezione di grafiche incorporabili al fine di un funzionamento minimale dell’Ad Unit. Gli annunci vengono forniti come codice HTML da incorporare in un box nella pagina del Publisher. Al fine di permettere all’applicazione di 4W di analizzare correttamente ogni pagina del sito del Publisher, consigliamo di seguire i consigli riportati in questa guida. Implementing Ad Units involves minimal set up time and is easy to integrate with the Publishers’ web sites and web pages. By choosing from a selection of ad unit designs the results may be incorporated within the site with minimal work. The adverts are supplied as HTML to be embedded in an Adunit on the Publishers’ pages. In order for the 4W Application to successfully analyse each page from the Publishers’ web sites, dedicated content bracketing has to be adopted as described in this document. Implementing Ad Units involves minimal set up time and is easy to integrate with the Publishers’ web sites and web pages. By choosing from a selection of ad unit designs the results may be incorporated within the site with minimal work. The adverts are supplied as HTML to be embedded in an Adunit on the Publishers’ pages. In order for the 4W Application to successfully analyse each page from the Publishers’ web sites, dedicated content bracketing has to be adopted as described in this document. The 4W implementation code provides Publishers with the facility to retrieve adverts in real time and display the results using pre-defined layouts (“ad units”) on the Publishers’ web sites.

5 5 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Implementazione - Implementation Implementare la AdUnit di 4W MarketPlace attraverso il jsAds consiste in pochi semplici passi, da seguire come esplicato di seguito: Implementing the 4W MarketPlace’s AdUnit through the jsAds consist in a few simple steps, to follow as explicate below: 1 Inserire in pagina il codice Javascript (jsAds), come descritto nelle prossime slide. Insert the Javascript (jsAds) code into your web page as described in the next slides. Settare tutti I parametri nel codice al fine di avere una corretta erogazione. Set all the parameters of the implement code in order to a proper delivery. Personalizzare il codice CSS al fine di adattare la grafica dell’AdUnit al proprio sito web. Personalize the CSS code in order to adapt the AdUnit’s graphic to your web site. 2 3

6 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

7 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

8 8 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Implementazione - Implementation m3ads_system = "4WM"; m3ads_partnernumber = XXXXXX; m3ads_containerclass = "m3_container fourW_300x600_120x120"; m3ads_numberadverts = 4; m3ads_logoimagewidth = 120; m3ads_logoimageheight = 120; m3ads_cssurl = "http://www.yoursite.com/path/to/css/120x120/4w_300x600.css"; m3ads_subpartner = “subpublisher_string"; m3ads_customheader = 5; Il Team Publishers di 4w MarketPlace provvederà a fornirvi il codice con i paramentri settati e potrai successivamente personalizzarne alcuni. Facilmente. The 4w MarketPlace Publishers’ Team gives you a code with parameters setted up and you could customize some of them as you like. Easily. 1

9 9 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Implementazione - Implementation Parametri - Parameters Descrizione - Descriptionm3ads_partnernumber È l’identificativo dell’Editore Indicates the Publisher’s ID m3ads_containerclass Contiene le classi per la personalizzazione dell’AdUnit attraverso il CSS CSS classes used to define the AdUnit’s style m3ads_numberadverts Numero di campagne visualizzate nell’AdUnit Number of the campaigns displayed for each Ad Unit m3ads_logoimagewidth Larghezza dell’immaginie della campagna Width of the campaign’s image m3ads_logoimageheight Altezza dell’immagine della campagna Height of the campaign’s image m3ads_cssurl L’indirizzo URL del CSS (hostato sul dominio dell’Editore) The URL path of your personalized CSS (hosted on the Publisher’s domain) m3ads_subpartner Il Tag per identificare la AdUnit nei report. The tag to identify the AdUnit into a reports. m3ads_customheader Identificativo dell’header dell’AdUnit (comunicato dal Publishing Team) Indicates the header’s identifier (refer to the Publishing Team) Il Team Publishers di 4w MarketPlace provvederà a fornirvi il codice con i paramentri settati e potrai successivamente personalizzarne alcuni. Facilmente. The 4w MarketPlace Publishers’ Team gives you a code with parameters setted up and you could customize some of them as you like. Easily. 2

10 10 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization... m3ads_system = "4WM"; m3ads_partnernumber = XXXXXX; m3ads_containerclass = "m3_container fourW_300x600_120x120"; m3ads_numberadverts = 4; m3ads_logoimagewidth = 120; m3ads_logoimageheight = 120; m3ads_cssurl = "http://www.yoursite.com/path/to/css/4w_300x600.css"; m3ads_subpartner = "subpublisher_string"; m3ads_customheader = 5;... Mark-up and Styling

11 11 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Semplice CSS di esempio – Simple CSS of example Il codice CSS d’esempio inizia dalla colonna di sinistra e termina nella colonna di destra. The CSS example code starts from the left column and ends in the right column..m3_container.fourW_300x600_120x120{ width:300px; height:600px; display:inline-block; font-family:helvetica, arial, sans-serif; font-size:16px; line-height:16px; overflow:hidden; }.m3_container.fourW_300x600_120x120 a:link,.m3_container.fourW_300x600_120x120 a:visited,.m3_container.fourW_300x600_120x120 a:hover,.m3_container.fourW_300x600_120x120 a:active{ text-decoration:none; color:#06c; }.m3_container.fourW_300x600_120x120 #h{ display:block; font-size:x-small; height:14px; border-bottom:solid 1px #F4F4F4; font-weight:bold; }.m3_container.fourW_300x600_120x120 #h a{ float:right; }.m3_container.fourW_300x600_120x120.a,.m3_container.fourW_300x600_120x120.a.i,.m3_container.fourW_300x600_120x120.a.x{ display:inline-block; }.m3_container.fourW_300x600_120x120.a{ width:290px; height:122px; text-decoration:none; overflow:hidden; margin:12px 4px; }.m3_container.fourW_300x600_120x120.a:hover{ background-color:#F4F4F4; margin:0; padding:12px 4px; }.m3_container.fourW_300x600_120x120.a.i{ width:120px; height:120px; }.m3_container.fourW_300x600_120x120.a.i img{ border:none; width:120px; height:120px; }.m3_container.fourW_300x600_120x120.a.x{ width:165px; height:120px; overflow:hidden; margin-left:5px; }.m3_container.fourW_300x600_120x120.a.t{ height:36px; overflow:hidden; font-weight:700; }.m3_container.fourW_300x600_120x120.a.d{ height:68px; overflow:hidden; }.m3_container.fourW_300x600_120x120.a.u{ height:14px; overflow:hidden; color:green; font-size:.875em; }.m3_container.fourW_300x600_120x120 img[width="1"]{ position:absolute; } 3

12 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

13 4wmarketplace.com Sommario Summary La Ad Unit - The Ad Unit Implementazione - Implementation MarkUp and Styling jsAds ( Nuova Versione – Last Version ) Css di esempio – CSS for example Implementazione - Implementation MarkUp and Styling iFrame ( Versione in Dismissione – Legacy Version ) Css di esempio – CSS for example

14 14 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Implementazione - Implementation ParameterDataTypePoss.ValuesDescriptiona Integer(4)- Il vostro codice identificativo (inviato dal team editori ) Your identifier code(sent to you by Publisher’s Team) n Integer3 (default) Numero di campagne visualizzabili per ogni AdUnit Number of the campaigns visible for each Ad Unit u * u * See Note URL Your domain Inserire il dominio del sito in cui verrà inserita la AdUnit Insert the domain of primary level where will inserted the AdUnit iw Pixel40, 60, 70 Larghezza dell’immagine visualizzata per ogni campagna Width of the GIF image that is showed with each campaign ih Pixel40, 60, 70 Altezza dell’immagine visualizzata per ogni campagna Height of the GIF image that is showed with each campaign hd String3, 4 Intestazione: 3 per una descrizione completa e 4 per una corta. Header text: 3 for a long description or 4 for a short description c URLcss path Indirizzo (link) del css personalizzato (sul vostro dominio pubblico) Path of your personalized CSS (onto your public domain) s String Tag identificativo dell’AdUnit TAG identifier of AdUnit * Se il valore del parametro “u” è “REF” (case insensitive), verrà utilizzata l’informazione contenuta nell’intestazione HTTP * If the value of “u” is passed as “REF” (case insensitive), it will used the HTTP referrer property of the request 11 2

15 15 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Mark-up and Styling {htitle} {title} {description} {displayurl}

16 16 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Mark-up and Styling (continue) L’iFrame correttamente implementato farà una chiamata ad ogni caricamento della pagina. La risposta dell’applicazione 4w viene scritta all’interno del DIV con id “mirago”. Questo permette di specificare il background, il bordo, il pading o altre personalizzazioni per il codice HTML di risposta. If the iFrame is correctly implemented, it do a call for each load of the page. The response by the 4W Application is written into the DIV with id “mirago”. This affords an opportunity to specify a background, border, padding or other effects for the whole response html....... Il primo elemento figlio del container “mirago” sarà il DIV che conterrà l’ ”header” della AdUnit. Il testo dell’header può essere cambiato settando il parametro hd visto in precedenza. The first child-element of the “mirago” container will contain the “header” of the AdUnit. The text of the header can be changed by setting the hd parameter seen previusly. {htitle} {htitle} Per ogni richiesta, ciascun annuncio restituito (AdUnit) sarà innestato come figlio del contenitore padre ”mirago”. For each requests, every advert result (AdUnit) will be output as another child-element of the “mirago” target container. {title} {description} {displayurl} {title} {description} {displayurl}

17 17 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Semplice CSS di esempio – Simple CSS of example #mirago.a.i, #mirago.a.x { float: left; } #mirago.a.x { width: 170px; } #mirago.a.t { font-weight: 700; height: 20%; } #mirago.a.d { overflow: hidden; height: 60%; } #mirago.a.u { color: green; height: 20%; } #mirago { border: 1px solid blue; padding: 5px; font-family: helvetica, arial, sans-serif; font-size: 75%; overflow: auto; } #mirago img { border: none; } #mirago.a { width: 270px; height: 70px; margin: 5px; padding: 5px; border: 1px solid silver; display: block; text-decoration: none; display: block; overflow: hidden; } #mirago.a:hover { background-color: #99ccff; } Il codice CSS d’esempio inizia dalla colonna di sinistra e continua nella colonna di destra. The CSS example code starts from the left column and continue in the right column. 3

18 18 4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization Grazie. Thank You. daniele.rescigno@4wmarketplace.com Support: daniele.rescigno@4wmarketplace.com