In questa guida ti mostrerò come tracciare lo Scroll dell’utente sulle pagine del tuo sito web e successivamente inviare l’evento al Pixel di Facebook.

Come saprai, l’evento Scroll non è presente tra gli eventi standard di Facebook per cui dobbiamo utilizzare la struttura degli eventi Custom.

Facciamo finta di aver bisogno di tracciare quando l’utente esegue uno Scroll del 50% o del 75% della pagina, magari per creare segmenti di pubblico da utilizzare per le tue campagne pubblicitarie.

Nessun problema grazie al Template Facebook Pixel e Google Tag Manager!

Sei pronto? Iniziamo!

STEP 1 – IMPORTA IL TEMPLATE DALLA GALLERY DI GOOGLE TAG MANAGER

Per prima cosa vediamo come importare il Template nel nostro contenitore di Google Tag Manager.

Entra nel tuo account di Google Tag Manager e fai così:

  • Sezione Tags > New > Tag Configuration
  • Clicca su: “Discover more tag types in the Community Template Gallery

Accedi alla gallery dei template Google Tag Manager

  • Utilizza la barra di ricerca per cercare “Facebook Pixel” e clicca sul Template ufficiale di facebookincubator.

 

Cerca e seleziona il template ufficiale del pixel di Facebook

 

  • Infine clicca su Add to workspaces per aggiungerlo al tuo contenitore di GTM

 

Aggiungi il template ufficiale del Pixel di Facebook al tuo ambiente di lavoro in GTM

 

STEP 2 – Crea l’attivatore (trigger) di tipo Scroll

Per prima cosa crea il Trigger che si accenderà quando l’utente esegue lo Scroll:

  • In GTM > Triggers > New > Trigger Configuration
  • Tipo di Trigger: Scroll Depth
  • Seleziona l’opzione Vertical Scroll Depths
  • Percentages: Inserisci “50,75” (in questo modo il Trigger scatterà sia allo Scroll del 50% della pagina che al 75%)
  • Attiva su: All Pages (in questo modo il Trigger si accenderà su tutte le pagine, se ti interessa tracciare lo Scroll solamente su alcune pagine del tuo sito web seleziona Some Pages e utilizza la variabile Page Path per filtrare le pagine che ti interessano utilizzando il path, esempio www.miosito.com/contatti inserirai Page Path equals /contatti)
  • Salva il Trigger con il nome: Scroll 50 – 75%

 

Trigger scroll verticale 50 - 75 % Google Tag Manager

 

STEP 3 – CREA LA VARIBILE DI LIVELLO DATI (DataLayer Variable)

Adesso crea la variabile di livello dati che intercetterà la percentuale dello Scrolling, così da poter distinguere il 50% dal 75%.

Fai così;

  • In GTM > Variables > User-Defined Variables > New > Variable Configuration
  • Tipo di Variabile: Data Layer Variable
  • Nome Variabile: gtm.scrollThreshold
  • Salva la Variabile con il nome: “dlv – gtm.scrollThreshold”

 

Variabile di livello dati percentuale scroll Google Tag Manager

 

STEP 4 – Crea il Tag Evento con il Tag Ufficiale del Pixel di Facebook

Infine crea il Tag evento di Facebook:

  • In GTM > Tags > New > Tag Configuration
  • Tipo di Tag: Facebook Pixel
  • Facebook Pixel ID: Inserisci l’ID del tuo Pixel di Facebook
  • Event Name: Seleziona Custom e inserisci “scroll_{{dlv – gtm.scrollThreshold}}” (in questo modo il nome dell’evento sarà composto da “scrol_” + la percentuale dello Scroll eseguita dall’utente 50% o 75%)
  • Trigger: Scroll 50 – 75%
  • Salva il Tag con il nome: “FB – Scroll 50 – 75%”

 

Tag Evento Facebook Scroll 50 - 75% Google Tag Manager

 

STEP 5 – Verifica il funzionamento con il Debug Mode di GTM

L’ultimo step ovviamente è verificare se tutto funziona a dovere utilizzando la combo Debug di GTM / Facebook Pixel Helper.

