Just the other day, I was holding a lecture for some students studying web analytics here i Stockholm. I was there to talk about Google Tag Manager and after some hours I received a question we looked into.

 

How do I send a Form Submit to GTM via the Contact Form 7 plugin in WordPress?

This is actually very easy to achieve, and I’ll walk you through both ways of doing it right here. Both with a GTM Plugin in WordPress, and without.

If you are using the GTM Plugin for WordPress by DuracellTomi, there’s a nifty little feature in it that allows you to push an event into the dataLayer when a Contact Form has been submitted.

Google_Tag_Manager_for_WordPress_settings_‹_Carlbom_Foto_—_WordPress

By checking this box, the plugin itself will push events into the dataLayer when people navigate through your Contact Form and most importantly, it will send a specific event when the form has been submitted.

dataLayer value upon form submit in GTM

As you can see, when the form has actually been sent, an event named gtm4wp.contactForm7Submitted  was pushed into the dataLayer.

So far, so good. But what happens if you don’t use a plugin for Google Tag Manager but still want to track the submits?

Send formSubmit in Contact Form 7

In the settings for Contact Form 7 at the very bottom of the actual form it self there’s a little box named Additional Settings and according to the documentation it’s very straight forward to add event tracking using only Google Analytics.

There’s a hook in the plugin named on_sent_ok:  that you should use in order to tell the plugin what to do after the form has been sent, or submitted.

So, by pushing an event into the dataLayer we can achieve the exact same thing as the plugin above did. So for the sake of simplicity we are going to create an event matching the name used above and then carry on creating the actual tag and trigger in GTM based on this.

Feel free to change the name of the event to whatever pleases you, just make sure that you change accordingly during the implementation.

Enter this code into the Additional Settings box:

Basically, we’re telling the plugin that upon on_sent_ok, push the event value of gtm4wp.contactForm7Submitted into the GTM Message Queue.

dataLayer.push on CF7 in WordPress

As you can see, we’ve now sent an event into the dataLayer that we can use inside GTM.

Send event into Google Analytics when form has been submitted

Google Tag Manager Form Submit Event Step 1

 

First of all, create a New Tag and give a proper name; I went for Event – Contact Form 7 Submit. Then select Universal Analytics as always and configure the tag as follows:

  • Tag Type: Universal Analytics
  • Tracking ID: Well, your own UA ID :)
  • Track Type: Event
  • Category: Contact Form
  • Action: Sent
  • Label: {{Page Path}}

Google_Tag_Manager

 

Next, hit More under Fire On, because we wan’t to trigger this event based on something in the dataLayer itself.

Google_Tag_Manager

 

Save the Trigger and create the Tag and you are ready to take in for a test spin.

Preview the container and fill out your form.

The_Awesome_Spam_Machine___Subscribe

You should by now see that when you fill out your form, and event is pushed into the dataLayer. When that event is pushed into the dataLayer, the Trigger we set up in Google Tag Manager will fire the Tag that will send the data into Google Analytics.

And finally, we can verify it in Real-Time in Google Analytics by looking under events.

Events_-_Google_Analytics

 

Good luck, and may the Force be with you.

Tell your friends...Share on Facebook35Tweet about this on TwitterShare on Google+26Share on LinkedIn20