Header

How to Track WordPress Contact Form 7 (CF7) form submission with Google Tag Manager (GTM)

Now that 'on_sent_ok' and 'on_submit' have officially been removed from ContactForm7 (CF7), you need an alternate way to track when WordPress forms are submitted.

From a marketing point-of-view, submitted forms are key events and here's how to use Google Tag Manager (GTM) to track submitted forms as events and goals in Google Analytics (GA).

The following assumes that you have GTM active on your WordPress site, your CF7 form is working, and that you have connected GTM to your GA account.

 (1) In GTM, go to Tags > New

Create a custom HTML tag with the following javascript, and set the tag to fire on every page.

Title your tag whatever you like, I've used 'CF7-FormSubmit-Listener' and here's what it will look like in GTM

listener-for-cf7-form-submit.png

 

(2) From WordPress, get the ID of your Contact Form 7 form.

You can find this in the form's shortcode, in this example the ID we want is '246'

contactform7-track-submit.png

 

(3) Create a trigger in GTM which fires when the form is submitted.

In GTM

  • go to Triggers > New
  • give it a descriptive title (in this example I've used 'CF7-ContactForm-Submitted'
  • trigger type is custom event
  • event name must be exactly 'form_submitted_' plus the form ID from step 2. In this example the final event name is 'form_submitted_246'
  • set the trigger to fire on all custom events.

The finished trigger in GTM is shown below.

cf7-trigger-when-form-submitted.png 

 

(4) Create a tag in GTM which links the submitted form event to your Google Analytics (GA) tracking

In GTM:

  • go to Tags > New
  • give your tag a descriptive title, in this case I've use 'GA-ContactForm-Submitted'
  • tag type is 'Universal Analytics'
  • track type is 'Event'
  • manually enter your own descriptions for category, action and label. Make a note of the label you chose, you'll need that in step(6) if you want to create a goal which converts when the form is submitted
  • in the Google Analytics setting, add your GA tracking ID
  • set this tag to fire when the submitted when the trigger from step (3) fires

The completed GTM tag is shown below.

ga-gtm-cf7-form-submitted.png

 

(5) Check the Results in Google Analytics

If you go to the Real-Time Reports in GA and submit the form, you should see that the event is registered. If not, debug by putting GTM in preview mode, return to the WordPress page which has the form, and check which tags are being loaded and fired.

 

(6) Create a Goal linked to the submitted form

You may wish to go one step further and create a goal which converts everytime the form is submitted. To do this:

  • go to GA > Account > Property > View > Goals > New Goal
  • under Goal Setup choose 'Custom'
  • under Goal Description name your goal and choose type of 'Event'
  • under Goal Details, the label must be exactly what you specified as the label in step (4), you don't necessarily have to set any other event conditions.

If you've only just configured the firing of this event in GTM, don't be surprised if 'Verify this Goal' shows that this goal hasn't converted yet.

Here's what my finished goal looked like in GA

ga-goal-cf7-form-submit-2.png

 

That's it, good luck.

 


  Need help configuring event and form tracking with your WordPress site?
Contact us, we'll be happy to help!

Test Internet Explorer and…

Cross-browser testing on Mac OSX: Emulate Internet Explorer, Android and Window phones…

Configure MX for a subdomain…

How to Configure MX records for a subdomain on ProtonMail If you are configuring a…

Joomla error "1030 - Got…

Joomla error "1030 - Got error 28 from storage engine" If you get this Joomla 1030 error…

Sublime shortcut to wrap…

Sublime shortcut to wrap selected text in a tag This is a super-useful Sublime shortcut…

How to enable GA enhanced…

How to enable GA enhanced link attribution in GTM Enabling enhanced link attribution in…

Optimising images and…

Optimising images and reducing file sizes It's sometimes difficult to create fast loading…

How to fix microdata or…

How to fix microdata or structured data errors in Joomla Microdata or Structured Data was…

Joomla error 500 - Unable to…

Joomla error 500 - Unable to load renderer class If you get a Joomla error 500 - Unable…

Using system font stack for a…

Using system font stack for a website This is an interesting idea that I'm seeing more…

How to open winmail.dat files…

How to open winmail.dat files on Mac OSX If you are on Mac OSX, you may occasionally…

CSS wildcard selectors with…

How to use wildcard CSS selectors with LESS If you are using LESS and need to use a…

How to fix a missing Admin…

How to fix a missing Admin Toolbar at the top of a WordPress page Working on an a…

How to add a CiviCRM…

How to add a CiviCRM extension to Joomla As you probably know, CiviCRM comes bundled with…

How to configure MailGun and…

How to configure MailGun and Google Business Apps in CiviCRM When configuring SMTP mail…

Warning JUser: :_load:…

Joomla Warning JUser: :_load: Unable to load user with ID: 62 If you see a Joomla warning…

How to prevent duplicate URLs…

How to prevent duplicate URLs with sh404SEF If you use sh404SEF and can't solve problems…

What is the 'Itemid' in a…

What is the 'Itemid' in a Joomla URL? If you examine the non-SEF url of a typical page on…

JLIB_APPLICATION_ERROR_COMPONE…

After upgrading from Joomla 3.5 to Joomla 3.6.0 I suddenly got a…

How to Launch Sublime Text…

How to Launch Sublime Text from Terminal or iTerm in OSX I've been working a lot with…

Customise a Joomla template…

How to customise a Joomla template based on article ID Working on a custom Joomla…

2013 - The Year of Responsive…

2013 -The Year of Responsive Web Design Some trends come and go. Others gather momentum…