Guida Base: Tracciare Plugin Contact Form 7 per WordPress con Google Tag Manager

View Comments

• Ciao Matteo,
  ho notato però che se l'utente clicca su INVIA e ha dimenticato un campo obbligatorio, il "....submitted" scatta lo stesso così come il TAG. C'è modo di non farlo scattare se il messaggio non parte?

  • Ciao Matteo,

    ho provato ad implementare la versione custom che mi avevi linkato...
    TUTTO OK

    Grazie ;)

    • Ciao Luca, grazie del feedback :)

  • Grazie Matteo per la risposta.
    Non ho avuto modo di provare la seconda opzione che mi hai linkato.
    La proverò senz'altro.

    Pare che il problema ci fosse realmente.
    Infatti avevo trovato questo post nel Supporto del plugin:
    https://wordpress.org/support/topic/contact-form-7-submit-event-and-not-success-event/

    Ora è uscita la nuova release del plugin, ovvero la 1.15, e pare che lo sviluppatore abbia corretto il funzionamento aggiungendo altri eventi specifici:
    "Added: support for all Contact Form 7 events for more granual tracking: gtm4wp.contactForm7MailSent, gtm4wp.contactForm7MailFailed, gtm4wp.contactForm7SpamDetected, gtm4wp.contactForm7InvalidInput"

    • Ciao Luca grazie del feedback :)

      A presto!

  • Mmm strano, hai provato anche con questa versione? https://www.tagmanageritalia.it/guida-avanzata-come-tracciare-linvio-contact-form-7-in-ga4-con-google-tag-manager/

    Nel caso ti direi di inserire un'altra condizione che verifichi quali altri parametri ci sono nel custom event.

    Fammi sapere!

• Da poco ho scoperto che gtm4wp.contactForm7Submitted viene generato sempre, anche quando il form viene inviato ma ha errori di compilazione.
  Non riesco a trovare valori da usare per capire se l'invio è andato a buon fine o meno.

  • Ciao Mirko,
    Il push dell'evento viene eseguito anche se l'invio non è andato a buon fine, però potresti utilizzare i valori dei parametri che vengono passati nel push per capire se il form è stato inviato o meno.
    Mi spiego meglio, in teoria il campo email è obbligatorio nell'invio di un form, potresti aggiungere una condizione all'attivatore che se la variabile dataLayer relativa al campo email non deve essere "undefined".
    E così per ogni campo che è obbligatorio per inviare il form.
    In questo modo eviti che il Tag si accenda quando i campi obbligatori sono vuoti.
    Rimane sempre il problema degli errori di compilazione ma per risolverlo dovresti abbandonare il plugin e farti eseguire un push apposito da uno sviluppatore, a meno che il form non abbia una thank you page.

    Fammi sapere! Buon Tag!

• Ciao Matteo, grazie per la guida! Ho messo in pratica quanto descritto ma ho un problema: nel mio caso in UA ho vari tipi di obiettivi, a seconda di ciò che compila l'utente. Quindi in pratica un obiettivo diverso per ciascuna ContactForm, in un caso addirittura ho un solo obiettivo che vale su almeno 10/15 contact form diverse. Come faccio a far passare la singola contact form sullo specifico obiettivo settato in UA? Attualmente se lascio le cose come da guida mi ritrovo il singolo invio di form duplicato su tutti gli obiettivi che ho creato. Credo la soluzione si trovi nell'attivatore alla voce "Questo attivatore si attiva su" >"Alcuni eventi personalizzati" ma non capisco cosa impostare... Ti ringrazio.

  • Ciao Gianpy,
    La magia sta nel push che viene eseguito quando l'utente invia il form.
    Se guardi il push completo vedrai che vengono inviati anche i campi compilati dall'utente, per ti basta prendere il valore del campo che ti interessa e utilizzarlo come condizione aggiuntiva all'attivatore di tipo evento.
    Faccio un esempio, ho un form con un campo "Tipo Cliente" che distingue le aziende dai privati.
    Mi creo una variabile dataLayer che prende il valore di quel campo e nell'attivatore aggiungo la condizione che la variabile "Tipo Cliente" deve essere uguale a "Aziende".
    In questo modo il tag scatterà solamente se l'utente è un'azienda e non un privato.
    Facendo così per tutti i campi che ti interessano puoi distinguere tutti gli eventi di invio form in base alle tue necessità.

    Fammi sapere se hai capito :)

• Ciao Matteo,
  sto provando a configurare il tracking di CF7 utilizzandola nuova versione di Google Analytics (GA4) e sto incontrando qualche difficoltà. Hai già avuto modo di configurarlo con il nuovo sistema?

  • Ciao, Mauro, in che senso trovi difficoltà? A livello di tracking ti basta usare il tag di tipo evento di GA4 e gestire lo stesso attivatore. Se ti può interessare ho fatto un corso di 3 ore sull'argomento: https://club.tagmanageritalia.it/corso-google-analytics-appweb/ inoltre a breve farò anche degli altri video :)

    Fammi sapere!

