Categorie
Digital

Come inserire banner AdSense su WordPress, Gutenberg e AMP

Vuoi monetizzare il tuo sito ma non riesci a far apparire i banner AdSense su Wordpress? Ecco come configurarli con Gutenberg e anche AMP!

Affiancare Google AdSense a WordPress è la soluzione più accessibile per guadagnare qualcosa (c.d. monetizzare) tramite le visite al tuo sito o blog.

Grazie ai banner pubblicati nel corpo pagina è possibile quindi “affittare” parte del proprio blog alle aziende che pagano per far apparire online il loro brand. Tramite le funzioni automatiche, invece, permettiamo a Google di gestire i formati pubblicitari per ottimizzare i risultati.

Molti webmaster, soprattutto i neofiti, fanno però fatica ad implementare questo strumento sul loro sito.

In particolar modo ci sono due strumenti molto diffusi dove l’implementazione non è semplice: Gutenberg e AMP.

Il primo è l’editor a blocchi di WordPress, che ha sostituito l’interfaccia standard, mentre il secondo è una versione grezza del tuo sito che ottimizza la velocità sui dispositivi mobili.

Ma come installare AdSense su WordPress con questi strumenti?

In realtà non è poi così difficile!

Per farlo ci serve solamente un plugin molto interessante, un gestore dei TAG e una corretta configurazione di AdSense.

Ecco quindi come configurare AdSense su WordPress utilizzando Gutenberg e AMP!


Cos’è Google AdSense

Il programma pubblicitario di Google prevede due tipi di utente:

  • L’inserzionista, ovvero colui che paga per far vedere la sua pubblicità;
  • Il publisher, ovvero colui che offre spazi del suo sito per pubblicare le pubblicità.

Il programma AdSense è indirizzato a questi ultimi. Tramite AdSense, quindi, i publisher autorizzano Google a pubblicare sul loro sito banner e altri formati pubblicitari vari.

Tramite AdSense i publisher autorizzano Google a pubblicare sul loro sito banner e altri formati pubblicitari vari

AdSense e WordPress sono due piattaforme che dialogano molto bene in quanto è facile, ad esempio, inserire un banner all’interno del testo del tuo articolo. Banner che, a prescindere dal clic, ripagano anche solamente per la visualizzazione.

Ma cosa ci guadagna Google?

Google fa da intermediario nel rapporto tra inserzionista e publisher. In particolar modo più publisher ha a disposizione, più banner riesce a pubblicare in rete, maggiori sono i risultati per gli inserzionisti e maggiori sono anche le entrate da spesa pubblicitaria.

Questo qui sotto, ad esempio, è un classico banner che utilizzo sui miei siti:

A meno che tu non abbia attivato l’AdBlocker, vedrai pubblicità rivolta a te. Non sono io a scegliere il tema, ma se visualizzi un sito che hai visitato poco fa non stupirti: Google analizza il tuo traffico per mostrarti la pubblicità in cui sei più in target.

Essere in target significa essere più “caldo” ed appetibile per diventare potenziale acquirente di un determinato inserzionista.

Ad esempio se hai appena cercato uno smartphone su Amazon probabilmente lo avrai appena rivisto qui sopra, nonostante io non parli mai di smartphone.

Ma cosa serve a me pubblicare questi banner sul mio sito?


Perché usare AdSense su WordPress

Mi verrebbe quasi da dire che utilizzare AdSense su WordPress è inutile, se non dire fastidioso.

Quanto fastidio danno quei siti pieni di pubblicità dove se ti muovi appare un pop-up, se clicchi si apre una nuova pagina pubblicitaria, se scorri emergono banner che coprono il testo…

Odio puro.

Ad ogni modo, però, i banner AdSense possono essere fonte vitale vera e propria per molti publisher.

Ospitando qualche banner sui tuoi articoli, ad esempio, potresti ripagarti almeno l’hosting annuo (e quindi non andare in perdita).

Ma quindi sono utili o inutili?

I banner sul proprio sito sono utili, su questo non c’è alcun dubbio.

Bisogna però sempre ricordare due cose fondamentali:

  • Gli utenti visitano le tue pagine per leggere, non per essere bombardati di pubblicità;
  • Troppi banner appesantiscono il codice e, di conseguenza, la velocità del tuo sito.

L’utilizzo consapevole di AdSense su WordPress, quindi, consiste nell’individuazione dell’intensità del peso pubblicitario. Questo al fine di evitare due cose:

  • Che gli utenti si innervosiscano, abbandonando il sito;
  • Che il sito sia troppo lento da caricare e che gli utenti abbandonino ancor prima di visualizzare la pagina.

Lo so. Pubblicare più banner possibile significa massimizzare i guadagni, quindi eliminando banner significa perdere soldi.

Ma ne vale la pena?

Per rispondere dobbiamo prima capire quanto e come si guadagna con le pubblicità di Adsense.


AdSense e WordPress. Quanto e come si guadagna?

