fbpx
HeadJungle
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti
No Result
View All Result
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti
No Result
View All Result
HeadJungle
No Result
View All Result

Come tracciare Contact Form 7 su Google Analytics tramite Google Tag Manager

E non perdere di vista nemmeno un "submit" dei nostri form

Marco Chisari by Marco Chisari
16 Febbraio 2018
in Google Analytics, Google Tag Manager
6
Come tracciare CF7 con Google Tag Manager
0
SHARES
0
VIEWS
Share on FacebookShare on Twitter

Perchè ci occorre tracciare Contact Form 7 su WordPress tramite Google Tag Manager?

La questione nasce da un problema di fondo. Il plugin CF7 infatti non richiama una “thank you page” ad ogni submit, bensì utilizza una richiesta Ajax che fa comparire nella pagina stessa il messaggio che ci avvisa dell’avvenuto invio del form.
Questo rende più difficoltoso il tracciamento dei submit tramite GA.

Inoltre da qualche mese gli sviluppatori CF7 hanno deprecato le classiche regole di tracciamento tramite snippet di tipo on_sent_ok rendendoci ancor più difficile la vita.
In questa giungla di novità ci viene in soccorso GTM.
In questo articolo vedremo come si tracciano in GA i submit generati da CF7, tramite l’implementazione di GTM.

 

ATTENZIONE – Attivazione codice monitoraggio eventi su plugin GADWP
Se anche voi, come me, utilizzate il plugin Google Analytics Dashboard per WordPress per monitorare il vostro sito su GA, assicuratevi di aver settato “ON” tutte le opzioni di monitoraggio eventi.

 

Attivazione tracciamento eventi su GADWP

 

STEP 1- Installiamo il plugin DuracellTomi
Dopo aver installato Google Tag Manager sul nostro sito (qui spiego come si fa) procediamo con un altro requisito fondamentale per il funzionamento del tracciamento, ovvero l’installazione del plugin DuracellTomi’s.

Plugin DuracellTomi's

Una volta installato, configuriamolo in questo modo:

  • Individuiamo il plugin di DuracellTomi e clicchiamo su “Impostazioni”.
  • Clicchiamo sulla tab “Generali”.
  • Inseriamo il nostro GTM ID che troviamo in alto a destra della nostra Area Lavoro di GTM e spuntiamo la voce Custom.

Implementazione GTM su DuracellTomis plugin

  • Clicchiamo sulla tab “Integration”
  • Se Contact Form 7 è già installato e attivato, dovremmo avere la possibilità di spuntarlo. Selezioniamolo come nell’immagine:

 

Integrazione CF7 su DuracellTomis plugin

Per vedere se sta funzionando tutto correttamente consiglio di fare un check con Google Tag Assistant, l’estensione di Chrome installabile da questo Google Tag Assistant.

Questa spunta ci permetterà di includere un evento nel DataLayer dopo l’invio del form.
Infatti, se andiamo in “Modalità Anteprima” di GTM

 

Modalità anteprima GTM

e proviamo a inviare il form del nostro sito, adesso vedremo comparire un evento gtm4wp.contactForm7Submitted che prima non c’era. Nel prossimo passo andremo a creare il suo Attivatore.

 

Evento GTM

STEP 2- Creiamo l’attivatore di tipo evento personalizzato

  • Nel menu a sinistra di GTM andiamo su Attivatori > Nuovo > Configurazione Attivatore.
  • Tipo di Attivatore: Evento Personalizzato.
  • Nome Evento: “gtm4wp.contactForm7Submitted”
  • Questo attivatore si attiva su: Tutti gli eventi personalizzati
  • Nominiamo l’Attivatore. Chiamiamolo “gtm4wp.contactForm7Submitted” per comodità

Creazione attivatore GTM

 

STEP 3 – Creiamo il Tag di GA

  • Tag > Nuovo > Configurazione Tag
  • Tipo di Tag: Universal Analytics.
  • Tipo di Monitoraggio: Evento.
  • Categoria: Contact Form 7.
  • Azione: Compilazione Form Contatti.
  • Impostazioni di Google Analytics: seleziona Abilita l’Override.
  • ID Monitaggio: inseriamo qui il codice UA di Google Analytics.
  • Attivazione: seleziona l’Attivatore gtm4wp.contactForm7Submitted.
  • Nominiamo il Tag: “GA – Evento – Contact Form 7”.
  • Salviamo