Per prima cosa attiva la modalità Debug di Google Tag Manager e vai sul tuo sito web, una volta completato il caricamento esegui uno Scroll del 50% della pagina.

Se hai fatto tutto bene, dovresti vedere l’evento Scroll Depth nella scheda di Debug di GTM e di conseguenza si sarà attivato il Tag FB – Scroll 50 – 75%:

 

Tag evento scroll 50% Facebook fired GTM

 

Adesso torna sul tuo sito web e continua lo Scroll, stavolta arriva al 75% della pagina, se torni nella scheda di Debug di GTM dovresti vedere un secondo evento Scroll Depth e il Tag FB – Scroll 50 – 75% si sarà acceso una seconda volta:

 

Tag evento scroll 75% Facebook fired GTM

 

Adesso facciamo la prova del nove, torna sul tuo sito e clicca sull’estensione Pixel Helper, se tutto è andato bene dovresti vedere due eventi scroll_50 e scroll_75:

 

Evento Scrol 50 - 75% Pixel Helper fired

YEAHHHH!

Adesso non ti resta che tornare nel tuo contenitore di Google Tag Manager e pubblicare le modifiche cliccando sul pulsante blu “Submit“.

Questa procedura puoi utilizzarla per qualsiasi evento Custom tu voglia configurare. Scegli un nome adatto per l’evento, crea il rispettivo Trigger ed il gioco è fatto!

STEP BONUS: LE OBJECT PROPERTIES (I PARAMETRI DELL’EVENTO)

Vediamo adesso come configurare i parametri di un evento Facebook.

Torniamo un secondo sull’esempio dell’evento Scroll, come potrei fare per passare la percentuale dello Scroll effettuato dall’utente come parametro dell’evento e non nel nome dell’evento?

In questo modo avrei un unico evento Scroll con un parametro, che potrei chiamare percent_scrolled, che indica la percentuale di Scroll effettuata dall’utente.

Ecco cosa devi fare:

In GTM > Riapri il Tag “FB – Scroll 50 – 75%” che abbiamo creato precedentemente.

Modificalo così:

  • Event Name: scroll (rimuovi quindi la variabile {{dlv – gtm.scrollThreshold}} )
  • Apri la sezione Object Properties
  • Clicca su Add property per aggiungere un nuovo parametro all’evento
  • Property Name: percent_scrolled  Property Value: {{dlv – gtm.scrollThreshold}}
  • Salva il Tag

 

Tag evento Facebook scroll con parametro percentuale scroll GTM

 

Adesso attiva la Modalità Debug di GTM e vai sul tuo sito web.

Una volta completato il caricamento, effettua prima uno scroll del 50% della pagina e poi continua fino a raggiungere quasi la fine.

Se hai fatto tutto correttamente, cliccando sull’estensione Facebook Pixel Helper dovresti vedere due eventi scroll con all’interno il parametro Custom chiamato percent_scrolled che indica la percentuale di scroll effettuata (50% e 75%)

Facebook Pixel Helper evento scroll con parametro percent_scrolled

Sei riuscito a configurare tutto nel modo giusto? Allora non ti resta che tornare in Google Tag Manager e pubblicare le modifiche cliccando sul pulsante blu “Submit“.

In questa guida abbiamo visto come configurare in maniera semplice e veloce l’evento Scroll del Pixel di Facebook utilizzando il Template Ufficiale disponibile nella Galleria dei Template di Google Tag Manager.

Sfrutta queste informazioni per aggiornare e migliorare il tracking del tuo sito web.

Il mio corso su come implementare il Pixel di Facebook con Google Tag Manager

Vuoi imparare a configurare correttamente il Pixel di Facebook e quindi a migliorare il monitoraggio delle tue campagne pubblicitarie?

Dai un’occhiata al mio corso Facebook Perfect Pixel:

Corso Facebook Perfect Pixel

A presto e Buon Tag!

Condividi anche tu Google Tag Manager!

Hai ancora qualche dubbio?
Chiedi pure qui sotto, sarò pronto a risponderti!

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

Questo sito usa Akismet per ridurre lo spam. Scopri come i tuoi dati vengono elaborati.