Non possiamo giustamente parlare di come inserire banner AdSense su WordPress se non si parla di cash, ovvero di quanto si guadagna con questa modalità.

La risposta, purtroppo, è sempre la stessa: dipende.

Sostanzialmente ci sono due fattori che incidono sulle entrate:

  • La quantità di annunci visualizzati;
  • Le pageviews del tuo sito.

Più annunci pubblichi e più hai visibilità dal punto di vista pubblicitario, ma più visitatori hai maggiori sono le possibilità che questi clicchino su un annuncio.

Questo perché le modalità di entrata sono sostanzialmente due:

  • CPC (Costo per Click). L’inserzionista paga per ogni clic sul suo annuncio;
  • CPM (Costo per Mille). L’inserzionista paga per ogni mille visualizzazioni del suo annuncio;

Quindi maggiore è il numero di visitatori e maggiore è sia la possibilità che clicchino (aumentando le tue entrate da CPC) ma anche maggiore sarà la quantità globale di annunci visualizzati (aumentando le tue entrate da CPM).

Ecco perché una soluzione molto furba sarebbe quella di prevedere inserzioni facilmente visualizzabili, senza che queste influiscano sulla User Experience dell’utente.

Questo è il caso di slide-in e footer, annunci pop-up quando l’utente raggiunge un certo punto della pagina oppure annunci video prima della visualizzazione del tuo contenuto.

Detto ciò, vediamo come inserire i nostri banner AdSense su WordPress sfruttando Gutenberg e AMP.


Come configurare AdSense con WordPress

Per configurare AdSense su WordPress ti serve innanzi tutto avere un account AdSense.

Una volta creato il tuo account AdSense dovresti visualizzare una dashboard come la seguente:

adsense wordpress google
Fonte: Google

La prima cosa che devi fare è aggiungere alla scheda Siti l’URL dei siti su cui vuoi pubblicare i banner. In questo modo Google saprà collegare il sito al tuo ID Publisher.

Per trovare il tuo ID Publisher ti basterà cliccare sulla scheda Account/Dati dell’account. Il formato publisher di Google è composto dalla stringa pub-NNNNNN.

Tieni nota di questo valore, perché ti servirà in futuro.

A questo punto possiamo creare i nostri annunci.

Dalla scheda Annunci/Panoramica possiamo creare due tipi di annuncio:

  • Per sito. Da qui permetti a Google di pubblicare in automatico banner sul tuo sito (usa solo questa se non vuoi complicarti la vita);
  • Per unità pubblicitaria. Da qui puoi creare formati da pubblicare manualmente sul tuo sito.

Per procedere avrai bisogno di questi strumenti.

Per terminare devi creare un profilo Google Tag Manager. Puoi trovare qui una spiegazione per come configurarlo al meglio.

Sappi solo che ti basterà inserire il seguente codice con attivatore tutte le pagine di cui hai bisogno:

<script data-ad-client="ca-pub-NNNNNNNNNNNNNN" async src="https://pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

Questo ti sarà sufficiente per applicare gli annunci automatici al tuo sito. Vediamo invece come configurare ora Adsense su WordPress.


Configurare WordPress

Per configurare AdSense con WordPress ti consiglio fortemente di scaricare il plugin SiteKit di Google. Questo strumento ufficiale ti permetterà di collegare molte funzioni di Google senza dover lavorare direttamente sul codice.

Dovrai collegare solamente due strumenti:

  • AdSense
  • Tag Manager

Chiaramente ti consiglio di utilizzarlo anche per collegare le altre funzioni (Analytics, Optimize, Search Console, ecc.) ma per i banner AdSense sono sufficienti questi due.

Per configurare AdSense sarà sufficiente cliccare sul pulsante di configurazione ed inserire il tuo ID Publisher (che ti sei già procurato in precedenza). Questo primo step ti permetterà di collegare il tuo sito ad AdSense per tutti i formati pubblicabili.

Per collegare Tag Manager non dovrai fare molta più fatica.

Devi solo rispettare un’accortezza: creare un contenitore per il Web e uno per AMP. Questo perché utlizzando due versioni distinte del sito potresti avere la necessità di utilizzare codici diversi.

Per creare un contenitore fai così:

  • Accedi al tuo account Tag Manager;
  • Vai su Amministrazione e clicca su + per creare un nuovo contenitore;
  • Crea un contenitore con Piattaforma di destinazione Web e uno AMP diversi;
adsense wordpress tag manager
Configurazione della Piattaforma di destinazione

Se hai impostato bene la tua dashboard in Tag Manager ti basterà selezionare:

  • Il tuo account.
  • Il contenitore Web.
  • Il contenitore AMP.

In questo modo, se vuoi utilizzare le inserzioni automatiche, appariranno automaticamente sia su AMP che su Web.

Se invece vuoi impostare anche banner manuali ora ti spiegherò come farlo con Gutenberg e anche su AMP.


AdSense + Gutenberg

Gutenberg è l’editor a blocchi di WordPress che ha rivoluzionato il modo di scrivere.

