How to track WordPress Contact Form 7 submission with Google Tag Manager

In this basic guide I will not only explain how to track who submits the contact form, but also how to capture values for each form field with JavaScript.


STEP 1 - CREATE CUSTOM HTML TAG


To be able to track form submission by the user, the first thing you need to do is to send a piece of code waiting to fill out the form, and then insert the right data in the Data Layer.


The logic is this. Contact Form 7 has a series of events that send directly to your browser. All you need to do is just capture one of these events, which is the sent email address.


Here are the steps:


  1. Enter the container> Tag Section> New.

  2. Tag type: custom HTML.

  3. Paste this snippet:

<Script>

document.addEventListener ( 'wpcf7mailsent', function ( event ) {

 window.dataLayer.push ({

 "event": "cf7mailsent",

 "cf7FormId": event.detail.contactFormId,

 "cf7Fields": event.detail.inputs

 })

});

</Script>


4. Add the trigger: All Pages.

5. Save the Tag with the name: "Contact Form 7 Listener".



Contact form 7 Tag

This script will not only insert cf7sentmail event inside the Data Layer, but it will push the data to the form (the id, the values ​​of the fields entered by the user, etc.).


STEP 2 - CREATE THE TRIGGER


The second step is very easy: you have pushed in the Data Layer the event cf7sentmail, you just track it through a custom event type Trigger. This way you can send to Google Analytics (or whoever you like) the data collected.


Here's what you need to do:


  1. Trigger section> New.

  2. Trigger Type: Custom Event.

  3. Event name: cf7mail Sent.

  4. Save the Trigger with the name: "cf7sentmail"

  5. This trigger fires on: All Custom Events



STEP 3 - CREATE VARIABLES


Let's verify now. If you've done everything right so far, filling out the form and activating the Debug and Preview, you should see the "cf7sentmail" event.

If you go to the "Data Layer" tab, you can see how in this event it is populated with data.


{

event: 'cf7emailsent',

cf7formId: '231',

cf7Fields: [

{name: 'your-name', value: 'Luca'},

{email: 'your-email, value: 'hello@test.com'},

{name: 'your-subject', value: 'Hello'},

]

gtm.uniqueEventId: 298

}


Well, now I show you how to take the values ​​of the Form Id and the email subject.

However, remember that it is not possible to track the user's sensitive data (email, name, etc.) due to Google Analytics PII (Personally Identifiable Information) and you need to monitor any values you’re collecting.


How are these Variables created? Here's how it's done:


  • Variables Section> User Defined Variables> New.

  • Variable Type: Data layer variable.

  • Data level variable name: cf7FormId.

  • Save with the name: "CF7 - Form ID".


cf7FormId
  • Variables Section> User Defined Variables> New.

  • Variable Type: Data layer variable.

  • Data level variable name: cf7Values.2.value.

  • Save with the name: "CF7 - Subject Email".

  • Oh, wait. Why "cf7Values.2.value"?

Because the Data Layer is a JavaScript array and, as you saw from the first image of step 3, in cf7 Fields depend on the "name" and "value" keys.


cf7Fields:

[


{name: 'your-name', value: 'Luca'}, // position 0


{name: 'your-email', value: 'Hello@test.com'}, // position 1


{name: 'your-subject', value: 'Hello'}, // position 2


]


Each line has its position, which starts at 0. Consequently, since you are interested in taking the subject of the email, the position in this case is exactly 2.




STEP 4 - CREATE THE EVENT TAG

Now you just have to send all the data collected to Google Analytics, with an event. So you just need to create an event that is triggered when a user completes the contact form.


Follow these steps:


  • Tag Section> New.

  • Tag Type: Universal Analytics.

  • Category: Contact Form 7.

  • Action: Form ID: {{CF7 - Form ID}}.

  • Label: Email Subject: {{CF7 - Email Object}}.

Now within the Google Analytics Settings, you can enter the Analytics Settings Variable.


Add the Trigger: "cf7sentmail".

Save with the name: "GA - Event - Contact Form 7".





STEP 5 - CHECK THE IMPLEMENTATION


Now try to fill out the form, if everything went according to our plans, you should see the tag firing in Debug and Preview!


When you see the tag firing, go back to Google Tag Manager and click "Submit".

© 2020 by Luca Tagliaferro. All rights reserved.