Creare un footer per monetizzare il tuo sito WordPress con WpMoneyClick

Aggiornamento novembre 2019: ultimamente non ho più utilizzato WpMoneyClik.
Un plugin per creare semplicemente e velocemente link per l’affiliazione Amazon che mi piace molto è AAWP.
Questo plugin ha già dei template molto accattivanti da inserire velocemente nei propri articoli, consente di creare tabelle comparative tra prodotti, liste di bestseller ed è perfettamente adattabile alla visualizzazione mobile.
Provalo qui!

In questo tutorial ti spiegherò come creare un footer per il tuo sito, con il plugin WpMoneyClick, che ti consente di acchiappare numerosi click ed indirizzarli alla tua affiliazione Amazon e all’affiliazione PPC Trovaprezzi e quindi di monetizzare.

Il footer che ho voluto implementare sul mio sito si basa sulla grafica adottata da Amazon per il Native Advertising che offre nell’affiliazione Amazon Usa (in Italia non è disponibile).

Si tratta di questo footer:

Ho testato per curiosità questo tipo di native advertising sul mio sito miciogatto.it, ottenendo una gran quantità di click.

Amazon sa il fatto suo, e quando crea un certo tipo di grafica per i suoi banner, bottoni, advertising, è un dato di fatto che funzionino.

Visto che però i click su questi annunci native di Amazon portavano al portale americano, quindi con offerte che spesso per l’Italia non erano disponibili, non riuscivo a monetizzare, quindi ho voluto ricreare lo stesso tipo di comunicazione, ma inserendo elementi per me profittevoli.

Grazie al plugin Wp Money click, (di cui illustro la mia case history qui), è possibile inserire offerte PPS e PPC in modo nativo, su WordPress, adattandole perfettamente a qualsiasi grafica.

Quindi ho ricreato il footer offerto da Amazon con il plugin WpMoneyClick.

Ho pensato di unire nel footer diverse affiliazioni, per testare poi quale funziona di più, e monetizza di più, sfruttando i vantaggi di ognuna.

Nella prima riga del footer ho voluto inserire l’affiliazione Amazon, quindi 3 prodotti che imposto su Wp Money Click, catturati usando la parola chiave “gatto”.

Questi prodotti, al click, andranno direttamente a finire nel carrello di Amazon, quindi utilizzando un cookie che dura 90 giorni.

Nella seconda riga, visto che il footer attira molti click, ho utilizzato l‘affiliazione PPC di Trovaprezzi.

Inoltre ho voluto completare il footer, proprio come lo propone Amazon.com, con un campo di ricerca, in questo caso ho usato la ricerca offerta da Adsense.

Questo è il risultato che ho ottenuto:

Ti spiego come ho fatto in pochi semplici step.

Step 1: Creare il template di un singolo box in Wp MoneyClick

Per prima cosa, devi creare il template del singolo box dell’annuncio in WpMoneyClick, cioè questa parte:

Questo template verrà usato sia per la grafica dei prodotti Amazon, sia per la grafica dei prodotti Trovaprezzi.

Per creare un template personalizzato con Wp moneyclick, puoi partire da un template vuoto, oppure duplicarne uno di esistente e modificarlo, l’importante è che crei un tuo template personalizzato, in modo che non vada sovrascritto da successivi update del plugin.

Crea una classe css da assegnare al contenitore dell’elemento, in questo caso ho usato “.wpmoneyclick_template_amz_simil_footer” .

Come vedi, l’elemento avrà

• un bordino grigio,
• una foto con altezza fissa,
• un titolo anch’esso ad altezza fissa,
• il prezzo da scontare barrato (solo se esiste uno sconto),
• il prezzo finale,
• le stelline di rating
• un numero tra parentesi (originariamente sarebbe il numero di review).

Ho impostato l’elemento in modo che occupi 1/4 dello schermo, adattando su mobile in modo che occupi invece 1/2 dello schermo e vada a capo automaticamente.

