Guida per Aggiungere Analytics e Adsense nelle pagine AMP su WordPress

Abbiamo parlato in un precedente articolo di cosa fosse AMP, progetto avviato da Google, e abbiamo anche parlato di come partecipare a questa iniziativa con un blog WordPress, adesso invece vediamo come aggiungere Analytics e Adsense all’interno delle nostre pagine. Il tutto per questione di sicurezza e di utilizzi di Plugin inutili sarà fatto via codice, ma non temete, ci sarà di aggiungere poca roba in sezioni facilmente recuperabili.

Analytics ci servirà per avere statistiche sulle pagine AMP visitate. Il codice da inserire è questo:

[php]add_action( ‘amp_post_template_head’, ‘rpcreative_amp_add_analytics_social_ads_js’ );
function rpcreative_amp_add_analytics_social_ads_js( $amp_template ) {
$post_id = $amp_template->get( ‘post_id’ );
?>
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<?php
}
add_action( ‘amp_post_template_footer’, ‘rpcreative_amp_add_analytics_social_code’ );
function rpcreative_amp_add_analytics_social_code( $amp_template ) {
$post_id = $amp_template->get( ‘post_id’ );
?>
<amp-analytics type="googleanalytics" id="analytics1">
<script type="application/json">
{
"vars": {
"account": "UA-43876549-1" // Modifica questo dato inserendo il tuo codice di Analytics
},
"triggers": {
"trackPageview": {
"on": "visible",
"request": "pageview"
}
}
}
</script>
</amp-analytics>

<?php
}[/php]

Per aggiungere questo codice dovrete andare nella sezione Aspetto->Editor e selezionare il tema che state utilizzando.
Il codice appena scritto dovrà essere inserito in functions.php esattamente alla fine del documento. Ricordatevi che qualora aggiornaste il tema dovrete reinserire questo codice all’interno del file functions.php.

Adsense ci servirà per guadagnare tramite i banner pubblicitari offerti da Google. Il codice da inserire è questo:

[php]
<?php $this->load_parts( array( ‘featured-image’ ) ); ?>

// Adsense code START
<br><div align="center">
<amp-ad layout="fixed-height"
height=100
type="adsense"
data-ad-client="ca-pub-4032710958875645" //inserisci codice cliente di Adsense
data-ad-slot="0110036438"> //inserisci codice del banner Reattivo di Adsense
<div placeholder></div>
<div fallback></div>
</amp-ad>
</div>
// Adsense code END

<div class="amp-wp-article-content">
[/php]

Per aggiungere questo codice dovrete andare nella sezione Plugin->Editor e selezionare il Plugin AMP.
Il Codice appena scritto dovrà essere inserito in single.php esattamente tra la riga iniziale già presente per la “featured image” e la riga finale che mostra il contenuto dell’articolo.

Dopo aver eseguito i seguenti cambiamenti potrete andare a vedere il risultato aggiungendo “/amp/” all’articolo da analizzare.