Come collegare il pixel di Facebook con Google Tag Manager

Indice dei contenuti

Tracciare correttamente gli eventi che passano tra il nostro sito WooCommerce e la piattaforma Meta non è semplice, ma tutti sappiamo quanto sia importante, per la corretta riuscita delle campagne, raccogliere una adeguata quantità di dati e che questi dati siano di qualità.

Per registrare correttamente i dati si utilizza, in questo caso, il Pixel di Meta. Ma di cosa si tratta? Approfondiamo.

Cos’è il pixel di Meta?

Per pixel di Meta s’intende un codice Javascript che, una volta posizionato sulla pagina web, scarica la libreria di Meta e le inoltra le informazioni che abbiamo deciso di condividere. È formato da 2 parti, uno Script e un noscript che contiene un tag <img> che inserisce nel nostro sito un’immagine di 1 pixel trasparente.

Questa immagine è utile per tracciare gli eventi anche nei browser che non supportano JavaScript.

Quando un utente visita le nostre pagine il suo browser scarica i contenuti presenti per poterli visualizzare e tra questi anche il pixel.

Il download di questa piccola immagine viene registrato dai server di Meta che, unendolo ad altri parametri come l’ID del pixel e il nome dell’evento, sono in grado di monitorare le azioni che l’utente sta compiendo sul nostro sito, allo stesso modo in cui fa Google con i suoi prodotti.

Ma è possibile collegare correttamente il pixel di Facebook con Google Tag Manager (GTM)? Scopriamolo insieme.

Come collegare il pixel di Facebook con Google Tag Manager

Vediamo insieme come collegare il pixel di Facebook con Google Tag Manager attraverso un caso pratico.

Qualche tempo fa siamo stati contattati da un’agenzia di performance marketing con cui collaboriamo che stava avviando delle campagne per un sito e-commerce neonato realizzato da un’agenzia terza.

La piattaforma web, realizzata con WordPress e WooCommerce, era stata collegata a Meta tramite il plugin Facebook for WooCommerce e, ad un mese circa dal lancio, aveva registrato oltre un milione di eventi, per la maggior parte PageView provenienti dal server.

Il plugin Facebook for WooCommerce comunicava al Gestore Eventi di Facebook un alto numero di attività del server che generavano valori alterati all’interno della piattaforma, non consentendo una corretta stima delle attività in corso.

Era quindi fondamentale eliminare i dati sporchi che si stavano formando e tracciare solo i dati di qualità, per farlo andava prima di tutto eliminato il pixel generato dal plugin e avviato il tracciamento tramite GTM.

Come disattivare il Pixel di Facebook generato da Facebook for WooCommerce

Per disattivare il Pixel e le Conversion API (CAPI) generati dell’estensione ufficiale esiste un frammento di codice, fornito dagli sviluppatori stessi del plugin:


/*Disabilitare il pixel facebook generato dal plugin*/
add_filter( 'facebook_for_woocommerce_integration_pixel_enabled', '__return_false' );

Questo codice deve essere inserito all’interno del file function.php del tema, possibilmente nel tema child.

Ricorda sempre di fare un backup del file prima di modificare il codice e di avere a tua disposizione gli accessi FTP: una modifica errata potrebbe mandare il sito in errore e renderlo irraggiungibile.

Fatto ciò, per tracciare i dati senza errori abbiamo optato per collegare il pixel di Meta con il Google Tag Manager. Ecco come.

Collegare il Pixel di Meta con Google Tag Manager

Per collegare il pixel di Meta con Google Tag Manager, accedi a GTM all’indirizzo: tagmanager.google.com. Crea un nuovo account, se non ne hai già uno, e segui la configurazione del contenitore che più si adatta alla tua situazione.

Nel nostro caso abbiamo selezionato Web tra le piattaforme di destinazione.

Per installare il codice che richiamerà il Tag di Google all’interno del tuo sito WooCommerce dovrai inserire 2 codici, il primo il più in alto possibile nella sezione <head>:


<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');</script>
<!-- End Google Tag Manager -->

il secondo immediatamente dopo l’apertura del tag :


<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-XXXXXXX"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->

A seconda del tema installato potresti trovare questi tag in posizioni diverse, generalmente sono entrambe dentro al file header.php.

Anche in questo caso ricorda di fare un backup del file originale, di caricare quello modificato nel tuo tema child e di avere gli accessi alla tua area FTP per un ripristino veloce.

Segui questi passaggi per aggiungere il tag:

Clicca su Aggiungi un nuovo tag –> Configurazione Tag;
Tra i modelli disponibili, seleziona Html personalizzato;
Incolla il Pixel che hai generato su Facebook;
Clicca si Attivazione;
Seleziona All Pages come trigger di attivazione;
Assegna un nome al tuo tag;
Salva.

Una volta salvato il tag devi pubblicare GTM sul tuo sito. Torna alla pagina principale, clicca il pulsante invia (in alto a destra), aggiungi un nome descrittivo all’operazione che hai appena compito es. Inserimento codice pixel facebook e pubblica.

Torna nuovamente alla schermata principale e clicca Anteprima (sempre in alto a destra) e prosegui la procedura di simulazione per verificare che il tag venga rilevato sul sito, dovresti ottenere una schermata di questo tipo:

Se il pixel risulta attivo, come nell’immagine di esempio, puoi chiudere Google Tag Manger e tornare sul Gestore Eventi di Facebook per verificare che il tracciamento degli eventi avvenga correttamente attraverso il pixel.

Come verificare il tracciamento degli eventi da parte del Pixel di Facebook

Una volta effettuato l’accesso al gestore eventi di Meta, clicca su Dataset per visualizzare l’elenco dei pixel e segui i passaggi indicati:

Nome del Pixel inserito in GTM;
Tab Testa gli eventi;
Seleziona come canale Sito Web;
Inserisci l’url del tuo sito web;
Clicca Testa Eventi per lanciare il test.

Il tuo sito verrà aperto in una tab differente del tuo browser. Naviga alcune pagine e torna alla tab di Facebook senza chiudere il sito: sulla pagina appariranno, entro 24 ore e se l’inserimento ha funzionato, i risultati del tuo test che confermeranno l’avvenuta installazione del Pixel e i tracciamenti della tua navigazione.

Conclusione

Possiamo, quindi, affermare che Google Tag Manager è uno strumento valido per l’installazione del Pixel di Facebook e per tracciare in modo corretto gli eventi. È fondamentale, nel caso in cui tu stia utilizzando altri sistemi per comunicare i tuoi eventi a Facebook, che questi vengano disabilitati per evitare di inviare eventi decuplicati.

Tips: Per verificare meglio i tracciamenti puoi installare queste due estensioni nel tuo browser chrome, Meta Pixel Helper che ti aiuterà a tracciare gli eventi legati al pixel di Facebook e Tag Assistant per verificare il corretto posizionamento e tracciamento del tag creato in GTM.

Adriano Cipriani

Co-founder e Web Designer di Ca2, si occupa principalmente di grafica e dello sviluppo siti web, dalla radice fino all’interfaccia, e di design per i dispositivi mobile. Dopo la laurea in Grafica e Progettazione Multimediale e una passione sfrenata per la tecnologia, ha approfondito la sfera dello sviluppo web, riuscendo a far conciliare perfettamente competenze e passione.

Lascia un Commento

Lascia un commento Annulla risposta