Creazione attivatore GTM

Creazione attivatore GTM

 

STEP 4 – Verifica
Per verificare che tutto sia corretto andiamo in Modalità Anteprima di GTM. Tra i “Tags not fired” troveremo l’evento appena creato.
Se proviamo a compilare il form l’evento apparirà tra i “tags fired”.

 

Modalità anteprima GTM evento attivato

 

STEP 5 – Creazione obiettivo su GA
Abbiamo fatto tutto questo per poter tracciare i submit del nostro form su Google Analytics.
Ora spostiamoci su GA e dal pannello di Amministrazione > Vista > Obiettivi creiamo un nuovo obiettivo.

 

Aggiungere obiettivo su Google Analytics

  • Tipo di obiettivo: Personalizzato
  • Nome: CF7
  • Tipo: Evento
  • Categoria: form

Obiettivo in Google Analytics

Aspettiamo qualche minuto e se proviamo a compilare il nostro form, nel Real Time di GA possiamo vedere come il nostro evento venga correttamente registrato.

 

Real Time Google Analytics

 


Questo articolo ti è stato utile? E allora condividilo;)

Previous Post

Come installare Google Tag Manager su un sito WordPress in 3 step

Next Post

Come creare un sito WordPress in 5 step

Next Post
Crea un sito WP in poco tempo

Come creare un sito WordPress in 5 step

Comments 6

  1. Emanuele says:
    4 anni ago

    Grazie Marco, la guida è veramente molto chiara e semplice da seguire.
    Vorrei chiederti una cosa, nel mio sito ho diversi contact form, uno per ogni pagina prodotto, come dovrei fare per assegnare un’etichetta diversa a ciascuno (cosa che riuscivo a fare in modo abbastanza semplice col vecchio “onsent”)?

    Grazie!

    Rispondi
    • Marco Chisari says:
      4 anni ago

      Ciao Emanuele,
      puoi provare a lavorare su GTM creando un “event handler personalizzato” di tipo DOM e implementarlo sulla pagina specifica in cui si trova il form. Quindi creare un “tag” che si attivi con un trigger Universal Analytics personalizzato.
      Questa guida sembra perfetta, prova e fammi sapere!
      https://blog.strategiq.co/goal-tracking-cf7-dom-events-google-tag-manager-490f620733c1

      Altrimenti c’è sempre la cara vecchia via delle “thank you” page…

      Rispondi
  2. Fedeirco says:
    3 anni ago

    Ciao,
    vorrei chiederti come disattivare il debug GTM che mi esce fuori quando sono loggato su wordpress.
    Grazie

    Rispondi
    • Marco Chisari says:
      3 anni ago

      Ciao Federico,
      probabilmente ti basta solo disattivare il tag assistant. Eventualmente prova ad utilizzare un browser che non sia Chrome e vedi se ti capita la stessa cosa.

      Rispondi
  3. Matteo says:
    2 anni ago

    Sei un grande! Ci ho sbattuto la testa tutto il giorno e solo con la tua guida ci sono riuscito. Grazie mille 🙂

    Rispondi
    • Marco Chisari says:
      2 anni ago

      🙂 Grazie mille. Super contento di esserti stato utile.

      Rispondi

Lascia un commento Annulla risposta

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

Fai una donazione

Search

No Result
View All Result

Marco Chisari

Graphic & Web Designer / Marketer

Benvenuto sul mio blog HeadJungle, uno spin-off del mio lavoro di graphic / web designer / web marketer "ziokiz". In questo sito vorrei condividere trucchi e soluzioni per rendere più semplice la vita dei lavoratori del web.

Contattami

Consigliato

iubenda Certified
Bronze Partner

Categories

  • Finance (1)
  • Google Analytics (3)
  • Google Tag Manager (3)
  • Miscellaneous (8)
  • SEO (2)
  • Wordpress (12)
HeadJungle - Miscellaneous blog
Privacy Policy | Cookie Policy
  • Home
  • Contatti

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.

No Result
View All Result
  • Home
  • Web design
    • Risorse WordPress
  • Web Marketing
    • Google Analytics
    • SEO
  • Miscellaneous
  • Contatti

© 2022 JNews - Premium WordPress news & magazine theme by Jegtheme.