Call Now

Tracking Contact Form 7 Using Google Tag Manager

For Whom This Article Best Suits?

  • Company Owner
  • Digital Marketing Agency Owners
  • Brand Strategic Planners
  • Brand Marketer/Social Media Marketers
  • University Students/College Students
  • Social Media Marketer/Content Marketers
  • Anyone interested to poke his NOSE into Business Driven Digitally!!!

Learning Outcome from this write up:

  • Explore the 4 simple steps to track contact form 7 events in Google Analytics and Facebook Pixel using google tag manager
  • Create custom event event in Google Analytics
  • Set Goal in Google Analytics
  • Create Custom Event in Facebook Pixel
  • Create Custom Conversion in Facebook Pixel

Contact Form 7 is one of the highly used contact form these days due to its easy and convenient use in a WordPress driven website. Today We are going to show you the easiest steps of tracking a contact form (Driven by Contact form – 7) to get the real time statistics in Facebook Pixel Events as well as Google Analytics Events. We have installed 3 contact forms in our home page and we are going to track all these forms using Google Tag Manager. These tracking will then be forwarded to Google Analytics as well as Facebook Pixel so that we can leverage these information for further purposes.

Save 80% & Get ঝকঝকে Result

With Our Digital Marketing Consultancy Service

Save Now
Article Continues

Step 1: Auto Event Listener Tracking

Before telling about Event Listener we are going to tell you something about DOM events. DOM event are actions which occurs due to the user actions. For further learning regarding contact form 7 DOM, you are requested to visit this reference article: https://contactform7.com/dom-events/

At first we are going to add a tag which is also known as Auto Event Listener Tracking code inside Google Tag Manager. For my convenience, i have named the tag CF-7-Event-Listener . I have triggered this tag into All Pages that means whenever any pages get loaded, the tag will be fired.

For your Reference i have put raw code below.

<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
 window.dataLayer.push({
 "event" : "cf7autoeventlistener",
 "formId" : event.detail.contactFormId,
 "response" : event.detail.inputs
 })
}); 
</script>
Strategic & Data Driven

Digital Marketing Training @499 BDT

Save 97.5% Now
Article Continues

Now let’s check what is happening in the website in Google Tag Manager preview mode after adding auto event listener tag (Titled: CF-7-Event-Listener ). Let’s refresh the tag manager as well as website and you will see the following preview .

From the above screenshot we can see the tag has been fired in the page. Thumbs up!

Don’t get confused to see that there are other two tags there which has already been fired (Facebook Pixel Set Up – Initiation and Google Analytics Page View). I have written a separate article from where you will be able to see how to set up Facebook pixel and Google Analytics page view using Google Tag Manger. Please Click Here to Read the Article.

Now let’s fill all the fields of the form and press send button. Upon filling the form we will see the following screen. In the left side of the tag manager preview mode, you will see cf7submission event has been implemented.

Strategic & Data Driven

Digital Marketing Training @2999 BDT

Save 70% Today!
Article Continues

Now please click on the Data Layer Tab from the Tag Manager preview mode and you will see the following stuffs.

Let’s try to understand the above screenshot:

  • An event named “cf7submission” has been passed into data layer. Basically this name came from the name we declared during our auto event listener tag inclusion.
  • formId: 155 has been passed into data layer. As of earlier we already said that we have three forms in our home page and every form has unique id. We will see further in Google analytics and Facebook Pixel.
  • All the responses (fields) has been passed into data layer (Name, Email address and Phone No)

Step 2: Trigger and Variable Configuration

“cf7submission” is a data layer event (we have pushed into data layer) and now it can be used as a trigger. To turn this data layer event into a trigger, we have to create a custom trigger. To do this we have done the following stuffs in Google Tag Manager:

Trigger Type: Custom Event

Event Name: cf7submission

Ok, We are almost done. Since we have several forms placed in our website, would love to track another data layer variable titled “formId” (from the previous screenshot we have seen that formId is getting pushed to Data dayer). Let’s create a new variable from the Google Tag Manager.

Why we created this variable?

It will help us tracking the form individually in Google Analytics as well as Facebook Pixel.

Step 3: Google Analytics Event Tag & Goal Set Up

Since we wanted to measure the event with Google Analytics, we have to create a tag in Google Tag Manger for This.

Free Training

on Strategic & Data Driven Facebook Marketing

Enroll Now for FREE
Article Continues

Tag Type: Google Analytics : Universal Analytics

Track Type: We are going to track event and for this reason i have selected Event as track type.

Category: We have to declare a name which will be shown in Google Analytics.

Action: Since we want to track the form individually, we want to track the form id. Can you remember that we have already declared a data layer variable named “Dlv – FormID” i have put it here.

We are DONE!

Now, Let’s refresh the Google Tag Manager Button and and go to preview mode and refresh the website again. Upon filling the form and pressing send button, you will see the tag named : “GA – Event -Form Submission” has been fired and upon clicking the tag you will see the following view.

From the above screenshot, we see that the category and action has been executed.

Step 4: Facebook Custom Event & Custom Conversion Implementation in Facebook Pixel

We want to track the contact form submission event through Facebook pixel. We are declaring a new tag for this titled: FB-Event-Form-Submission.

We want to track the following stuffs:

  • Whether the form is submitted?
  • From which contact form id, the form is getting submitted

N.B: Facebook has by default various event tag (e.g. Contact, leads) and for this case i have used a different one titled “FormSubmit”. Moreover we want to track the form id from the event which is why i am taking another data of form id. For your reference i have put the exact code here that i used in my case.

<script>
  fbq('track', 'FormSubmit',{
  formId:'{{dlv-formID}}'});
</script>

Now refresh your google tag manager and open your facebook pixel test event tab. If you submit a form by filling all the fields required, you will see that facebook pixel is receiving activity. I have shared the screenshot here.

From this custom event you can create Custom Conversion. I have written down another article from where you will come to know about the custom conversion campaign.

Common Mistakes I have Done to Implement This (You Might Do the Same Nonsense Stuff Like ME!!:

  • Without refreshing tag manager i tried to test it in web page
  • Without submitting the tag i tried to track event through google analytics. So please make sure to submit it through tag manager before testing it into Google Analytics.

For your better understanding i am adding a short video without voice so that you can better understand the process and execute this into your

Tags: , ,

Popular Blog

1 comment on “ Tracking Contact Form 7 Using Google Tag Manager

Leave a Comments

0
0 item
My Cart
Empty Cart