Puoi anche decidere di affiancare meno elementi per riga, ti basta adattare la misure nel css.

per non fartela troppo lunga, ti incollo qui il css e l’html del template:

Css del template:

.wpmoneyclick_template_amz_simil_footer
{
position: relative;
box-sizing: border-box;
overflow: hidden;
float:left;

border: 1px solid #cccccc;

margin: 0px auto;
margin-right:10px;
margin-bottom:10px;
padding: 0px 0px 5px 0px;

width: 23.8%;

font-family: arial, helvetica, sans-serif;
font-size: 12px;
margin-bottom: 20px;
text-align:left;
}

.wpmoneyclick_template_amz_simil_footer:hover {
box-shadow: 3px 3px 10px #BBB;
}
.wpmoneyclick_template_amz_simil_footer a:link {
text-decoration: none !important;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_image {
width: auto!important;
padding: 0px;
height: 120px;
background-color:#ffffff;
text-align:center
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_image IMG, .wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_image IMG:hover {
max-width: 100% !important;
max-height: 120px !important;
height: auto !important;
width: auto !important;
padding: 0px;
margin:auto;
}
.wpmoneyclick_template_amz_simil_footer .image-overlay{
display:none!important;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_title {
padding: 10px;
height:41px;
line-height: 17px;
overflow: hidden;
}
.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_title A:link,.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_title A,.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_title A:visited {
font-size: 12px;
text-decoration: underline !important;
color: #0066c0!important;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_no_discount {
display: none;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_price,
.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_noprice
{
padding: 5px 10px;
text-align: left;
color:#000000!important;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_price A:link ,.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_price A
{
font-size: 12px;
line-height: 1;
font-weight: bold;
text-decoration: none !important;
color:#000000!important;
}

.wpmoneyclick_template_amz_simil_footer .wpmoneyclick_product_price A SPAN
{
font-size: 12px;
font-weight: normal;
margin-left: 5px;
}
.wpmoneyclick_template_amz_simil_footer .fullprice{
text-decoration: line-through;
font-size:10px;
color:#4a4a4a;

}
.wpmoneyclick_template_amz_simil_footer .wpmc_rating_star{
height: 16px;
}
@media only screen and (max-width: 380px) {
.wpmoneyclick_template_amz_simil_footer{
float:left;
margin-right:2px;
width: 48.4314%;
}
}

HTML del template

<div id='wpmc_cid_{{cid}}' class='wpmoneyclick_template_amz_simil_footer' style=''>

<div class='wpmoneyclick_product_image'>
<a href="{{link}}&provider={{provider}}" target='_blank' rel='nofollow'><img src='{{imageLarge}}' title='{{title}}' alt='{{title}}' /></a>
</div>

<div class='wpmoneyclick_product_title'>
<a href="{{link}}&provider={{provider}}" target='_blank' rel='nofollow'
style="">{{title}} </a>
</div>
<div>
<div class='wpmoneyclick_product_price {{product_price_css}}'>
<span class='fullprice {{product_no_discount_css}}'><span>{{currency}}</span> {{ fullPrice }}</span>
<a href="{{link}}&provider={{provider}}" target='_blank' rel='nofollow'
style=''>
<span>{{currency}}</span> {{price}}
</a>
</div>
</div>
<div class='wpmc_rating'>{{_rating}} ({{ _random(4, 497) }})</div>

</div>

Naturalmente devi anche sostituire i codici colori e font con quelli del tuo sito.

Ti faccio notare alcune cose:

• ho inserito nell’url questo parametro {{link}}&provider={{provider}},
• ho inserito le stelline, come consente l’ultima versione di WpMoneyClick, usato questa macro {{_rating}}
• ho associato un valore casuale alle stelline, in modo che non siano sempre uguali, aggiungendo un data attribute al template, usando un numero random. Guarda l’immagine:
  

  

• Anche il numero tra parentesi, che dovrebbe riferirsi alle review, è random, ho utilizzato sempre la macro:  {{ _random(4, 497) }}

 STEP 2: Creare i contents con i prodotti.

Nello step 2 andrai a creare i contents degli elementi del footer.

Tieni presente che puoi anche creare 6 contents separati, uno per ogni prodotto, e uno per la ricerca, oppure crearli a 2 a 2, poi li raggrupperemo in un ulteriore contents per farli visualizzare assieme.

Io ho scelto di creare 3 contents, uno che contiene la prima riga, con 4 prodotti Amazon, uno per la seconda riga, che contiene 4 prodotti Trovaprezzi, uno per la ricerca di Adsense

Crea un content che potrebbe chiamarsi “4 prodotti Amazon footer”, imposta una keyword abbastanza generica, in modo che venga sempre popolato, io ho usato la keyword “gatto”, così mi recupera i prodotti per gatto.

Imposta il contents in modo che carichi 4 prodotti e che utilizzi il template che hai appena creato nello step precedente.

Ripeti la stessa operazione per 4 prodotti Trovaprezzi.

STEP 3: Creare un content per la ricerca Adsense

Nel tuo account account Adsense puoi facilmente creare una casella di ricerca.

Incolla il codice generato da Adsense in un nuovo Contents HTML creato con WpMoneyClick.

Ho aggiunto in questo caso del css direttamente nel contents, in modo che la casella di ricerca stia allineata a destra e si adatti al mobile.

Ecco il codice, per tua comodità:

<div class="ricercaAdsense">
<style>
.ricercaAdsense{
float:right;
width:100%;
text-align:right;
}
.ricercaAdsense form{
float:left;
width:60%;
}
.ricercaAdsense .testoric{
float:left;
width:38%;
display:block;
margin-right:2px;
}
.ricercaAdsense input[type="text"]{
width:82%!important;
float: left;
margin-right: 5px!important;
padding: 5px!important;
}
@media only screen and (max-width: 380px) {
.ricercaAdsense{
float:none;
text-align:center;
}
.ricercaAdsense .testoric{
float:none;
width:100%;
display:block;
margin-right:0px;
}
.ricercaAdsense form{
float:none;
width:100%;
}
.ricercaAdsense input[type="text"]{
width:70%!important;
float: left;

}
}
</style>
<span class="testoric">Non trovi il tuo prodotto? Cerca qui: </span>
TUO CODICE DELLA RICERCA ADSENSE

</div>

 

Ovviamente ricordati di sostituire il codice della ricerca con il tuo.

STEP 4: Creare un content che contenga gli altri 3

Ora dovrai creare un content che contenga gli altri 3 appena creati, così da poterlo inserire con uno shortcode, oppure utilizzarlo con le rules ed i gruppi, così da inserirlo automaticamente in tutte le pagine.

Semplicemente crea un content HTML ed incolla gli shortcode degli altri 3 contents in questo.

Ecco come apparirà

Ricordati di inserire “_raw=’true'” all’interno degli shortcode che utilizzi in un altro content.

Alla fine di questi step, dovresti trovarti dunque ad avere 4 contents, come in questa schermata:

STEP 5: Creare la rule che contiene il content finale

Io ho deciso di far vedere il mio footer in tutti i post, in modo da monetizzare su tutto il blog, puoi anche decidere di mostrarlo in punti diversi della pagina oppure solo per determinati post.

La rule che ho impostato è fatta così:

STEP 6: Impostare il group

Per far visualizzare infine il footer, devi semplicemente creare un group, oppure modificare un group che già hai.

Il mio ora risulta così:

Ed è tutto.

Spero che questo tutorial ti sia stato utile.

Voglio evidenziare il fatto che con Wp Money Click puoi fare veramente un miliardo di cose, come hai visto, con la flessibilità e customizzazione totale.

Quindi buon divertimento, e se hai qualche domanda, scrivimi pure nei commenti!