Inserire Google Adsense su Amp WordPress

inserire-banner-adsense-in-amp-wordpress

È 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

 

percorso cartella single.php del plugin AMP

percorso cartella 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-12345678910″  <!– VOSTRO CODICE ADSENSE—>
data-ad-slot=”123456789″> <!— 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.

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.

 

annuncio adsense su pagina AMP di WordPress

annuncio adsense su pagina AMP di WordPress

 

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”>

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.

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. Appena risolvo (se è possibile risolvere) ve ne darò conto su questa stessa pagina.

RISULTATO FINALE BANNER AMAZON NEGATIVO

 

Vuoi padroneggiare WordPress? Ti consiglio questo libro che ho trovato davvero completo.


WEBMASTER CON WORDPRESS

manuale wordpress

Bonaventura Di Bello, è uno dei massimi conoscitori di WordPress. Davvero ben fatto questo suo libro, adatto a chi vuole utilizzare abilmente questo CMS. In vendita su Amazon.


Summary
Inserire Google Adsense su Amp WordPress
Article Name
Inserire Google Adsense su Amp WordPress
Description
Soluzione. Come inserire banner google adsense sulle pagine AMP di un sito WordPress. Una piccola modifica e pochi minuti, senza dover installare altri plugin.
Author
Publisher Name
flavioweb.net
Publisher Logo
About the author

Flavio

Mi trovo nel campo del web dal 2006. Nel tempo mi sono specializzato soprattutto nell'indicizzazione,  nel posizionamento di siti internet e nell'utilizzo dei social media principali a fini di marketing.

Readers Comments (7)

  1. Salve, se volessi pubblicare una pubblicità con uno script come potrei fare, visto che google amp non accetta gli script.
    Grazie

    • Io ho provato ad inserire un banner tra l’immagine e il testo, inserendo lo script direttamente dentro plugins/amp/templates/single.php. Il banner compare in tutte gli articoli ma in Google Search Console nella sezione dedicata agli errori AMP ritrovo che Google vieta l’utilizzo di codici script dentro AMP.

      Cosa potrei fare?

      Grazie del supporto
      Buona serata

      • Ciao Peppo. Gli script esterni sono vietati in amp perché proprio loro sono i maggiori responsabili del rallentamento delle pagine dei siti. Esistono degli escamotage ma io stesso sto testando se funzionano.
        La mia attenzione attualmente è sui banner amazon e, per quanto riguarda la visualizzazione senza generare errori e l’invalidazione della pagina amp ho risolto. Resta da vedere se la modifica permetterà ad amazon il tracciamento degli acquisti. Ho aperto un ticket con loro proprio per questo ma ancora non rispondono.
        Questo è quello che ho fatto:

        1. Inserito nella head del sito il seguente codice: < script async custom-element="amp-iframe" src="https://cdn.ampproject.org/v0/amp-iframe-0.1.js">
        2. Modificato il tag iframe del banner in amp-iframe
        3. Siccome i banner amazon contengono anche css, ho eliminato le seguenti istruzioni: border=”0″ marginwidth=”0″ e style=”border:none;max-width:800px;max-height:600px;”
        Il banner viene visualizzato, la pagina amp non presenta errori ed è stata validata ma, come detto, adesso bisogna vedere se per amazon va bene.
        Ti tengo aggiornato in questa pagina.

  2. Grazie tantissimo della risposta. Ho inserito dentro single.php il codice script compreso tra …script…. La pubblicità compare ora devo analizzare se compaiono errori. Ovviamente hell’header del tema ho inserito quella riga di codice che mi hai detto.
    Ci aggiorniamo grazie ancora
    Saluti e buona serata

    • Bene Peppo Sono contento.Facci sapere. Grazie a te.

    • Questo è quello che ho fatto:

      CODE

      Ho analizzato con questo sito un link qualsiasi
      https:// validator.ampproject.org/

      Ma ottengo
      The tag ‘script’ is disallowed except in specific forms.

      se cambio il tag text/javascript con amp-iframe non visualizzo la pubblicità.

      Che posso fare?
      Grazie ancora

      • Allora Peppo. Segui questa strada. A me ha funzionato.

        Tra i tag head del file single.php inserisci il codice

        script amp iframe

        Poi nel punto in cui vuoi compaia l’annuncio con l’iframe metti così:

        amp iframe di amazon

        Prova

Leave a comment

Your email address will not be published.


*


*