How to Fire Facebook Pixel Events Using Contact Form 7 and Google Tag Manager

You have this great conversion campaign thru Facebook, but the form on your WordPress website is Contact Form 7, which doesn’t forward to a “Thank You” Page. Because of this, custom conversions (leads, add to cart, etc) aren’t able to be tracked.

One of the most popular forms to use on WordPress is Contact Form 7, an AJAX submission form, which doesn’t refresh, making tracking your Facebook Campaigns even more difficult.

In this tutorial, I will show you how to use Facebook Conversion Pixel (Page View, Lead, submission button) with Google Tag Manager then set up Google Tag Manager to capture Facebook Leads then send it back to Facebook for tracking.

We ran into this issue with a client of ours WITH NO DOCUMENTATION ANYWHERE on how to solve this problem, not even Stack Overflow. Through using some basic Google Tag Manager concepts, we were able to clearly set up Facebook Lead Tracking on Contact Form 7 using Google Tag Manager.

What You Need To Know Before Beginning:

  • Contact Form 7  Plugin uses AJAX-based Forms which means the page doesn’t refresh after the successful submission
  • Facebook Base Pixel is different than a separate conversion pixel.
  • If you have a “Thank You” page or have set up custom conversions using a URL, then this guide may not be for you.
  • Setting up Google Analytics Events is a similar process
  • You should already have the Facebook Base Pixel (Page View) Installed in Google Tag Manager. If you don’t know how to do this, Facebook will actually set it up for you on the Pixel Dashboard of Ads Manager

Tool and Items You Will Need:

    • Facebook Pixel Helper (Download this very helpful extension when troubleshooting)
    • Facebook Conversion Pixel (Lead, Submission, Addtocart, etc)
    • Google Tag Manager
    • Access To Your Website
Install Facebook Pixel

What are Contact Form 7 DOM Events?

 

That are DOM events? DOM (Document Object Model) events allow event-driven programming languages like JavaScript, JScript, ECMAScript, VBScript and Java to register various events or listeners such as in HTML, XHTML, XUL and SVG documents. In layman’s terms, it documents actions coming from various programming languages. Contact Form 7 uses DOM events to document the actions of the form. See the DOM events below:

  • 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.

Step 1:  Add Contact Form 7 Event Tracking:

 

It begins with a piece of code that will listen for a form submission coming from your website. This code is known as an auto-event listener. The listener (installed through Google Tag Manager) will be waiting for wpcf7mailsent DOM event and if one occurs, it will push the data from the form submission to a data layer (form id, information from the form)

<script>

document.addEventListener( ‘wpcf7mailsent’, function( event ) {

window.dataLayer.push({

“event” : “cf7submission”,

“formId” : event.detail.contactFormId,

“response” : event.detail.inputs

})

});

</script>

<p”>To install this code on your website, go to your Google Tag Manager account and create a “Custom HTML Tag” which fires on the page that the form exists on.</p”>

cf listener code

Step 2: Test The Listener

 

Before adding the necessary trigger and 2 new user-based variables, you will need to test that the listener is, indeed firing, on all page views. Inside of GTM, enable Preview and Debug mode. This will cause an Orange bar to appear.

Google Tag Manager

Go back to your landing page and refresh the page. You should see a debugging console at the bottom of your screen where you can see which tags have and haven’t fired. If everything has worked correctly, you should see cf7Submission tag

GTM Preview Mode

Submit a test form on your landing page. After successful submission, click on cf7submission event then click on Data Layer

gtm data layer

This will show the information on your contact form that has pushed over to the data layer. This information is very important as we will tie it conversion tracking process.

Step 3: Turn cf7submission data layer event into a trigger

 

Why do we need to turn it into a trigger? Because it will trigger the Facebook Conversion Tag when the form fires.

  • Click on Triggers
  • Click Add New
  • Click Data Layer Event
  • Name the Form – Form Fill Out
  • Trigger Type: Custom Event
  • Event Name: cf7submission

If you have a specific landing page that you want this the trigger to fire on, click “Some Events” and fill in the appropriate information

Custom events GTM

So what did we just do? We turned the data layer event that was triggered by the form submission, into a trigger for the Facebook Conversion Tag we will create at the end.

Step 4: Create Facebook Conversion Pixel Tag

 

Before we start testing, we will add the Facebook Conversion Pixel. Here, I used the standard “Lead” code given to us in the Pixel Dashboard

From here, we will create a Custom HTML Tag, copy and paste the code in there, then set the “Form Submission” trigger we created in Step 3, as the trigger. Hit “SAVE” and now onto testing.

One Last Thing Before Testing: Checklist

 

Before testing, let’s make sure you have done everything

  • Facebook Base Pixel Installed on the Website (Through Google Tag Manager)
    Tested to make sure the cf7 Listener Tag is firing.
  • Looked inside cf7Submission DOM event to see if information is passing through. If it isn’t, refer to our friends over at analyticsmania.com.
  • Created “Custom Event” Form Submission Trigger from cf7submission event. If you want it to only be triggered on your landing page, make sure it’s referenced inside of the trigger.
  • Created Facebook Conversion Pixel Tag in Google Tag Manager

Did you complete all of these? then let’s go to testing:

First, install Facebook Pixel Helper Chrome Extension. This will help you diagnose if the correct Pixel is firing

facebook pixel event

Next, make sure your Google Tag Manager is in Preview and Debug Mode. Next, go ahead and submit a test form. If everything is set up correctly, this is what you should see

If the pixel is firing on the page, that’s good! Now we need confirmation from Facebook that the pixel is reading. Next, click on your Facebook Pixel Helper Tool. 

facebook pixel

It will show you which pixels have fired. If you see the “Pageview” and (in this example, the LEAD pixel) then we have double confirmation that the pixel is working!

If it’s not, please review all the steps above to debug. Make sure your Facebook Pixel is set up correctly and make sure the event tag is set up correctly.

Finally! You’ve done it!

You’ve set up Contact Form 7 on your Landing Page to record custom events with Facebook Ads! You can now accurately track all of your events and get an ROI for your Facebook events.

Leave a Reply: