November 29, 2019
Track Contact Form 7 with Google Tag Manager
Updated: November 29th, 2019. Contact form 7 is yet another pretty popular form plugin for WordPress. What do good marketers do with forms? They track submissions, say, with Google Analytics and then measure the overall performance: where do those conversions come from? which forms perform better? etc.
Nowadays, one of the most popular ways how to track any interaction on the website is …surprise surprise!… Google Tag Manager. If for some reason, you haven’t tried it before, you definitely should (here are some reasons why).
Anyway, back to the topic. Contact Form 7 is no exception and you can definitely track it with Google Tag Manager. You can either read this long (but very useful) guide and learn more about the magic of form tracking, or you can just continue reading this blog post because today I’ll explain how Contact Form 7 event tracking with Google Tag Manager works.
Why this guide?
I’ve already seen some guides on the web covering Contact Form 7 event tracking with GTM, however, they have some issues/limitations:
- Some offer an inaccurate solution (by using Click Trigger!!!? which is a big NO in form tracking)
- While others are giving not enough. I mean, they show how to track form submissions (which is good) but I’ve found that it’s pretty easy to also get values of each submitted form field which can give you much more insight!
Interested? I hope that after reading the previous paragraph you felt like this:
By the way, if you have any feedback, please leave it in the comments and I’ll get back to you.
Things to keep in mind
This solution works with AJAX-based forms (built with Contact Form 7) which means that if the page does not refresh after the successful submission, then go ahead and continue reading.
Also, this guide is mainly targetted at single-page forms. Multi-page forms fire events of successful form submissions after each step. Their tracking is not covered in this guide but I don’t want to leave you on thin ice so here are some hints/directions.
- For multi-page forms, use the auto-event listener mentioned in this blog post (#1 chapter)
- What I’ve noticed so far, is that usually each step has its own form ID, therefore you can track submissions by updating the custom cf7submission trigger. Set it to fire when form ID equals to XX (replace XX with the ID of the last step’s form).
Contact Form 7 DOM events
In their documentation, Contact Form 7 developers have listed several DOM events that are dispatched after a particular form interaction occurs:
- 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.
To make Contact Form 7 event tracking come true, at first, I tried listening to wpcf7submit event but what I ended up with was that this DOM event was being dispatched even if required form fields contained errors. As a result, I switched to wpcf7mailsent event.
1. Contact Form 7 Event Tracking: Auto-Event Listener
The first ingredient of the form tracking is a piece of code that will be listening and waiting for a successful form submission. That code is also known as an auto-event listener. The listener will be waiting for wpcf7mailsent DOM events and if one occurs, it will push some useful data to the Data Layer (event name, form id, values of all form fields).
|
1 2 3 4 5 6 7 8 9 |
<script> document.addEventListener( 'wpcf7mailsent', function( event ) { window.dataLayer.push({ "event" : "cf7submission", "formId" : event.detail.contactFormId, "response" : event.detail.inputs }) }); </script> |
Compared to other solutions found online, this will not only create a Data Layer event called cf7submission but will also return a full response, an array of every form field and its value. More on this – a bit later.
In order to implement this code, go to your Google Tag Manager account, then a container and create a Custom HTML tag that fires only on those pages which contain forms. Let’s say that in our case, a form is in the footer of each page, so we’ll fire it on All Pages.
1.1. Test the listener
Before we continue, it’s crucial to test if the listener is capable of capturing a successful form submission. In GTM, enable Preview and Debug mode and the orange notification bar will appear. If it doesn’t, view this troubleshooting guide.
Now, go to the website where the form is located and refresh the page. A debugging console will appear at the bottom of the screen where you can see which tags have and haven’t fired. Fill in all form fields and submit the form.
If everything worked smoothly, you should see a cf7submission event in the Preview and Debug Console (just like in the screenshot below).
More importantly, click that cf7submission event and go to the Data Layer tab. What you’ll see is an array of all form fields, field names and their values (which were entered by a visitor). So not only will you be able to track successful form submission, but you’ll also have a chance to capture form field values too. P.S. Keep in mind that Google Analytics does not allow you to store PII on their platform (but that data might be sent to other tools).
2. Variables and a Trigger
So what have we done so far? Well, we have some data in the Data Layer that we could to use:
- cf7submission is a Data Layer event that should be turned into a trigger. No tag will fire without a trigger.
- Just for demonstration purposes, we’ll also want to capture a subject line of form submission and pass it to Google Analytics later on. We can fetch that field’s value by creating a Data Layer variable.
If you want to turn some Data Layer event (in our case, it’s cf7submission) into a tag-firing condition, you need to create a custom trigger.
P.S. As a time saver, I’ve prepared a GTM recipe that automatically creates a CF7 listener and a custom event trigger in your container. New to GTM recipes? Here’s a guide on how to import recipes.
Now, it’s variables’ turn. Let’s take a closer look what’s happening in the Data Layer after cf7submission event occurred. In addition to event and formId, Contact Form 7 listener also pushed the response which is an array containing 5 objects. Each object represents a form field. In JavaScript, indexes start from 0, not from 1, so if we want to fetch your-subject field’s value (which is the third object), we’ll have to choose index 2, not 3.
In one of my previous blog post, how to pull data from the Data Layer, I’ve explained 3 different data structures:
- When all data points are on the same level
- When there are different levels (children-parents)
- And when there are arrays.
In this case, we have to choose the 3rd option, pulling data from arrays in the Data Layer. In order to do so, we first have to define the parent key, which, in this case, is response. Then we have to set the index (in order to tell Google Tag Manager in which object we are interested). This time, it’s 3 (because it is the 4th object in the array, an in JavaScript indexes start from 0 (0, 1, 2, 3, 4)). And, finally, we choose the final key – field’s value.
As a result, our Data Layer Variable name is response.3.value
Another variable which I would recommend to create is formId. If you have several forms on a website, it will help you distinguish which form was submitted (and you won’t have to create separate triggers and tags for each Contact Form 7).
Save both variables and test them. The best way to do it is to refresh the Preview and Debug mode, refresh the page with the Contact Form 7 and try submitting it again.
After that, click cf7submission event once again and go to Variables tab. You should be looking for two newly created Data Layer Variables.
In the screenshot below, everything is working just as we expected: one variable contains the actual subject line while the other one fetched ‘9′ which is the ID of my test form. If you got undefined value, double-check if you entered all variable settings correctly. Remember that Data Layer variable names are case-sensitive.
If you are still facing issues with any of those two variables, read this guide how to pull data from the Data Layer.
3. Google Analytics Event Tag
The first two steps of the Contact Form 7 event tracking are done! Now, let’s send the form submission event to Google Analytics via Universal Analytics tag with the following settings:
- Track Type: Event
- Event Category: form submission
- Event Action: form id {{dlv – formId}} (when the actual event occurs, form ID will be replaced, so the final result could be form id 9
- Event Label: {{dlv – Form Subject}} (the same applies here: when the actual event is dispatched, the Data Layer Variable will be replaced with its value, e.g. This is a test.
- Do not forget to add the Custom Trigger we’ve created earlier.
4. Let’s test
Save all changes, refresh the Preview and Debug mode, go to the website where the Contact Form 7 is implemented and refresh that page as well. Submit it and take a closer look at what’s happening in the Preview Console. Expected result: Universal Analytics event tag must fire only when the form was submitted successfully.
Once the tag appears in the section of fired tags, head over to Google Analytics Real-time event reports.
5. Set up a Google Analytics Goal
The last step of the Contact Form 7 event tracking: create a Google Analytics Goal. Log in to your Google Analytics account and:
- Go to the desired account’s Admin section
- Choose a view you’re interested in
- Go to Goals and press NEW GOAL
Now, enter the following settings:
- Template: Custom
- Goal name: enter anything you like. In the example below, I’ve entered Form submission
- Type: Event
Finally, enter Goal details:
- Event Category equals to form submission
- If you have more forms on a website and you wish to track ONLY THIS ONE, then you can additionally set the rule: Event Action equals to form id 9
If you leave other fields empty, they will not be checked.
Contact form 7 event tracking: final words
So there you have it. In this blog post, I’ve explained how to track single-page AJAX-based Contact Form 7. The process is similar to other WordPress Plugin, Gravity Form:
- Implement a custom auto-event listener which listens to successful form submissions.
- Create variables and a custom trigger.
- Set up Universal Analytics event tags that push the event of a successful form submission to Google’s servers.
- Finally, set up the Google Analytics goal.
As it was mentioned before, you might face some difficulties if your form is multi-page (consists of two or more steps and each one of them refreshes the page). What I’ve noticed so far, is that usually each step has its own form ID, therefore you can track submissions by updating the custom cf7submission trigger. Set it to fire when form ID equals to XX (replace XX with the ID of the last step’s form).
If you still face issues with Contact Form 7 event tracking (by using GTM), read this guide: 6 ways how to track form submissions with Google Tag Manager. I bet you’ll find something useful.
110 COMMENTS
Hi, Great guide, but I have a problem my GA doesn't register any events. In GTM preview mode everything works as it should be but it looks like GA account doesnt respond to GTM signals. What can it be?
1. Check with Tag assistant whether those GA hits are reaching the destination.
2. Check your real-time reports. Sometimes people drill-down a bit too deep and forget to remove filters (they look like blue tags in the RT reports)
3. Also, check GA view's filter settings. Maybe your internal traffic is excluded.
4. Maybe you're sending data to the wrong property.
5. Sometimes, I see that people insert GA settings variable not in its dedicated field, but in GA Tracking code's field, and that won't work.
You may have not submitted your workspace in GTM as a live version that could be the reason it only works on preview mode.
Thank you julius for your help.
But i want to ask,
why my formID is undifned?
i already following the step, but the value of the formID is undifined,
Thank you.
Check if you have created a Data Layer Variable correctly. It must be precisely "formID", not "formid", not "Formid", etc. Data Layer Variables are case-sensitive.
You should also check what is happening in the Data Layer after form submission occurs (you can do that by going to "Data Layer" tab of the GTM Preview and Debug console). Check what value is there.
i already change to "formID" but after check the variable on GTM preview.. the value still undifined / "(no form ID)"..
Ok, my bad. The variable needs to be "formId", not "formID". Did that help? If not, send me an email to julius [at] analyticsmania.com with screenshots of what you see in the Data Layer when the form is submitted.
I seem to have the same problem. I followed all the steps. Made an Event Listener, Custom Tag and GA Variable. All trigger are firing at the moment they are supposed to fire. CF7 Listner pushes 'wpcf7successfulsubmit' and correct formID in the datalayer, yet in Ga Event Label remains 'undefined'... Event isn't tracked in GA.
Step 1. from your possible solutions isn't entirely clear to me. How could I check that?
Thanks in advance
Hey, could you please give me a link to the form? I'd try myself if the form ID is fetched at all.
Thanks for the reply. The form is at: http://smart-online-marketing.nl/workshop-nudging-in-de-praktijk/
When you submit a form, go to Preview and Debug mode's Data Layer tab and check what is happening there. Here's what I see after I submitted your form:
"formId" field is there and by creating a "formId" variable (neither "formid" nor"formID", only I letter must be uppercase), I was able to fetch its value.
Variables settings:
Title: dlv - formId
Type: Data Layer Variable
Variable name: formId
After you create that variable, submit the form again, click the cf7submission event in the Preview console and go to "Variables" tab. If "dlv - formId" value is undefined, you entered variable's name wrong. If it has some value, then this correct value will also be passed to GA.
Let me know if that helped.
Hi thanks for your suggestion, I checked and adjusted the form var and made everything match up. As long as it is case-sensitive and corresponding right? I have used different names but I get a form-id now:
wpcf7successfulsubmit:
Data layer
1 {event: 'wpcf7successfulsubmit', CF7formID: '55856', gtm.uniqueEventId: 4}
But still, no event is pushed in Ga.
Hey, contact me via email julius [at] analyticsmania.com. Also, share the following information:
- A link to the shared preview and debug mode.
- View access to that Google Analytics view that you're trying to push data to.
I could debug your issue.
Another great post!! thank you Julius
Thank you, John!
Hi,
I ahve tried this. Everything is fine except formID. It is showing undefined.
Could you help me out?
Also form id is build in variable. Why we have created new one?
'Form Submission' is built in trigger. Why we have created new one?
Hi, Built-in Form ID variable is not the same as Contact Form 7 formId, therefore you need to create it separately. Also, "Form submission" trigger usually fails me as it supports not enough forms. So in this case, I'd recommend using this CF7 listener.
When you created a Data Layer Variable, make sure that "formId" is entered precisely (with uppercase I letter). "formID", "formid" will not work, only "formId"
Hi Julius
I'm a complete novice which isn't going to help here. But I've followed the first step and created the custom HTML tag exactly as you outlined, went into debug mode, went to my site, refreshed the page, filled out and submitted the form... and didn't get a cf7submission event come up in the debug pane. What then? Hopefully something simple
Are you sure you're using Contact Form 7? Does the page refresh after you submit the form?
Yes, I am an amateur when it comes to using tag manager but, I am certain I'm using contact form 7. There is no page refresh after form submission
Currently testing the luna metrics listener for ajax events and it appears to be working
Could you give me a link to the page where that form is?
Thanks Julius - the page is here elizabethmaydesign.com.au but I've since had a developer look at this and they couldn't get it to work either, using an ajax method. I'm going to create a thank you page now and go about the tracking that way. Thanks for your help and in reply.
I just tried to inject a CF7 listener on your website and catch form submissions and everything worked fine, I got the cf7submission event. If you want, I can debug your implementation. You'd just need to share "edit" access of that GTM container with julius [at] analyticsmania.com. Do not fear, I won't be able to do anything wrong because only you are able to publish changes to the live environment. If you feel comfortable, we can discuss all further questions via email.
Hi,
Is this method affected by another tags and triggers in the container? Should I use a new container for this?
I got a clic to call tag that works perfctly on this client's website, but after following your steps for CF7 I get mixed my phone calls with my cf7 forms (if I click on the phone, and submit a form, GA events and goals brand it as 2 click to call hits).
Also, is it normal that there's no tag showing in the debug mode where it says "tags fired on this place" although it does get the data layer info correctly and the listener activates?
Pls help me, you are one of the only blog posts on this theme that do work
Theoretically, this solution should work with others too and there's no need for a new container. Unfortunately, I cannot help you debug more unless I get to see the actual website with implemented GTM. If you want, feel free to share the following information:
- Send me to julius [at] analyticsmania.com a shared link to the preview mode
- A link to your client's website.
Thank you so much Julius, I just sent you the link to the debug mode and my clients website.
Hey Julius, Thanks so much for this great info. I have been trying to troubleshoot GTM events with Contact Form 7 a number of different ways now but your tutorial looks the most comprehensive.
On Step 1.1 my CF7 Listener Tag fired, but "If everything worked smoothly, you should see a cf7submission event in the Preview and Debug Console (just like in the screenshot below)." the cf7submission event did not. Any ideas where to go from here?
Hey,
If the event did not appear, that can mean many things:
1. You did not refresh the preview and debug mode + a website you're working on.
2. Maybe, by mistake, you did not copy the entire code of the listener?
3. Are you sure you're looking at the right container?
4. In preview and debug mode, click Pageview event. Do you see a CF7 Listener Tag fired?
Hi Julius,
I am also waiting for your reply. Real time events are not showing yet the tags are firing.
Thanks
Christie
Did you carefully read and checked all tips mentioned here? https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/
I'm asking this because many people say that they did read carefully and the guide did not help, but when I take a closer look at their implementation I see that for some reason they ignored those tips.
Hey Julius,
your guide is awesome and helped me so much.
Everything is working out that good, that in the end GA is tracking to much :D
No, seriously, I'm using a lot of different forms on my website and wanted to create a goal for each form seperatly. Now I defined in my first goal as action "Form ID: 584". But it's also tracking in the realtime report > converions a form with another ID? What did I do wrong?
Greetings
Eileen
Okay, I need to correct myself.
If I put the information about Form ID X into the goals action, it will show me every intercation with every form in my conversions except of interactions with form X.
Somehow it's excluding, if I'm giving it the exact ID?!
Hey, It's becoming a bit hard to debug without seeing actual situation. Could you please contact me via email julius @ analyticsmania.com? Also, please attach the screenshot of your goal settings in GA.
Cheers
Hi,
I have set up all of this on www.panzerglass.com/contact, but cannot seem to track any enquiries made via our contact form :/
I have followed your guide from A-Z and everything is firing just fine - except for the GA goals (and the category "Form submission" isn't showing up either).
Can you help?
Hey, share a link to the preview mode and I'll take a look.
Hi Thank You. I must admit that this one is one of best and easy-to-read and implement guides of GTM - CF7 conversion tracking.
By the way, How about redirecting to "Thank You" Page? Which method you recommend more?
If you want to track the form that redirects to a Thank you page (and if the URL changes too), you can try this tracking method
Just wanted to say thanks! I have been looking for a GTM solution in contact form 7 for a long time. Well done!
Hey Julius!
Big thanks for the tutorial.
However, there is 1 problem I cannot seem to figure out and it is driving me crazy.
When I set everything up and turn on the preview mode in GTM and go submit the contact form - everything works fine - I get the event showing up in GA real time and in conversions.
However, when I turn off the preview mode in GTM and try to submit the form, nothing shows up in GA.
Do you have any idea what is causing this?
Gustavs
Yes, you need to publish your container changes. In GTM interface, click Submit and follow the steps.
Thanks for this guide. You made it super easy to follow and to understand. It took me about 5 minutes to set up.
During my work, one question came up to me. When you get information from data layer saved as variables you use response.0.value. Is it possible to use field name instead of its index?
For example - you keep track of 3 different forms and want to get the subject field as variable, but it has a different index in these forms. Instead of recreating this process 3 times I wonder if I can keep it simple. I wish I could go with something like response.subject.value.
Is it possible?
In this case, you need to use the index. Or, if you know JavaScript, you could write a Custom JS variable that fetches the right parameter each time.
Thanks a lot. I'll try to make it work with some js.
Hello,
I run into the same problem as yours. Different forms with different fields.
Wonder if you have solved it with js?
If you don't mind, could you share how to do it?
Unfortunately I am not so good at js, but I would really like to track different contact form 7 properly and see the right labels for each on in the Google Analytics event report. Thanks in advance.
Hey Julius!
Thanks for the great post. I'm having some issues though and I'm slowly losing my mind haha
I'm trying to set up a GA event when a form submission is sent, and I'd also like to send the drop-down subject field as a variable in the event label.
The form is a CF7 AND the page redirects to a thank you page when successfully submitted.
Now, I first tried to use the custom HTML trigger method and it worked the first time BUT then it didn't work again afterward for some reason, so I tried the simple CF7 redirect method but I couldn't find the variable in the data layer in the developer's console when using this method.
So I tried the very first method you showed in the other article "Google Tag Manager Form Tracking (with Form Listener)" and that actually worked; I was able to pass on the event to GA with the correct subject line as the label using a custom variable.
The only issue now is that the event is still triggering when there is a mandatory form field missing - EVEN after ensuring I have the "Check Validation" box ticked in the trigger settings. And for more info, the page reloads when this occurs.
Any idea why this is happening and how I could fix it?
Thanks a lot.
1. When the page reloads, the data layer is wiped out, therefore, you don't see the information of the submitted form.
2. "Check validation" will not work with CF7. CF7 is using other technical solutions that are not supported by "check validation".
3. In your case, you could contact a developer and ask to properly modify CF7's code to push the value of the field to the data layer (on the same or on the thank you page). If you don't want to bother a developer, you need to know then how to write code by yourself.
Got it, thanks a lot!
Hello.
I've been tracking CF7 conversions with Analytics with this method but I'm having some troubles tracking them with Facebook pixel.
Since I've already created a goal in Analytics, can I use the information to send to Facebook pixel?
I saw this code on CF7 support:
<script>
document.addEventListener( 'wpcf7mailsent', function( event ) {
ga('send', 'event', 'Contact Form', 'submit');
}, false );
</script>
Do I need to change something to successful track my events? I used "Form Submission" (category) and "Form ID: {{dlv - formId}}" (action).
I think it's easy to solve this, maybe I'm just missing something. I appreciate any help/explanation.
Thank you.
You're so overcomplicating things :) Why don't you just use the CF7 listener that I've shared in the blog post above and send the data to GA with the Universal Analytics tag. Why do you use that JavaScript code to send the data to GA?
As for the Facebook pixel, Universal Analytics tag has NOTHING to do with Facebook Pixel. If you want to send data to FB pixel, you have to create custom HTML tags and use some custom scripts there.
For inspiration read:
- this https://www.analyticsmania.com/post/facebook-conversion-tracking-google-tag-manager/
- and this (tip #3 https://www.analyticsmania.com/post/insert-variables-in-google-tag-manager/)
Hi Julius,
Yes, you are right.
I'm learning GTM and some things still a bit confuse. I just asked because I needed an easy answer, I apologize for that.
I'm using the listener and everything looks good on Analytics, I'm able to import all form submissions. I've also created a HTML tag for Facebook Pixel. I just don't know what I need to do to send the information to FB pixel.
I mean, using fbq('track','Lead') isn't enough, right?
It's a dumb question, I understand if you don't have time to give a clear answer/explanation.
fbq('track','Lead') is enough if you just want to track the lead itself and you're not interested which form was submitted.
If you want, you can add an additional parameter "content_name" (according to the Facebook docs).
Like here (just replace the {{contentName}} with an actual GTM variable):
fbq('track', 'Lead', {
content_name: {{contentName}}
});
Hi Julius,
First thank you for detailed information and I was successfully able to track from.
I have one query.
By mentioning 'response.3.value' in Data Layer Variable name, it can track 4th response value.
What should I mention in Data Layer Variable name if I want to track two values altogether (means 4th and 5th)?
Hi, create two separate data layer variables
This is Great!
I have followed the steps given and want to know if these steps will track conversions from Google ads also?
After successfully implementing the steps, I tried filling Ads Enquiry form, but no conversion was tracked.
Please help
There is nothing mentioned here about Google Ads. This tracks the event in Google Analytics. If you create a goal in GA and then connect Google Ads, that might become your conversion.
Thank you!! This was very easy to follow.
Hey,
Brilliant article.
I have only one problem and I was hoping you can help me with that.
Some users click the submit button multiple times and the event is triggered 6-7 times for ONE user. I had 10 emails but I have 100 conversions in my report.
Is there a way around this?
Yes, set the conversion tag to fire only once per page.
Hi Julius,
Thank you so much for the detail tutorial. Even a begginer like myself can understand how to use google tag manager after your tutorial. I setup everything by following your article everything is working good except that I am facing one issue. The issue is in google analytics my goals are not recording? I look into it again and again but for some reason I am still stuck can figured it out.
This is most likely because of the dash symbol in your even name ( - ). You probably are using a bit different dash in the Goal's settings. Make sure that you have correctly copied the event values and paste them in the goal settings as they are.
Or maybe some other symbol is not entered as it should be. You must ensure that goal's settings exactly match values that are in the event.
I have been using other methods like using form submission event with css selector as trigger but this one is perfect as it allows pushing custom values as well.
Thanks so much!
Hi Julius,
in my Contact Forms 7 I'm already tracking goals in GA with GTM with 2 values: Label {{Page URL}} and Form ID:
I have read this article and I would like to understand if it's possible to catch values as checkboxes filled by users
I have some choices that users "check" with checkboxes while is filling the form that I would like to collect with GA events
Thanks and Best Regards
Hey,
The response data is available in the Data Layer here https://www.analyticsmania.com/wp-content/uploads/2018/03/wpcf7-data-layer-1.png
Read this guide to learn how to access information from the Data Layer and use it in your tags https://www.analyticsmania.com/post/pull-data-from-data-layer-google-tag-manager-tutorial/#gref
very well explained. really. thanks a lot.
Thanks for this! I am having the problem that 'subscribe to newsletter' button is tracking as a contact form submission. When I inspect this button and my contact form submission button they are both showing class= 'wpcf7-form-control wpcf7-submit', so basically if someone subscribes to our newsletter, GTM and GA are showing this as a contact form submission. Is there a way I can either 1. differentiate within GTM/GA or 2.rename the class= for the subscribe form? I have tried to set a exception of page URL contains /news/ but as my main trigger is Click - All elements (click classes equals wpcf7-form-control wpcf7-submit) the excepetion doesnt seem to be working. I have done as you suggested 'all pages' but then the contact form submission is triggering when the page is loaded and not when a form is submitted. I am so confused!
Why don't you just use the formId dataLayer variable? Each form should return a different value.
You're overthinking this with classes.
Dear Julius,
Thank you for the great recipe.
I've stopped on the first step:
Event cf7submission does not appear in GTM preview mode.
What can be the reason?
Many reasons. Without knowing more, my guesses are:
- Your form is not Contact Form 7
- The form redirects to another page after the submission
- After implementing the listener Custom HTML tag, you did not properly refresh the preview and debug mode
Julius, form redirects the user to booking engine (another domain), right.
Your recipe will not work in this case?
Yes, I have mentioned this at the beginning of the blog post.
Hello! This is the most understandable guide I have found on-line, especially for beginners! So thank you for that! Everything works as it should, except for the very last bit: goals. I have done everything step by step, and everything seems correct. However, although events are registered in the "Real-time" section, no conversions/goals are registered/tracked. Any suggestions?
Did you create the event tag EXACTLY as I have instructed? With same exact values, same letter size, etc. Also, is goal configured EXACTLY as I have displayed? Every letter and space is important.
Hello Julius,
Thank you for your prompt reply! I have copy-pasted everything and triple checked that there are no accidental spaces at the beginning or end. I also have carefully followed all your instructions.
Google Tag Manager: https://ukprotontherapy.co.uk/wp-content/uploads/2019/12/Screenshot-2019-12-29-at-23.50.26.png
Google Analytics: https://ukprotontherapy.co.uk/wp-content/uploads/2019/12/Screenshot-2019-12-29-at-23.51.19.png
I don't understand! I'm sure the solution is right there but I just can't see it...
Your goal settings are still incorrect and not how I showed them in my article :)
This is how you did: https://ukprotontherapy.co.uk/wp-content/uploads/2019/12/Screenshot-2019-12-29-at-23.51.19.png
This is how I did: https://www.analyticsmania.com/wp-content/uploads/2018/03/goal-settings.jpg
What's the difference? I did not use GTM variables in the GA goal. You should never do that. You need to use the actual event values (e.g. event category) in your GA goal's settings. GA has absolutely no idea what {{dlv - formId}} is. And it never will.
Hello again,
I feel so silly, of course it works now! This is something I will remember for sure. Lesson learned :-)
Thank you again for your help!
Hi Julius,
Thanks for sharing such informative tutorial.
i have done as you outlined but Event isn't getting pushed to Google analytics.
Can you please help me out
Hello Julius
Thanks a lot for your fantastic tutorials ! Especially this one for Contact Form 7 catching conversions.
I'm not using GA on my customer's website, I need to fire a trigger catching CF7 validations in an environment that does not seem to be Ajax based.
I was thinking of trying to catch the popup message "Votre demande.." because the event listener fires but my conversions don't on this page : https://www.opengst.fr/demande-de-devis/
Would you please have a recipe for non Ajax CF7 conversions ? Thanks !
I don't have. However, you can track the appearance of the popup with the help of Element Visibility trigger.
Bit of a newbie to this so my apologies.
Section 2 discussed about picking up a certain variable - what if we are creating this event/goal without wanting to track specific variables (we want to track just form submissions via CF7 as we are also tracking number of visits to our contact page)?
Would we simply skip this part? How would we complete the process?
Sure, you can skip that.
Okay, great.
Would that have any effect on the Event Action and Event Label in section 3, are they triggered by setting up the data layer variable?
Yes, they would. If you skip those variables in section 2, don't use them in section 3.
Ok. I'm going to presume that it won't mess anything else up!
Thanks for such a quick response.
Hi Julius,
I've got stuck in the first step (I'm using ContactForm7 for contact form inside my tour pages).
Actually I did it all step-by-step but couldn't see my tag "Form Listener - Only Tour Pages" in TagManager preview panel on my site.
Could you please let me know how may I fix the issue?
Hi Julius,
thank you for your guide.
What if I need to track lots of different forms?In valsuganacamping.it I've several different forms (any campsite) in 5 languages.
Do you have any suggestion?
Thank you very much
Use the formId data layer variable?
Hello. Great article thank you.
I got as far as step 3 - Google Analytics Event Tag.
What do I enter for Non-Interaction Hit?
When I test it says
Tags not fired on this event: CF7 Listener, GA Event - Form Submission, Google Analytics
Can you advise?
Nin-interaction field has no impact on your problem.
Contact form 7 must fire on all pages. When you submit the form, then you must see a cf7submission event in the preview mode and on that your tag must fire.
In this case, I would just advise carefully re-reading the guide and all its steps. Carefully check triggers, typos, etc.
Okay I have done that the other difference I can see is you have {{GA Settings Variable}} and I have {{Google Analytics Settings}} in that dropdown. I don't have anything else to select.
Thank you.
Please share all the screenshots of your setup. You can host them somewhere online and paste the links to images here
Hi,
Sure here you go:
https://photos.google.com/photo/AF1QipNDDTNz-c-1TmSSobS-S7WKcntB4KxLVpoZkFBF
https://photos.google.com/photo/AF1QipP-PYuWN6bZw960vZSpfHHPq1P6SO3zyg-z5KTf
https://photos.google.com/photo/AF1QipPxDxKAbWs3VahUbLSPHZASwUG8GA4qfXvsfiDT
https://photos.google.com/photo/AF1QipPb_4fRlCcymxm2FDVC4u0pS7YzriB_-F5qFEkX
Thank you
Evelyn
None of your URLs work. They return 404 error.
Hi Julius,
I've submitted two comments since your reply but I'm not sure if you saw them. Can you let me know if you did or not, please.
Thank you.
Hi! I just did first step, and cf7submission doesny show in my DebugMode Panel.
1. Im sure im using CF7
2. I refreshed my website many times
3. My Form is not refreshing
4. CF7 Listner is fired in PagaView
Hi, how are you sure it is Contact Form 7?
Share the screenshots of your setup, link to shared preview and debug mode, and the URL where that form is avalailable on your site.
I have one contact form plugin on my website and it is CF7. 5.1.7, Autor: Takayuki Miyoshi
Then please provide the rest of the information I have asked in my previous comment.
Jezzzz You have right... contact form use theme build contact form!