{"id":1576,"date":"2019-12-07T13:58:48","date_gmt":"2019-12-07T05:58:48","guid":{"rendered":"https:\/\/www.intelliwolf.com\/?p=1576"},"modified":"2019-12-08T13:15:18","modified_gmt":"2019-12-08T05:15:18","slug":"add-google-analytics-conversion-tracking-contact-form-7","status":"publish","type":"post","link":"https:\/\/wordpress-757293-2559390.cloudwaysapps.com\/add-google-analytics-conversion-tracking-contact-form-7\/","title":{"rendered":"How To Add Google Analytics Conversion Tracking To Contact Form 7"},"content":{"rendered":"\n

If you have a contact form on your website and you use Google Analytics, it's a great idea to track conversions.<\/p>\n\n\n\n

You already know how many people are contacting you, but on what page are they filling out the contact form? How did they get to that page? Did they get to your website from the search engines, paid advertising or social media?<\/p>\n\n\n\n

These insights are invaluable to a business. You can use them to improve your marketing. If you roll out a design change, you can see exactly where it improved your bottom line. You can see if a particular Facebook promotion was worthwhile doing.<\/p>\n\n\n\n

This is an example from one of my websites:<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

I use Contact Form 7 on many of my websites. It's easily the most popular contact form plugin on WordPress, with over 5,000,000 active installs.<\/p>\n\n\n\n

\"\"<\/figure><\/div>\n\n\n\n

There are other guides on how to connect Contact Form 7 with Google Analytics conversion tracking, but they all use the old deprecated on_sent_ok<\/em> code that was removed in 2018.<\/p>\n\n\n\n

You might have tried to use:<\/p>\n\n\n\n

on_sent_ok: \"ga( 'send', 'event', 'Contact Form', 'submit' );\"<\/code><\/pre>\n\n\n\n
And seen this screen:<\/p>\n\n\n\n
\"\"<\/figure><\/div>\n\n\n\n
If you try to put the on_sent_ok<\/em> code into the Additional Settings<\/em> tab, you'll get a notice that \"1 configuration error detected in this tab panel\" and \"Deprecated settings are used\".<\/p>\n\n\n\n
Let's go through the correct way to connect Contact Form 7 and Google Analytics.<\/p>\n\n\n\n
How To Add Google Analytics Conversion Tracking To Contact Form 7<\/h2>\n\n\n\n
  1. Create a New Goal<\/a> in Google Analytics<\/li>
  2. Add a JavaScript event listener<\/a>, with the parameters from the goal, to the footer of every page with the contact form.<\/li><\/ol>\n\n\n\n
    If you just want the JavaScript event listener code, it is:<\/p>\n\n\n\n
    <script type='text\/javascript'>\n  document.addEventListener('wpcf7mailsent', function(event) {\n    ga('send', 'event', 'Forms', 'submit', 'Contact Form');\n  }, false );\n<\/script><\/code><\/pre>\n\n\n\n
    Let's go through these steps in detail.<\/p>\n\n\n\n
    Create a New Goal in Google Analytics<\/h2>\n\n\n\n
    I'm assuming you already have your website setup in Google Analytics and the tracking code installed on your website.<\/p>\n\n\n\n
    Go into the Google Analytics Dashboard<\/a> and find your website if you have more than one.<\/p>\n\n\n\n
    On the bottom right corner, look for the Admin<\/em> link or just the gears icon. Click that.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    In the Admin area, click \"Goals\" in the third column.<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Click \"New Goal\".<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Select the Contact us<\/em> template, then click \"Continue\".<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Choose the Event<\/em> type and click \"Continue\".<\/p>\n\n\n\n
    \"\"<\/figure><\/div>\n\n\n\n
    Add a category and action. A label too if you like.<\/p>\n\n\n\n
    Action should be \"submit\". The category and label should be something obvious to you.<\/p>\n\n\n\n
    If you don't have any other goals setup, just do:<\/p>\n\n\n\n