April 7, 2020
How to Track Contact Form 7 with Google Tag Manager

How to Track Contact Form 7 with Google Tag Manager


In this video, I’m going to show you how you
can connect a Contact Form 7 to Google Tag Manager so you can successfully track a form
submission and forward this on to your facebook Pixel, Google Analytics, or Google Ads. All and more, coming up. Hey there and welcome back to another video
of measureschool.com teaching you the data-driven way of digital marketing. My name is Julian. And on this channel, we do marketing tech
tips, tutorials, and tips and tricks just like this one. So if you haven’t yet, consider subscribing. Today, I want to talk about how you can connect
a Contact Form 7 to Google Tag Manager. And then we can track our form submissions,
and also the different form fields that go into that and forward this all on to our Facebook
Pixel to Google Analytics or to Google Ads. Now, we got lots to cover so let’s dive in. So here we have a contact form 7 on our demo
shop here. And this is a standard contact form 7 that
I’ve installed onto this WordPress blog. So if you do the same, it would look maybe
something like this. Or completely different depending on how you
set up your form. And this is a standard form. So you can fill it out here with some test
data and send it off. I have a field here, what are you interested
in, this will become important later. Let’s send this off. And we get our little message down here that
this message was received and sent on. Now, this is where a lot of form tracking
methods trip up because it actually doesn’t redirect the user on to a thank you page. But just gives us this message down here,
especially for contact form 7. There’s actually something that the plugin
does by itself. And this is in mid DOM events. What our DOM events? These are events that are emitted in the JavaScript
runtime environment. So there are events emitted such as the WP
CF 7 invalid if the AJAX form completion has not been completed successfully. And some other events. What we’re interested in is the submitted
event that actually fires when the form submission has completed successfully. And in order to listen to such events, we
need a little bit of JavaScript. They describe this down here. Now, we can try this all out by just copying
these lines of code, going over to our Contact Form seven, opening up the developer tools,
which you can do on the more tools. And here are the developer tools. And then when we go to the console, it will
give us access to the JavaScript runtime environment. And here, we can enter our code. And when the event is submitted, we’ll be
able to fire something called alert fire. You will see in a second, but this is all
about, I will enter another line of code, the console log to see what event details are transferred over
into JavaScript that’s presented here. And this is now listening for the event. So let’s go ahead and send off another contact
form submit and send this off. And here we now see the alert. So this is already working. This is a JavaScript alert fire, OK. And now, it should also have push something
into the console here. And here, we see a custom event was fired. And we have all kinds of event details. I want to show you that we actually have data
about the contact form itself in this detail object here. And we have data about the contact form ID,
so the ID that our Contact Form holds. And then also about the input fields and how
they were filled out. So we have information about the name, we
have information about the subject. And also information about this last point
here, what the user has filled out, what are you interested in product. And that can be found here as well. This is really useful because we can pull
this all into Google Tag Manager later on if we choose it. So just with this little JavaScript here,
we can do already a lot. And in order to make this work with Google
Tag Manager, we just need to install this little JavaScript inside of a listener functionality. I have already prepared this here, here’s
a contact form 7 event listener. And I will have this code that I’ve written
here, linked up down below. And here, we can see that this is the same code more
or less, we are listening to the form Submit. And then we actually pushing something into
the data layer. And this is how we communicate with Google
Tag Manager. So from JavaScript to Google Tag Manager,
we push data into the data layer in order for us to be able to get the form ID, but
also the field inputs into the data layer, and then fill our tags later on. Now, this part just listens to the contact
form and pushes data into the data layer if the right event happens. So we can deploy this on all pages, no problem. Or you could also narrow this down to only
the pages where you have a contact form installed. So let’s try this out. Let’s go into our preview and debug mode. And let’s go over to our Contact Form reload
that. Let’s close the developer tools here. And we get all familiar Google Tag Manager
debug console. And we have our event listener deployed. Now let’s go ahead and fill out a test again, send this off. And you might have seen in the debug console
that we now have a form submit right here in our Google Tag Manager debug console. When we click on that, we can actually look
at the data layer and see what information has been transferred. And we have the event, form submit, we have
our form ID, and we have our different fields that were submitted as well. So this is really useful if you want to pull
out and put this into a tag. Now, how do you build a tag deployment out
of this? Since this pushes data into the data layer,
we first of all would need to build a trigger of that every time a form submit happens in
the data layer. So let’s go ahead in Google Tag Manager and
go into our triggers, and then build a custom trigger for our form
submit. We’ll choose our custom event, as the event
is custom to our data layer. And we’ll put in our form Submit. And that’s already it, we can now click on
Save, and have built a trigger based on the successful form Submit. Now let’s build some variables. Because we want to pull out some data here,
for example, the form ID or the fields menu 597 with the product name here with the interest
of the user, what are you interested in. So we can use that in our tag deployment as
well. Let’s go over to Google Tag Manager and build
new variables. And these are data layer variables. So a data layer variable for our form ID,
and we simply need to use data layer variable here and right, the right key in here, in
this case, it would be form ID, all right. And let’s also build a data layer variable
for our interest here. And in this case, it’s a bit tricky because
we need to actually get into this fields array, and then choose the right number here, in
order to pull out the right value in our case would be 012345 starts at zero. So the last number of this array is the number
five. And then we want to get to the value of this
data layer of this object. So we’ll get to product. Let’s try this out. First of all, we want to get fields, and then
a dot, the number five and the value. Let’s save this and refresh, just so we can
see how everything is filled. Let’s try this out. And this time, I’m going to use service here. Let’s send this off. We get our form submit in the data layer. And in the variables we should now see our
dlv form interest is service. So this was correctly changed. And then our form ID is the form ID of our
form that was submitted. Now that we have the data that we want to
transfer over to our tags available. Let’s build some tags. First of all, let’s start out building a Google
Analytics tag. In this case, it would be useful to use a
Google Analytics event tag for form Submit. And we’ll choose Universal Analytics. And as a track type we’ll choose event. And here we’re gonna type in our category
in our case would be always the same. And let’s transfer over the actual contact
form ID. I’m going to fill this out with our variable
as well. And then as the label, let’s put in the interest. So we have that available as well. So that should be filled out dynamically based
on what the user has entered. Now, you might be asking, why isn’t he sending
over the other details, for example, the name or the email that’s actually considered personal
identifiable information. And it’s prohibited by the terms of service
of Google Analytics to be sent over. So don’t make the mistake of sending any kind
of personal identifiable information over. With our interests, that is fine. So we would be able to know how many people
have first of all submitted the form but then also be able to segment or to filter down
on the specific interests that the user have. The other day can be left the same. If you have a settings variable, you can utilize
that here. If you don’t have a settings variable, you
can enter your tracking ID, let’s see, here’s the tracking ID, put it in here. And then as a trigger will choose our contact
custom form submit trigger. Let’s save this and refresh. And let’s try this out again. This time I choose consultation. Let’s send this off. We see our form submit happened, our Google Analytics
event form submit happened. And in our Google Analytics, real-time reporting,
we should see a new event. Yes, they’re just an new event that happened
a form submit of the form ID 771. And if you click on that you see the interest
was consultation. So everything is working from this part. And we could go ahead and deploy this to allow
users, I want to show you how you can also connect the same data to a Facebook event. So here I have a Facebook event form submission. If I click on it, you can enter something
like this, this will check a form submit an event called form submit, and then we can
enter the interest. And again here we can utilize our variable
with the two curly brackets and choose dlv form nterest in the drop down menu. And this will then be transferred over to
Facebook that’s attached to right trigger and save this. And the same is true for a Google Ads conversion
tag that you might want to fire upon this form Submit. And here I have a conversion ID from my account
the conversion label from my account. And I simply want to fire this on our custom
form submit. Let’s save this and try out these new events. So let’s fill this out again. And I’m going to service, send this off. We have a form submit here we see our Facebook
event five or Google Ads event fired and our Google Analytics event fired. You can also see that in our tag assistant,
we have our Google Ads conversion tracking that fired and our Google Analytics event
hit. Then we have our facebook pixel as well. A form submit was transferred with a custom
parameter interest of service. And so you could for example, retarget or
build an audience of users who have chosen service in your form and send that off. Don’t forget at the end, this is not yet live. It’s just happening in your browser. You still need to submit this as a version
so it goes live to all your users. All right, so there you have it. This is how you can connect your contact from
seven to Google Tag Manager and then forward this on to the tags that you choose. If you found this interesting, then please
give us a thumbs up and if you have any more questions, leave them in the comments down
below. And if you haven’t yet, consider subscribing
right over there. And I’ll see you in the next one. My name is Julian. Till next time.

