Guida Base: Implementare Aggiungi al Carrello nel Pixel di Facebook con Google Tag Manager

[Aggiornata il 22 Febbraio 2019]

Dopo aver capito come si implementa il Pixel di Monitoraggio di Facebook con Google Tag Manager e come tracciare la transazione con il pixel di Facebook da Tag Manager, adesso vorresti implementare l’aggiunta al carrello.

“Ok, sarà simile alla transazione, no?“.

No, è ancora più semplice. Ora te lo spiego.

Partiamo dalla solita premessa (lo ripeto, che male non fa): Facebook ha una gestione di tracking abbastanza semplice da implementare e ben spiegata in questa pagina ufficiale: https://www.facebook.com/business/help/402791146561655?helpref=page_content

Come vedi ogni azione ha un particolare codice (una funzione JavaScript) che inizia sempre con:

fbq('track', qualcosa, qualcosa, ...)

I parametri possono essere statici o dinamici, come ad esempio il Purchase. Vediamo come implementare l’addToCart con Google Tag Manager.

STEP 1 – Crea un attivatore per l’aggiunta al carrello

Dunque, la prima cosa che consiglio di fare è creare un evento che “catturi” l’azione di aggiunta al carrello. Detta in modo banale individuiamo il click al pulsante “Aggiungi al carrello” o “Add to Cart”.

Come possiamo fare? La risposta è semplice, ovvero individuando un CSS o un ID che riesca ad individuare il click a quell’elemento. Se magari avete già incorporato un plugin per l’ecommerce avanzato di Google Analytics allora forse avrete anche un evento personalizzato.

Ok, vi faccio un esempio. Qui sotto è riportato il codice HTML di un pulsante di aggiunta al carrello. Notate niente di particolare?

<a rel="nofollow" href="/esempio/?add-to-cart=37" data-quantity="1" data-product_id="37" data-product_sku="" 
class="button product_type_simple add_to_cart_button ajax_add_to_cart">
Acquista
</a>

Sì, esattamente! La classe CSS add_to_cart_button. La useremo per far attivare l’Attivatore 🙂

Ecco come:

• Attivatore > Nuovo > Configurazione attivatore.
• Tipo Attivatore: Click solo link.
• Flagga Attendi Tag e inserisci 2000 millisecondi.
• Flagga anche Verifica Convalida.
• Abilita questo attivatore quando: PagePath corrisponde espressione regolare .*
• Questo attivatore si attiva su: Alcuni link sui click.
• Aziona l’attivatore quando: Click Classes contiene add_to_cart_button.
• Adesso rinomina l’Attivatore “AddToCart”.

 

Page Path e Click Classes sono Variabili Integrate.
Se non le trovi vuol dire che devi ancora attivarle: qua c’è la guida su Come attivare le Variabili Integrate in Google Tag Manager.

Step 2 – Creiamo il Tag HTML Personalizzato con il Pixel di Facebook

Non ci resta che creare il custom tag HTML con il Pixel di Facebook

Incolliamo il pixel di facebook di monitoraggio e aggiungiamo prima della chiusura dello script la chiamata all’AddToCart.

fbq('track', 'AddToCart');

Una volta creato il Tag non ci resta che associarlo all’Attivatore. Quale attivatore? Naturalmente a quello che abbiamo creato qualche istante fa 🙂

Nota bene

Se hai già il PageView attivato non serve inserire tutto lo script, ma ti basterà inserire:

fbq('track', 'AddToCart');

Step 3 – Verifichiamo che tutto funzioni con il debug

Attiviamo il Debug e Preview, andiamo in una pagina dove è presente il link di aggiungi al carrello e clicchiamo. Verifichiamo quindi che il Tag si attivi. Alla fine, se tutto funziona correttamente, pubblica le modifiche cliccando il pulsante blu “Invia”.

Come sempre potete usare anche l’estensione di Chrome Pixel Helper per verificare effettivamente il valore.

 

Yuppieee!

Ora non potrai più dire di non riuscire a tracciare il carrello tramite il pixel di Facebook con Google Tag Manager!

Ti è stata utile la guida? Lasciami un feedback (ed iscriviti alla newsletter, mi raccomando!).

A presto e buon Tag!