È possibile inserire gli annunci di Google Adsense nella versione AMP di un sito WordPress? Decisamente si e in questo articolo andremo a vedere come inserire Adsense sulle pagine amp di WordPress. Sto verificando se il metodo funziona anche con altri sistemi di affiliazione come ad esempio Amazon.

Come inserire i banner Adsense su Amp

Il metodo più pulito, quello che non comporta l’installazione di un nuovo plugin dedicato all’inserimento dei banner adsense sulle pagine in amp del sito in WordPress, è quello che prevede l’utilizzo di una piccola porzione di codice da implementare nel file single.php.

Per metterlo in pratica occorre che abbiate già installato sul vostro sito WordPress, il plugin AMP. Qui la guida all’implementazione di AMP su WordPress.

Una volta installato il plugin AMP, aprite il vostro programma di trasferimento files via FTP e scaricate il file single.php annidato all’interno della cartella del plugin stesso. Attenzione… non il single.php del tema WordPress, ma quello del plugin AMP. Questo il percorso:

Root —> Wp-Content —> Plugin —-> AMP —–> Templates —–> Single.php

Ecco l’immagine relativa al percorso per trovare il file single.php del plugin AMP

 

Scaricate il file single.php sul desktop del vostro computer e poi apritelo con un editor di testo (notepad, notepad ++, o altro di vostra preferenza).

Attenzione: È consigliato mettere il banner adattabile per la visualizzazione responsive

Adesso inserite il codice che segue subito dopo l’istruzione <?php $this->load_parts( array( ‘header-bar’ ) ); ?>

 

<!-- Inizio Codice per Adsense-->
<br><div align="center">

<amp-ad
layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-1234567891234567" <!-- VOSTRO CODICE ADSENSE--->
data-ad-slot="1234567890"> <!--- CODICE AD-SLOT DEL BANNER ADSENSE --->
<div placeholder></div>
<div fallback></div>
</amp-ad>
</div>
<!--Fine Codice per Adsense -->

Salvate il file e ricaricatelo sul server.

Questo codice, Google consiglia di metterlo sopra, nei contenuti above the fold. Per i banner da posizionare below the fold invece suggerisce di utilizzare il codice per l’unità pubblicitaria responsive. Ecco il codice:

<amp-ad
layout="responsive"
width=300
height=250
type="adsense"
data-ad-client="ca-pub-1234567891234567"
data-ad-slot="1234567890">
</amp-ad>

Dopo qualche minuto, testate sullo smartphone il vostro annuncio adsense nella versione amp dei vostri articoli.

Il risultato dovrebbe essere la visualizzazione dell’annuncio adsense in cima all’articolo.

 

 

Se inserite lo stesso codice in un altro punto del file single.php, visualizzerete gli ads di google adsense anche nei posti scelti. La personalizzazione però è possibile all’inizio e alla fine dell’articolo.

Per mettere il banner adsense alla fine dell’articolo AMP, inserite lo stesso codice prima dell’apertura del tag footer

//codice

<footer class=”amp-wp-article-footer”>

RICORDATEVI CHE SE AGGIORNATE IL PLUGIN AMP, IL FILE SINGLE.PHP SARÀ SOVRASCRITTO E SPARIRANNO I VOSTRI ANNUNCI. QUINDI FATE UNA COPIA DI BACKUP DEL FILE STESSO E RICARICATELO NEL CASO DI AGGIORNAMENTI.

Naturalmente è possibile inserire gli adsense su amp anche con appositi plugin per WordPress. Uno di questi è AMP per WP – Accelerated Mobile Pages che però va a sostituire il plugin AMP di Automattic e, tra le numerose funzioni disponibili, consente anche di visualizzare gli adsense. Se però non è strettamente necessario, evitate di caricare il vostro sito di plugin che comportano normalmente l’appesantimento del sito e l’aumento del tempo di caricamento delle pagine.

Errori Amp sulla Search Console

Sulla Search Console possono apparire errori legati all’utilizzo di AMP. Per quel che concerne le versioni AMP dei siti che utilizzano adsense, l’errore più comune è quello relativo al messaggio “Il tag “amp-ad extension .js script” manca o è errato, tuttavia è richiesto da “amp-ad”. A breve sarà considerato un errore”.

Non è un errore critico ma un avvertimento che questo in futuro potrebbe diventarlo. Attualmente non vi sono problemi con la visualizzazione degli snippet delle pagine AMP sulla pagina ricerca di Google.

L’errore ci dice che manca un elemento java script a supporto del tag “amp-ad”, quello utilizzato per la visualizzazione dei banner adsense.

Per fixarlo bisogna aprire il client FTP, scaricarsi il file single.php all’interno della cartella del plugin AMP e aggiungere, prima della chiusura del tag </head> lo script seguente

<script async custom-element=”amp-ad” src=”https://cdn.ampproject.org/v0/amp-ad-0.1.js”></script>

Banner Amazon e di altri sistemi di affiliazione

Attenzione: per diverse ragioni i banner Amazon sembrano non funzionare su AMP. Quello che segue sono i passi che ho fatto per tentare di inserirli ma ad oggi non funziona al 100%.

Primo Tentativo: Per Amazon, basterà inserire lo script del banner che vi rilasciano ed inserirlo nei punti indicati prima per i banner adsense. Testato personalmente con Amazon, funziona, anche se bisognerà inserire qualche accorgimento.

Infatti, messo così, il banner Amazon viene visualizzato correttamente ma la Search Console segnala che la pagina AMP contiene errori e non viene convalidata (quindi non è idonea alla pubblicazione sulla classifica di ricerca).

In particolare la Search Console segnala la presenza non implementata correttamente dell’I-frame e la presenza dei CSS esterni. Per ovviare al problema ho fatto così:

Inserito tra i tag <head></head> del file single.php l’istruzione seguente

< script async custom-element=”amp-iframe” src=”https://cdn.ampproject.org/v0/amp-iframe-0.1.js”>

Cambiato il codice del banner sostituendo

<iframe>……. codice …..</iframe> con <amp-iframe>… codice…</amp-iframe>

Eliminato tutti i riferimenti ai CSS nel codice del banner Amazon

(nel mio caso) border=”0″ marginwidth=”0″ e style=”border:none;max-width:800px;max-height:600px;”

Infine ho contattato Amazon per chiedere se queste modifiche vanno ad invalidare il click e l’eventuale commissione di acquisto, ricevendo come risposta che il supporto non è competente per le questioni tecniche di codice… bah.

Fatto sta che adesso il banner si visualizza ma non è cliccabile.

RISULTATO FINALE TEST BANNER AMAZON NEGATIVO