Aggiungere banner AdSense con Google Tag Manager

Lo sviluppatore web e l’addetto all’ufficio marketing sono soliti inseguirsi e scontrarsi per gestire le campagne pubblicitarie, il remarketing e la cattura di eventi per Analytics. La nascita di Tag Manager di Google (e altri tag management system) ha portato finalmente pace tra questi due mondi, rendendo più autonomo e semplice il lavoro di chi deve gestire le campagne pubblicitarie.

Ammettiamo di avere un blog WordPress dove si vuole aggiungere un banner AdSense di tipo skyscraper nella sidebar senza dover modificare il template o aggiungere l’intero corpo della chiamata per il banner in un tag testo.

Perché farlo? Tra i maggiori vantaggi dell’utilizzo di un tag manager abbiamo la possibilità di non dover dare un account da amministratore a chi gestisce le campagne e la possibilità di differenziare i banner da visualizzare in base all’url, articolo visualizzato e altri parametri cari al reparto marketing.

Se il template non dispone di aree disposte per contenere il banner, possiamo sempre creare un widget di testo con il codice html necessario per definire il div di destinazione.

adsensewptag

Ovviamente il blog WordPress deve contenere nel tema il necessario per attivare il Tag Manager di Google o in alternativa utilizzare uno dei tanti plugin dedicati.

AdSense non è tra i tag preconfigurati attualmente, ma possiamo utilizzare un “Custom HTML Tag” per iniettare il codice del banner via javascript utilizzando la versione ridotta di jquery integrata nel tag manager. Accediamo nel pannello e creiamo un nuovo tag:

Aggiunta di un custom tag per AdSense

Se fate fatica a leggere il testo dall’immagine (o volete copiarlo e incollarlo) il codice html inserito nel tag è il seguente:

<script async src="//pagead2.googlesyndication.com/pagead/js/adsbygoogle.js"></script>

<script>
  jQuery(function() {
    if (jQuery('#sidebar_adv_skyscraper').length > 0){
    jQuery('#sidebar_adv_skyscraper').append('<ins class="adsbygoogle" style="display:inline-block;width:160px;height:600px" data-ad-client="ca-pub-xxxxxx" data-ad-slot="xxxxxx"></ins>');
  }

  (adsbygoogle = window.adsbygoogle || []).push({});
  });
</script>

In questo esempio è stato utilizzato il div contenitore “sidebar_adv_skyscraper”, ma potete benissimo aggiungere il banner utilizzando le funzioni insertAfter e insertBefore o altra tecnica, il limite è la vostra fantasia.

Ovviamente anche l’uso di WordPress deve essere considerato come mero esempio: è possibile applicare questa metodologia in qualsiasi tipo di sito, da quello statico alla soluzione enterprise.

Un commento:

  1. Oof. Folks you don’t need jQuery to inject ads into a page. Not only does embedding jQuery with your ad slow down your website, it also has the potential to cause hard-to-track JavaScript conflicts on your site. Instead, use native DOM methods to add dynamic ads into your website.

Lascia un commento

Il tuo indirizzo email non sarà pubblicato. I campi obbligatori sono contrassegnati *