4W PUBLISHER
IMPLEMENTATION GUIDE
September 2014
Una Breve Guida all’implementazione
dell’ Applicazione 4w.
A short guide to implementation of
the iFrame 4w’s application.
4wmarketplace.com
4wmarketplace.com Support: [email protected]
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
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.
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.
Implementare la Ad Unit comporta un
Implementing Ad Units involves minimal
ridotto
set up time and is easy to integrate with
davvero
impegno
di
semplice
tempo
integrarla
e
risulta
con
la
the Publishers’ web sites and web pages.
pagina web del Publisher. È possibile
By choosing from a selection of ad unit
scegliere da una selezione di grafiche
designs the results may be incorporated
incorporabili al fine di un funzionamento
within the site with minimal work. The
minimale dell’Ad Unit.
adverts are supplied as HTML to be
Gli annunci vengono forniti come codice
embedded in an Adunit on the Publishers’
HTML da incorporare
pages.
pagina
del
in un box nella
Publisher.
In order for the 4W Application to
Al fine di permettere all’applicazione di
successfully analyse each page from the
4W di
Publishers’ web sites,
analizzare
correttamente
ogni
pagina del sito del Publisher, consigliamo
dedicated content bracketing has to be
di seguire i consigli riportati in questa
adopted as described in this document.
guida.
4
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:
Inserire in pagina il codice Javascript (jsAds), come descritto nelle prossime slide.
1
2
3
5
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.
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
Implementazione - Implementation
Il Team Publishers di 4w MarketPlace
provvederà a fornirvi il codice con i paramentri
The 4w MarketPlace Publishers’ Team gives you
settati e potrai successivamente personalizzarne
a code with parameters setted up and you could
alcuni. Facilmente.
customize some of them as you like. Easily.
<div class="4wNET">
<script type="text/javascript">
m3ads_system = "4WM";
m3ads_partnernumber = XXXXXX;
m3ads_containerclass = "m3_container fourW_300x600_120x120";
m3ads_numberadverts = 4;
1
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;
</script>
<script type="text/javascript" src="http://cdn.feed.4wnet.com/resources/scripts/jsAds-1.3.min.js"></script>
</div>
8
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
Implementazione - Implementation
Il Team Publishers di 4w MarketPlace
provvederà a fornirvi il codice con i paramentri
The 4w MarketPlace Publishers’ Team gives you
settati e potrai successivamente personalizzarne
a code with parameters setted up and you could
alcuni. Facilmente.
customize some of them as you like. Easily.
2
9
Parametri - Parameters
Descrizione - Description
m3ads_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)
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
Mark-up and Styling
<body>
...
<div class="4wNET">
<script type="text/javascript">
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;
</script>
<script type="text/javascript"
src="http://cdn.feed.4wnet.com/resources/scripts/jsAds-1.3.min.js">
</script>
</div>
...
</body>
10
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
3
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;
}
11
.m3_container.fourW_300x600_120x120
background-color:#F4F4F4;
margin:0;
padding:12px 4px;
}
.m3_container.fourW_300x600_120x120
width:120px;
height:120px;
}
.m3_container.fourW_300x600_120x120
border:none;
width:120px;
height:120px;
}
.m3_container.fourW_300x600_120x120
width:165px;
height:120px;
overflow:hidden;
margin-left:5px;
}
.m3_container.fourW_300x600_120x120
height:36px;
overflow:hidden;
font-weight:700;
}
.m3_container.fourW_300x600_120x120
height:68px;
overflow:hidden;
}
.m3_container.fourW_300x600_120x120
height:14px;
overflow:hidden;
color:green;
font-size:.875em;
}
.m3_container.fourW_300x600_120x120
position:absolute;
}
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
.a:hover{
.a .i{
.a .i img{
.a .x{
.a .t{
.a .d{
.a .u{
img[width="1"]{
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
Sommario
Summary
La Ad Unit - The Ad Unit
jsAds ( Nuova Versione – Last Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
iFrame ( Versione in Dismissione – Legacy Version )
Implementazione - Implementation
MarkUp and Styling
Css di esempio – CSS for example
4wmarketplace.com
Implementazione - Implementation
1
2
14
<iframe id="mirago" src="http://feed.4wnet.com/feed.html.ashx?
a=XXXX&n=X&u=ref&i=1&iw=XX&ih=XX&hd=X&f=0
&c=http://yourdomain/xxx.css&s=XXXX_XX_XXX" framespacing=“0”
frameborder=“no” scrolling=“no” width=“XX” height=“XX”></iframe>
Parameter
DataType
Poss.Values
a
Integer(4)
-
n
Integer
3 (default)
u * See Note
URL
Your
domain
iw
Pixel
40, 60, 70
ih
Pixel
40, 60, 70
hd
String
3, 4
c
URL
css path
s
String
1
Description
Il vostro codice identificativo (inviato dal team editori )
Your identifier code(sent to you by Publisher’s Team)
Numero di campagne visualizzabili per ogni AdUnit
Number of the campaigns visible for each Ad Unit
Inserire il dominio del sito in cui verrà inserita la AdUnit
Insert the domain of primary level where will inserted the AdUnit
Larghezza dell’immagine visualizzata per ogni campagna
Width of the GIF image that is showed with each campaign
Altezza dell’immagine visualizzata per ogni campagna
Height of the GIF image that is showed with each campaign
Intestazione: 3 per una descrizione completa e 4 per una corta.
Header text: 3 for a long description or 4 for a short description
Indirizzo (link) del css personalizzato (sul vostro dominio pubblico)
Path of your personalized CSS (onto your public domain)
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
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
Mark-up and Styling
<div id="mirago">
<div id="h">
<a href="{hurl}">{htitle}</a>
</div>
<!–- for each campaign to view ( the value of param. n ) -->
<a class="a n{index}" href="{url}" rel=”nofollow”>
<div class="i">
<img src="{imgurl}" title="{imgtitle}" alt="{imgtitle}"/>
</div>
<div class="x">
<div class="t">{title}</div>
<div class="d">{description}</div>
<div class="u">{displayurl}</div>
</div>
</a>
</div>
15
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,
<div id="mirago">
...
</div>
of the page.
The response by the 4W Application is written into
the DIV with id “mirago” .
il bordo, il pading o altre personalizzazioni per il codice HTML di
This affords an opportunity to specify a background, border,
risposta.
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.
Per ogni richiesta, ciascun
annuncio restituito
(AdUnit) sarà innestato
come figlio del contenitore
padre ”mirago”.
16
If the iFrame is correctly implemented, it do a call for each load
<div id="h">
<a href="{hurl}">
{htitle}
</a>
</div>
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.
<!–- for each campaign to view ( the value of param. n ) -->
<a class="a n{index}" href="{url}" rel=”nofollow”>
<div class="i">
<img src="{imgurl}" title="{imgtitle}" alt="{imgtitle}"/>
</div>
<div class="x">
<div class="t">{title}</div>
<div class="d">{description}</div>
<div class="u">{displayurl}</div>
</div>
</a>
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
For each requests, every
advert result (AdUnit) will
be output as another
child-element of the
“mirago” target container.
Semplice CSS di esempio – Simple CSS of example
3
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.
#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;
}
17
#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%;
}
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization
Grazie.
Thank You.
18
Support: [email protected]
4w Marketplace s.r.l., Strictly confidential - All rights reserved - No reproduction or diffusion without written authorization