Installare pixel facebook su wordpress senza plugin

becreativestudio
Maggio 5th, 2020
One Comment

Breve guida pratica a come Installare pixel facebook sul tuo sito in wordpress senza plugin

Per installare pixel facebook senza l’uso di plugin aggiuntivi ci sono alcuni requisiti indispensabili:

Avere codice del pixel facebook (seguendo la guida ufficale facebook)
Tema child installato (se non ne hai uno leggi qui crearlo)
2 minuti del tuo tempo

1. Recuperare o creare Pixel facebook

Come indicato sopra ppuoi recuperare o creare il codice del pixel facebook da inserire nel tuo sito direttamente seguendo la guida ufficiale ma i passaggi sono molto semplici

Accedi alla tab Pixel in Gestione eventi.
Clicca su Crea un pixel.
Leggi le istruzioni sul funzionamento del pixel, quindi clicca su Continua.
Aggiungi il nome del pixel.
Inserisci L’URL del tuo sito web per controllare le opzioni di configurazione semplice.
Clicca su Continua.

Una volta creato il vostro pixel selezioniamo “Aggiungi manualmente il codice pixel al sito web” e ci verrà chiesto di copiare e incollare un codice come questo che segue prima della chiusura dell <head> del nostro sito, per ora noi lo copiamo cosi nudo e crudo.

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'XXXXXXXXXXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->

2. Inserire pixel facebook nel function.php

Ora esattamente come abbiamo fatto nella precedente guida per google analytics prendiamo il nostro codice e lo inseriamo nel function.php.

Vai in Aspetto > editor del tema > Selezioni il tema child in alto a destra (che deve essere attivo) > selezioni function.php > e copi lo snippet qui sotto ricordati di sostituire il codice del facebook pixel con quello che abbiamo recuperato prima.

function ns_fb_pixel() { ?>    

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'XXXXXXXXXXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->


  <?php
  }
  
add_action( 'wp_head', 'ns_fb_pixel', 10 );

clicca su aggiorna in basso ed il tu pixel sarà installato ed attivo su tutte le pagine del tuo sito.

3. Pixel tracciamento su pagine specifiche

Il pixel che abbiamo creato in precedenza è quello standard di facebook ma, a volte, può essere necessario installare anche un pixel di conversione o codici diversi in pagine specifiche come ad esempio nelle (thank you page o nelle pagine di checkout di un ecommerce) anche questo passaggio e semplice basta modificare il codice come segue aggiungendo un “if ( is_page(IDXX)”

function ns_codice_pagina() {
        if ( is_page(IDXX) ) {
?>    

<!-- Facebook Pixel Code -->
<script>
  !function(f,b,e,v,n,t,s)
  {if(f.fbq)return;n=f.fbq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};
  if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
  n.queue=[];t=b.createElement(e);t.async=!0;
  t.src=v;s=b.getElementsByTagName(e)[0];
  s.parentNode.insertBefore(t,s)}(window, document,'script',
  'https://connect.facebook.net/en_US/fbevents.js');
  fbq('init', 'XXXXXXXXXXXXXX');
  fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
  src="https://www.facebook.com/tr?id=XXXXXXXXXXXXXX&ev=PageView&noscript=1"
/></noscript>
<!-- End Facebook Pixel Code -->


  <?php
			
			
        } 
    }
add_action( 'wp_head', 'ns_codice_pagina', 10 );

Sostituendo “IDXX” con l’id della pagina dove vi interessa avere il codice

L’ID pagina lo potete recuperare facilmente da back end andando modifica in pagina e prendendo il valore numerico dopo “post=”

Conclusioni

Come hai notato dal codice sopra abbiamo usato una function ‘ns_codice_pagina’ che viene attivata da un add_action sull’ hook ‘wp-head’:

add_action( 'wp_head', 'ns_codice_pagina', 10 );

Questo è uno dei grandi vantaggi di wordpress con la stessa funzione potremmo andare a richiamare molte altre cose all’interno del nostro wp_head come ad esempio google analytics, css, e molto altro e sceglierne anche il posizionamento cambiando l’ultimo valore ’10’ che vediamo nell’esempio.

Comments are closed