• Ciao Matteo, complimenti per la guida!
  Una volta fatto tutto, come faccio ad importarlo ad analytics? grazie mille!

  • Ciao Matteo, se hai eseguito lo step 3 allora lo stai già importando su Google Analytics come evento :)

• Ciao Matteo e se un utente sta compilando un form e non riesce a fare "Submit" come lo traccio? Esiste un evento adatto ?

  • Se intendi tracciare la gente che compila senza andare avanti, sì certo che puoi. Puoi tracciare quando l'utente inizia a compilare i campi.
    Se il submit non funziona per qualche errore, se hai fatto il tracking sui campi allora puoi subito capire questo problema :)

  • ....Matteo per intuito sono andato a verificare con l'Anteprima di GTM, andando nella sezione del DataLayer...ho digitato nel form e mi è apparso il nome dell'evento.... per esempio "gtm4wp.formElementEnter" se voglio tracciare chi sta scrivendo e "gtm4wp.formElementLeave" se stanno mettendo le spunte o selezionando un opzione.

    E' corretto l'approccio che ho utilizzato?

    • Sì, è un evento che il plugin ti mette a disposizione. Tieni presente che lo fa su qualsiasi campo di qualsiasi form, quindi se vuoi tracciare un form dedicato filtralo per lo variabili come form id o URL :)

• Ciao Matteo,
  ho bisogno del tuo cortese aiuto :) Purtroppo mi blocco al 2 step: dopo aver creato il TAG HTML personalizzato e l'attivatore "Evento personalizzato", nella console di debug e anteprima non riesco a vedere l'evento cf7mailInviata.

  Sono sicuro di aver seguito correttamente i primi due step. Cosa potrebbe essere? :(

  Grazie in anticipo per il tuo feedback.

  Gianni

  • Ciao Giovanni se fai lo step 1 vedi l'evento nel debug? Se la risposta è no significa che il plugin cozza contro qualche altro plugin o il template.

    Prova con quest'altra guida: https://www.tagmanageritalia.it/guida-avanzata-tracciare-linvio-contact-form-7-con-google-tag-manager/

    Fammi sapere!

• Ciao Matteo,
  prima di aver installato tag manager su un sito che gestisco monitoravo l'evento con questo script:

  document.addEventListener( 'wpcf7mailsent', function( event ) {
  fbq('track', 'Lead');
  gtag('event', 'Contact Form', {
  'send_to': 'UA-xxxxxxx-xx',
  'event_action': 'submit',
  'event_category':'Contact Form'
  });
  }, false );

  che avevo messo direttamente nella head.php di wordpress e tutto funzionava, adesso che sono passato a tag manager ho copiato questo script in un tag che si attiva in tutte le pagine ma su analytics non traccia più gli eventi di questi moduli, vorrei evitare di installare l'ennesimo plugin e pensavo che potesse andar bene così, secondo te c'è qualche errore che faccio? Grazie

  • Ciao Matteo,
    nella modalità Anteprima del sito non vedo purtroppo l'evento gtm4wp.contactForm7Submitted ma i seguenti eventi: gtm4wp.formElementLeave e gtm4wp.formElementEnter.

    Gianni

    • Ciao Giovanni quelli sono altri valori del plugin che trovi sotto il tag "Events" ti basta disabilitare la spunta "Form fill events (gtm4wp.formElementEnter & gtm4wp.formElementLeave)".
      Per l'evento mancato guarda con attenzione se lo step 1 è stato fatto e soprattutto se stai usando un form fatto con Contact Form 7.

      Fammi sapere!

  • Ciao Jacopo, sì stai sbagliando. Devi ragionare con il datalayer e usare GTM per attivare un tag di GA e di FB.

    document.addEventListener( 'wpcf7mailsent', function( event ) {
    dataLayer.push({'event':'wpcf7mailsent'});
    });

    In questo modo hai un evento (che ho chiamato wpcf7mailsent) dove puoi collegarti con GTM attraverso un attivatore e sparare quello che vuoi (GA, FB etc).

    Tutte queste tecniche le spiego molto bene all'interno del Club Tag Manager Italia. Le iscrizioni sono al momento chiuse ma se ti interessa ti consiglio di iscriverti alla lista di attesa: https://club.tagmanageritalia.it/lista-attesa-club-tmi/

    Buon Tag!

• Grazie mille, guida davvero ben fatta!!

  • Ciao Alessandro,
    grazie, mi fa molto piacere :)

• Innanzitutto complimenti davvero per le guide!!!
  Ho implementato il codice e funziona alla grande!!!

  Ora però avrei questi necessita: ho 2 contact form uno su home page e laltro nella pagina contatti, ho creato quindi 2 attivatori e 2 tag con regola ad esempio in home page :
  Aziona questo attivatore quando si verifica un evento e tutte queste condizioni sono vere che il page url è :
  http://miosito. it
  ma non funziona cosa potrebbe essere secondo te, oppure dovrei utilizzare qualche altro metodo?

  • Ciao Armando e grazie dei complimenti :)
    Metti come condizione Page Path e non Page URL. Fammi sapere!