Measure Contact Form 7 conversions with Google Tag Manager

The Contact Form 7 plugin is the most popular plugin in WordPress, allowing us to easily add contact and other forms to the web. If we want to set up conversion tracking so that we can track the performance of individual forms in Google Analytics , we have two options.

1. Set up conversion tracking within your site code.
2. Set up conversion tracking through Google Tag Manager.

In the first case, of course, we need access to the source code of the site, but it can be a more user-friendly method for coders and programmers who want to have everything under control.

In the second case, we can do everything without any intervention in the source code and without the help of developers. All we need to do is have Google Tag Manager implemented and verify, that it is actually a form created using the Contact Form 7 plugin .

1. Track the event of sending a Contact Form 7 form

Contact Form 7 uses the Ajax method (form submission without redirection to another page) to process the form, so we can’t set up conversion tracking to the URL of the page thanking you for submitting the form.

Some marketers make the mistake of setting the form conversion tracking as the number of clicks on the Submit button. However, this approach is wrong for several reasons. Firstly, you also measure the submission of a form that ends in an error, but mainly you do not measure the submission of a form that the user confirms, for example, using the keyboard, etc.

For these reasons, we need to use the tracking of javascript events that the Contact Form 7 plugin offers us.

Javascript events Contact Form 7

• wpcf7invalid – Called when the user submitted the form but the email was not submitted due to incorrectly filled out fields (e.g. bad email format).
• wpcf7spam – Called when a form was submitted but the message was detected as potential spam and was not sent.
• wpcf7mailfailed – Called on that the user submitted the form, but for example due to technical issues, the message was not sent.
• wpcf7submit – Called each time an attempt is made to submit a form, regardless of other events.
• wpcf7mailsent – Called when the user submitted the form and the message was successfully submitted without any errors.

The last mentioned event wpcf7mailsent is the one we need and we will use it to transfer data to Google Tag Manager.

2. Create a tag to pass data to Google Tag Manager

We will move to the service for our site within your Google Tag Manager account. We’ll be the first to create a new tag here to track calls to the wpcf7mailsent event.

1. Create a new tag (Tags> New) and name it, for example, listener – wpcf7mailsent (to make it clear that it is a tag eavesdropping on the wpcf7mailsent event).
2. Select Custom HTML as the Tag Type and insert the HTML code below into the code.
3. The startup rule is to select All Pages, page view. As a result, the brand will run on all pages of the site.
   If you want to address better optimization, you can choose specific pages where the brand will run. It is only necessary to think about it in the future. If the form is added to other pages, the measurement will not work here.

Thanks to this tag, data will be passed to us from the web when you submit the form to our GTM , where we can continue working with them. Specifically, we pass the ID of the submitted form within the variable formId and in the variable response we have all the data filled in by the user. In this case, we won’t use the values from the fields in the form, but sometimes they can be useful.

It’s also important to set up a cf7mailsent event, to which we’ll continue to respond within GTM.

3. Form Submission Trigger

In order for us to continue to respond to a form submission event within our GTM container, we need to create a new trigger rule .

1. We’ll create a new launch rule – Rules > New . For example, name the rule CF7 MailSent .
2. Select Custom Event for the rule type .
3. Set the event name to cf7mailsent , which corresponds to the event name we have set under the previous listener tag – wpcf7mailsent.

4. Definition of variables for ID and form name

In order to take over the data submitted to GTM and work with it, we need to define new container variables, especially for the form ID, which we will then send to Google Analytics and take into account according to him, the number of submissions of our form.

1. In the GTM container, go to Variables > New . We will name the variable cf7 – formId .
2. Select Data layer variable as the variable type .
3. < strong> Set the name of the data layer variable to formId and save it.

We can now use the created variable cf7 – formId directly and send its value to Google Analytics.

Search table for form name

Sometimes we may want to submit a form name to GA instead of a form ID. We can do this by creating a new variable to define the form name.

1. Let’s name the variable cf7 – formName .
2. Choose Lookup Table as the variable type .
3. Select the input variable cf7 – formId , which we defined in the previous step.
4. We’ll define the lookup table by the ID of our forms, so we need find ID for all our forms .
5. Set the default value to cf7 – formId . This will send the ID of the form instead of the name of the form if it is not found in the table (e.g. a newly created form).

Variable for Google Analytics measurement ID

If you haven’t already created a variable that contains the Google Analytics tracking code ID > , I recommend defining it. You can use this variable for other purposes within GTM and you do not always have to enter the ID of the tracking code. Thanks to the variable, we have everything in one place.

5. Submit a form submission event to Google Analytics

The last thing we need to set up within Google Tag Manager is submit an event to Google Analytics .

1. We’ll create a new tag, such as Contact Form 7 Submit .
2. Brand Type and select Google Analytics: Universal Analytics .
3. Measurement type select Event.
4. Event measurement parameters , which will be sent to Google Analytics, we can set it according to your needs, in my case it is: Categories – form Actions – send Label – the variable cf7 – formId or cf7 – formName we created in the previous step. However, I recommend using cf7 – formId and setting the name only within the Google Analytics conversion settings.
5. To Google Analytics Settings select our variable with the Google Analytics measurement ID.
6. Select CF7 MailSent as the trigger rule.

Now we can save everything, publish a new version of the container settings within Google Tag Manager, the measurement will start and our event of sending the Contact Form 7 will be sent to Google Analytics.

6. Google Analytics conversion tracking settings

We now send a new event to Google Analytics each time we submit a Contact Form 7 form, from which we can read the number of submissions, but it’s still a good idea to set up conversion tracking , which can then be better linked to marketing campaigns, etc.

1. In Google Analytics, we will move to Admin > Goals .
2. Click New Goal here to create it.
3. Goal Settings and select Custom .
4. Destination description :
   • Name can be chosen at will, such as Submit form .
   • Type select Event.
5. In Destination details < set the event conditions to match what we set up in the previous step: Category – Equal to form Action – Equals – send Label – Equals – If we want to measure the submission event of a particular form, fill in the Form ID or its name (based on what we set as a label in the previous step). If we want to measure the submission of any form in the conversion, we can leave it blank.
6. We’ll save everything and we’re done.

We can now in Conversions > Goals > Report Track form submissions over a period of time.