43 thoughts on “How to Track Contact Form 7 with Google Tag Manager

  1. Is there a code in order to make this faster???! What I mean is adding too many tags slows down the website!! So are there any codes that would allow the website to run faster??!!! It's a big problem to deal with low website speeds!! So plz if you could help thag would be so awesome dude!! 🙏🏻

  2. I have been using GA & CF7 for YEARS. Please let me be the first to tell you that this is the best and easiest tutorial on this I have ever seen. Exceptionally well done.

  3. Great Video Julian – just one thing, when I'm setting up an Analytics Goal, the category is simple enough but the action and label could be multiple values. Do I use regular expressions to capture all the potential outcomes or should I focus on just a singular goal of the form being submitted?

  4. Best video on this topic. Julian, I have a question. How do I create an audience based on any data form field? Let say I wish to create an audience of those who chose Product in your example. (Later, a similar audience will be created using that audience)

  5. Hi, I'm using this tutorial but I have the problem the events are also being fired when the form isn't succesful. Is it possible to activate the trigger only if the form is succesful? Thanks.

  6. Great video but I am having a hard time once I create these to see where in the Admin Dashboard for Google Analytics the results are shown.

  7. When I check the Variables tab in Tag Manager on the contact form page, the custom DLVs I created are showing as Return Type 'undefined' and Value 'undefined'. Where have I gone wrong?

  8. Hello. Excelent video. but it is not working in my website, and I verify 2 timas that I put all correct, but is still not workin. I am in Mexico. Please help me

  9. Great video! I've done all the steps and everything works perfectly. Buy now I want to set the goal in my analytics dashboard, however, I can´t read the goal after the configuration. I understand that My Category will be: formSubmit, and the action should be: FormID, is it rigth? Because I left empty the tag and label inputs. Hope you can help me to se the right values.

  10. Hi Julian, you rock! Thanks a lot for the tutorial, very useful and easy to follow, keep up the great work!

  11. How will you set this up if you have two different CF7 forms on the same page? I am using different method, and it counts one form submit for two different IDs

  12. Just following on from the Q from Michael Bogosian
    below. I have 2x sets of forms, each containing 2 forms (2x question forms and 2x booking forms). I want to track each set of forms separately. In GA, I'll create 2x separate goals and in FB, I'll create 2x different custom conversions (with formid as my parameter). However, I don't know how to tell GA or FB which forms to track (i.e. track form A & B for questions and X & Y for bookings)…Thanks again for the video, super clear as always!

  13. Hmmm… this is weird. I am trying to implement this but the Contact Form 7 isn't firing any events, at least not according to GTM preview mode. I am probably doing something wrong, but I don't know what.

  14. What is the benefit of using this method over the element visibility method you showed in your other video on form submission tracking?

  15. 09:57 How do I include other data layer variables in the label field? I have "services" and "property type" and other such variables to measure. None of this is personal data, just anonymous specifications made by the user.

  16. Hi, is it possible to track if a form as been completed or not just to see if there is someone that does't want to fill all parts? And how to do it if I am running an A/B test so I have two different forms?

  17. Important Question: I do have Google Analytics + conversion tracking set up (Since 2018) and it's all working perfectly. Now I want to use the Google Tag Manager. Do I have to copy all conversion tracking settings to Google Tag Manager or is it enough if I just implement the GA Base in Google Tag Manager? 🙂 Greetings Sami

  18. Hey Julian! Very helpful, many thanks! Quick note: if you're using different contact forms on your website, you need to make sure that you have some kind of mapping between the datalayervariables and the formId, otherwise you could receive the wrong values (e.g. if there are different fields in the two forms).

  19. Thanks for the video! Just as a heads-up, you seem to have left a few extra's in the linked json, including your Facebook pixel & account ID.

  20. Could I put in "variable" CF7-form(title)? Or only can I put "CF7-formID"?? It's for have more simple control with analytics. Thanks!!!

  21. I dont think the person who set up the contact form on my side included string as the return type. This is not allowing me to see the fromId in the data layer as I get undefined.

  22. Hi there, we have implemented this method. At first it works fine but by time we realised that with this method GA don't able to get event data from iPhone. Don't know why but probably privacy&security issues. Would you please test this method in iPhone device and share your results. Thx

    Test enviroment: Mobile Website (Responsive)
    Device: iPhone 5,6,7
    Results: Not even any hit to GA

  23. What I can't figure out is how to actually track the conversion in Facebook. I've got it working everywhere else, but can't seem to find that data/option in FB at all! Anyone know of a video or article that will lead me in the right direction?

  24. First I used this

    document.addEventListener( 'wpcf7sent', function( event ) {
    alert( "Fire!" );
    console.log(event);
    }, false );

    So when I press submit button and not filling any required fields, it would still fire, so it might not be the best thing.

    Then I used this

    document.addEventListener( 'wpcf7mailsent', function( event ) {
    alert( "Fire!" );
    console.log(event);
    }, false );

    It only fired when form was properly filled and thank you signal was generated

  25. Brilliant, really been able to extend my knowledge of cf7's events and GTM through watching your video. Just some constructive criticism, you do talk and work quite fast so I had to slow the video down to 0.5 playback speed! 🙂

  26. Very good tutorial thank you! My problem is that none of the tags ar firing when I click submit. GTM is installed correctly on the page but also there is GA tracking code from anohter GA property. Could this be interfering anyhow? Thanks!

  27. Great video Julian! Well edited, straight to the point and with comprehensive detail. This will help me with many future use cases. Thank you!

  28. Lieber Julias, vielen lieben Dank für noch ein tolles Video. Dank dein Tutorial konnte ich alles richtig einstellen. LG

  29. Gr8 video. One thing only. I think, that better event in event listener will be: "wpcf7mailsent". Otherwise, every time someone click submit button, Tag will fire.

  30. Julian, awesome job, and extremely helpful! Thanks for pointing out the other reasons for your choices throughout. Those little one-off deviations help immensely with questions we all have in our heads! Again, Great work and thank you!

  31. Awesome video. Perfect timing as I'm setting up a client CF7 now. Question, once this is all setup, if I duplicate the CF7 form, and use on another page for example, would I have to change any of these steps in Tag Manager? Thinking through an easy way to scale this if we had different landing pages with CF7.

Leave a Reply

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