Browse By

How To Use Contact Form 7 DOM Events With Google Analytics Goals

I have been using Contact Form 7 for years and it really is a great plugin, I wrote a contact form 7 getting started guide if you are new to it. When I logged into WordPress to change some text on the form fields I noticed a configuration error in the Additional Fields column in CF7.


When you click on the link you are taken to an announcement that tells you on_sent_ok is Deprecated and that you have  to use the new DOM events.

Using DOM Events For Google Analytics Events and Goals

In order to keep tracking all contact form 7 submissions in Google Analytics you have to use the wpcf7submit DOM event. With a little piece of JavaScript you will be back up and running.

Get a JavaScript Inserting Plugin

Download the Header and Footer Scripts plugin if you do not already have a scripts inserter or install one through the WordPress dashboard.

We may earn a small commision at no extra cost to you if you sign up.

When sending events to google analytics you need to use the same variables you used in the Additional Settings tab in CF7 which looked something like this:

on_sent_ok: "ga('send', 'event', 'eventCategory', 'eventAction', 'eventLabel');"

You need the line of code inside the quotation marks without the deprecated on_sent_ok.

Insert New DOM Event Code

Insert this code before the closing </body> tag.

<script type="text/javascript">
 var wpcf7Elm = document.querySelector( '.wpcf7' );
 
wpcf7Elm.addEventListener( 'wpcf7submit', function( event ) {
 ga('send','event','eventCategory','eventAction','eventLabel');

}, false );
</script>

You should change the eventCategory, eventAction and eventLabel to values that work for you.

Please Note: you can use any of the other DOM Events in place of wpcf7submit. Here is a list of what you can use and their meanings:

  • wpcf7invalid — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because there are fields with invalid input.
  • wpcf7spam — Fires when an Ajax form submission has completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
  • wpcf7mailsent — Fires when an Ajax form submission has completed successfully, and mail has been sent.
  • wpcf7mailfailed — Fires when an Ajax form submission has completed successfully, but it has failed in sending mail.
  • wpcf7submit — Fires when an Ajax form submission has completed successfully, regardless of other incidents.
Setup Your Goal In Google Analytics – I have written a quick guide on how to do this here.

Contact Form 7 TemplateWhy You Should Be Tracking Contact Form Submissions In Google Analytics

Tracking contact form submissions in Google Analytics is one of the best ways of identifying which sources of traffic are netting you the most enquiries or leads. Along with tracking conversions you should be tracking email link clicks on your pages and monitoring how your pages are performing in terms of speed to increase website conversions.

The solution outlined above will keep Contact Form 7 working smoothly and firing events to Google Analytics.

You may also like

Leave a Reply

Your email address will not be published. Required fields are marked *