Per inserire banner con Gutenberg in modo semplice e ricorrente utilizzeremo uno strumento molto diffuso: i blocchi ricorrenti.

Questa funzione consente di creare un blocco, salvarlo e poterlo riutilizzare in futuro in altri articoli. Un’altro forte vantaggio è che modificandolo in un articolo viene poi modificato anche in articoli precedenti, quindi su tutto il sito!

Innanzi tutto creiamo il nostro banner.

Da AdSense, nella scheda Panoramica/Per unità pubblicitaria, possiamo creare banner sulla base di tre categorie di annuncio:

  • Display;
  • In-Feed;
  • In-Article.

Per il Web puoi sbizzarrirti come ti pare e piace, non ci sono limitazioni alla creatività. L’unica cosa che devi fare è, una volta creata la tua Unità Pubblicitaria, copiare il codice generato che puoi trovare cliccando sul pulsante “<>“.

A questo punto dovrai solamente creare il blocco su Gutenberg:

  • Vai su una riga vuota e cliccando sul pulsante + scegli HTML Personalizzato;
  • Incolla il codice che hai copiato poco fa;
  • Clicca su “” e seleziona “Aggiungi ai blocchi riutilizzabili
  • Scegli un nome (es. Banner AdSense) e Salva.

Come faccio ad utilizzare un blocco riutilizzabile?

  • Vai su una riga vuota e clicca il pulsante +;
  • Digita il nome del blocco riutilizzabile (es. Banner AdSense) e premi sul pulsante che ti risulterà dalla ricerca.

Stop.

In questo modo visualizzerai i banner su Web e Mobile (non AMP).

Usa il blocco riutilizzabile ogni volta che hai bisogno di mettere un banner, sapendo che se volessi modificare qualcosa ti sarà sufficiente modificarne solo uno per farlo anche con tutti gli altri del tuo sito 😉


AdSense + AMP

Se fino a questo momento hai sbattuto la testa ovunque per capire come caricare banner AdSense su AMP ti do una cattiva notizia: è davvero semplice.

Avrai solo bisogno di tre cose:

  • Il contenitore Tag Manger per AMP (che hai impostato prima);
  • Un’unità pubblicitaria in formato Display;
  • Un blocco riutilizzabile.

Il formato Display, per il momento, è l’unico supportato da AMP. Tutti gli altri formati, se inseriti a codice, non vengono visualizzati.

Intanto creiamo la nostro banner formato Display:

  • Accedi ad AdSense;
  • Vai su Annunci, Panoramica, Per Unità Pubblicitaria;
  • Clicca su Annunci Display;
  • Personalizza il formato e salvalo;
  • Seleziona il codice dalla scheda <> e seleziona la scheda AMP;

A questo punto hai due formati codice da gestire.

Per inserire il primo codice, quello più corto, nel <head> delle tue pagine:

  • Vai su Tag Manager e seleziona il contenitore AMP;
  • Crea un nuovo tag generico (HTML) ed incolla il codice;
  • Seleziona l’attivatore “Tutte le pagine” oppure le pagine di cui hai bisogno;
  • Salva e carica il contenitore.

Per caricare il banner sulle tue pagine WordPress/Gutenberg:

  • Crea un nuovo blocco HTML;
  • Incolla il secondo codice, quello più lungo, all’interno di questa sezione;
  • Salva il blocco ed inseriscilo nei Blocchi Riutilizzabili;

In questo modo potrai riutilizzare il formato AMP in tutti gli articoli tu abbia bisogno!


[TIP] Integrare i banner in un solo blocco riutilizzabile

Se da un lato è vero che utilizzare i blocchi riutilizzabili sia un lusso, altrettanto è vero che doverne inserire uno per i formati standard e uno per i formati AMP è un po’ scomodo.

Come fare quindi?

Semplice: creo un blocco unico.

Ti basta creare un nuovo blocco HTML ed inserire i codici in questo modo:

<script>
   Codice del formato banner standard
<script>

<amp-ad>
   Codice del formato banner AMP
</amp-ad>

Ma come funziona? Non fa doppioni?

Se hai impostato bene Tag Manager questo problema non sussiste. Questo perché tramite Tag Manager carichi due “attivatori” dei banner diversi: uno generico per le pagine generiche ed il formato AMP per le pagine AMP.

Se navighi su pagine standard il codice riconoscerà il formato <script> ma non <amp-ad> e non caricherà quest’ultima versione.

Viceversa, nel formato AMP non verrà riconosciuto il formato <script> e verrà visualizzato solamente il formato <amp-ad>.

Piccolo dettaglio: se scegli di usare lo stesso formato Display sia per il formato standard che per AMP, dovrai comunque caricare entrambi i codici (<script> e <amp-ad>) nel blocco riutilizzabile.

Di Davide

Patito di trattori e chitarre scrivo sul mio blog da quando mi sono laureato in Economia presso l'Università degli Studi di Verona. Tratto strategie di marketing, accrescimento personale e professionale per raggiungere gli obiettivi.