March 10, 2018
Track Contact Form 7 with Google Tag Manager
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 refreshed 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, ese 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 which 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 which fires only on those pages which contain forms. Let’s say that in our case, 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 which should be turned into a trigger. No tag will fire without a trigger.
- Just for demonstration purpose, we’ll also want to capture a subject line of a 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 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
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: Form Subject: {{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. Form Subject: 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 a Universal Analytics event tags which pushes the event of a successful form submission to Google’s servers.
- Finally, set up 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.
147 COMMENTS
Well done Julius, Did you inspired with my video? ;) I see you to next post Cheers
Hi, uh, no :) I haven't seen the video.
Don't worry, it's in spanish. I mentioned you in this video, for to download Ajax listener from your webpage and mentioned Lunametrics too. So, thank you!
The solution that I've described in this guide does not use Lunametrics' listener.
Although with AJAX listener CF7 tracking will work, with another listener (described in this blog post) it's easier to track form submissions with submitted field values.
The listener pushes values of all fields to the dataLayer in a convenient way.
Hi Julius. This information is really helpful. I have followed the configuration but my GA form submission tag is not firing when the form is submitted. I have reconfigured, refreshed and re-tested several times but I have an error somewhere. Grateful for any help.
Hey, does the cf7submission event appear in GTM Preview and Debug mode (on its left side)?
Thanks a million for posting this! We had given up after trying other solutions, and we're excited to see this working on our sites now.
You're welcome!
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.
Hi, very nice guide.
Everything was going well, but when I arrived at creation of 3. Google Analytics Event Tag, I miss an information.
You have shown an image with the GA event - form submission with:
- track type: event
- category: form submission
- action: Form ID: {{dlv – formId}}
- label (i have not inserted a label, because there no subject that the user insert in the form)
- Google Analtycs Settings: Form ID: {{GA Settings variable}}
This latest string I hasn't been able to set. The field gives to me 2 options: i) select the variable Settings (i'm traducing titles from my language to english..); ii) new variable (here I should create a new one, but I have already created dlv - FormId following your guide). Otherwise I should activate the override of settings with an ID monitoring.
Here I blocked myself.
Hope you can give to me that detail.
Thanks. With Regards
-
Hey Roberto, sorry for a late reply. I've just double-checked all screenshot and I cannot see "Google Analytics Settings: Form ID: {{GA Settings variable}}". There's only "Google Analytics Settings: {{GA Settings variable}}"
You don't need a form id in the GA Settings field. All you need to do is to either create a new GA Settings variable or choose an existing one. If you're new to this variable, read the guide https://www.analyticsmania.com/post/google-analytics-settings-variable/
Let me know if it helped or you have more questions.
Julius
Hi Julius, thans
I was wrong writing the post.
I meaned what are "Google Analytics Settings: {{GA Settings variable}}” (not “Google Analytics Settings: Form ID: {{GA Settings variable}}”) ?
I'm still trying (until now unsuccessfully) following your link https://www.analyticsmania.com/post/google-analytics-settings-variable/ (not very simple)
Best Regards
In that case, I'm not following where the problem is. Could you explain it once again? What exactly isn't working out for you?
I haven't been able (i'm still trying) to configure the tag "GA eventi - Form Submission" with Google Analytics Settings as {{GA Settings variable}}
Show me your latest configuration of:
- GA tag
- Trigger
- GA Settings Variable
Thanks Julius,
following your article I have done (don'y mind if some voice are translated from my language to English, they could seem not the same):
TAG
- GA event - Form submission --> tag type universal analytics; monitoring event; category form submission; action Form ID: {{dlv – formId}}; GA settings {{GA Settings settings}}; trigger: custom - cf7submission, customized event --> Note: this tag is showing an error after my attempt to configure GA settings variable; Error --> unknown variable name on "dlv – formId")
- CF7 listener
TRIGGERS
- custom - cf7submission; type: customized event; trigging on all customized triggers; referral to this trigger: GA event - Form submission
VARIABLES DEFINED BY THE USER
- dlv - form Id: variable at data layer; name data layer variable: formId; version 2
- Google analytics settings: type: google analytics settings; ID monitoring: UA-xxxxxxxx-x; cookie domain:auto; referral to this variable: GA Event - Form Submission
Hope this could be helpful
Many thanks
That error you've posted says it all. "Error –> unknown variable name on "dlv – formId"
In your comment you mentioned that variable's name is "dlv - form Id" which is not the same as "dlv - formId" (there's an unnecessary space after "form"). I'd say that this is your problem. Make
No. The space has come here (writing this post) and not in the GTM.
It is difficult to write all, so I post some images here (don't be angry with me for the language of my GTM)
ALL TAGS https://ibb.co/i6C13y
TAG 1 https://ibb.co/hLSeqd
TAG 2 https://ibb.co/eJCvVd
ALL TRIGGERS https://ibb.co/g18Kqd
TRIGGER 1 https://ibb.co/c5Ctiy
ALL VARIABLES https://ibb.co/dbToGJ
VARIABLE 1 https://ibb.co/krtYiy
VARIABLE 2 https://ibb.co/nB6VVd
many thanks
Everything looks good. No idea why it's not working. Share a link to the preview mode and send it to julius [ at ] analyticsmania.com.
And please in detail describe your problem (in that email). Saying that "you're not able to configure Form submission tag" is not enough, because I'm not even sure where to look for a problem since everything in the screenshot (at least from the first sight) looks good :)
Very nice. Thanks :-)
Hi, I just experienced this issue myself. The solution was as follows:
My variable's name was "dlv - formId"
My Universal Analytics tag's 'Action' parameter was "Form ID: {{dlv – formId}}" (as copied and pasted from Julius's guide)
The problem is that - and – are different characters.
The solution was to change my Universal Analytics tag's 'Action' parameter from "Form ID: {{dlv – formId}}" to "Form ID: {{dlv - formId}}".
Hi Julius,
Thanks so much for this. I'm a novice but managed to follow your easy instructions. One snag: when I got to check the real-time events, I'm not seeing them at all in analytics. Any idea why? I've tried everything to no avail. I'll continue on with setting up the goal, but this is frustrating. Also, the contact form contains a check box to sign up for newsletter but it's reported as contact formid and does not register the newsletter id. Easier just to remove this checkbox since I have two other places for newsletter signup which do get recorded as that formid? Again, I appreciate your help more than you know!
Hey, as for the 1st question, read this guide, maybe you'll find the answer there https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/
As for the other question, I don't quite understand the issue.
Exactly I am having same error. could you please post final solution or you could mail me at shaikhmansoor69 [ at ] gmail.com
Thanks you.
There might be many solutions. Please read this guide first https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/
Real Time analytics is working fine. Issue was with the Form ID that you have mentioned in the 3rd step action. https://www.analyticsmania.com/wp-content/uploads/2018/03/Google-Analytics-Event-Tag-Form-Submission-2.png
So I have removed the form ID since there is single form on the page. I hope it's the right way.
Yeah, that's totally fine.
also wondering why I don't see 'form' in event tracking, only action and label. thanks! If I add forms to monster insights will this screw things up more?
Are you talking about Behavior > Events report? It takes some time for the data to appear there.
Unfortunately, I'm not aware what monster insights are, therefore I cannot foresee the consequences.
yes, events report in behavior and also real-time. According to your instructions I should see the event there after submitting the form, but i don't. Could it be it takes time as you said in your above reply? Not sure why you would see it immediately in this tutorial, though.
yes, events report in behavior and also real-time. According to your instructions I should see the event there after submitting the form, but i don't. Could it be it takes time as you said in your above reply? Not sure why you would see it immediately in this tutorial, though.
"Once the tag appears in the section of fired tags, head over to Google Analytics Real-time event reports." Did this, but not showing in event reports
Try the link I've pasted in the previous comment. Data should appear in real-time reports. If not, your configuration is incorrect or maybe some other mistake was done. See more https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/
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?
In may case, the listener if firing in Pageview from debug mode. There is nothing in event category in Google Analytics
Is just category invisible? Or the entire event is not visible in real-time reports?
there is no data under event category or event action
the GA Event - contact form submission - didn't fire on the page after I filled out the form
Dear Julius
I made another event on GA for another form (ID:1460). It tracks
I made another goal on GA for that new event. It doesn't works. I deactivated the goal and made a new one. Seems I followed all the steps. It doesn't track
Best Regards
Roberto, you need to give me more information. Saying "it doesn't track" will not help me to debug :)
What exactly does not track? Does the tag fire? Do you see anything in GA? What do you see in GA? Where are you looking in GA?
Any information is useful.
Hi Julius and thank you,
The new events are tracked:
1) category:Form Submission; action:Form ID: 1460 --> in 7 days they are 18 --> it is really counting manually emails received
2) category:Form Submission; action:Form ID: 84 --> in 7 days they are 1 --> really
In real time I can see these events
But the conversions are not tracked --> I created (3 times): new goal (under administration/view); custom goal; type event; category Form Submission; action Form ID: 1460 (Form ID: 84 for the other goal) --> verify this goal (1 week data) already given 0% conv rate...:-(
In real time an in reports I can't see these conversions after test form sent
Since the events are already in reports, I'd say that the problem is with your goal setup. Double check if you have entered event data in the goal settings correctly, every unnecessary space or letter may break things. When you create a goal, you can verify it by clicking the link "Verify this goal".
That way you can debug goal's settings much faster.
Amazing! Or stupid, after done..:-)
a blank space omitted after a colon has been the cause. Also "verify" has confirmed.
Thank you very much again
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.
I set up like you instruction and I test it worked perfectly but when I set up goal on GA the event is recorded but GOAL have not recorded yet.
Did I miss something sir, thanks alot.
If you see events in the report but no goal, then the problem is in your goal setup. Make sure that you entered the event name precisely. Also, you can use Goal Verification button to see if the goal is set up correctly.
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
Hey there, great post!
I only noticed one issue: when setting up the goal in GA Goal Details - Event Conditions:
Action Equals to Form ID:9 must be just Action Equals to 9
Cheers
Simon
Hey, why? It does not make sense. If you send "Form ID:9" as even action, it's not equal to 9.
Unless... a colon ":" causes some issues. I'll try removing ":" and see if that solves the issue.
I just checked, the colon does not make a difference. Share a link to the preview mode and I'll take a closer look.
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.
My listener at very first step is not working, the tag is fired on the pageview load, but when I submit the form it does not add anything to the datalayer.
I tried to do something like this to test the listener and still no response. DO you have any ideas?
document.addEventListener( 'wpcf7mailsent', function( event ) {
window.alert("hello world");
});
Hey, what is the link of that form?
Hi Julius.
Thank you for the tutorial, it has been very helpful!
I have weird issue going on and I would like to hear your opinion on that.
There are two websites with the same setup, CF7, GTM and Analytics.
First website works like a charm.
For example, in the time span of 7 days I can see 9 form submissions, 9 events in GA as well as 9 goal completions.
But on the other site I see 11 form submission, 5 Events and 5 Goal completions.
Just yesterday I tested this again and what is weirdest part, I saw 2 real time events and goals but today I only see 1.
Can you tell me what could be the reason for this issue?
Thank you!
Hi Julius,
Thank you for this terrific guide. I have managed to get the event tracking working and now my Goal set up isn't registering a conversion when I look at Real Time Conversions.
I have checked spellings, spaces but can not for the life of me see what is preventing this from working.
Your help would be greatly appreciated.
Thank you
His is very strange. More and more people are facing this problem but I cannot reproduce it.
Hey, do an experiment. Try not to add a colon ":" in the GA event and then remove them from goal settings. Let me know if that helped.
Thanks for this, extremely helpful. Site bookmarked. :)
Never thought of tracking my contact form and never cross my mind that it would be so straightforward. You made it easy to follow, Julius!
Thanks for sharing the article, were able to track the contact form 7 in my website.
Thank you so much. This saved me. I had tried several different methods to track the form submission and constantly ran into dead ends. This one finally worked for me. Thank you for writing such a comprehensive and easy to follow guide.
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.
Hello Julius, very helpful article, and I've set things up followed your guide. However I'm encountering a very interesting issue: the form submission can not be tracked or even noticed by GA if the submission is completed on a mobile device. I've tried with a lot of different devices, desktops/laptops are fine, but neither Apple devices nor Android devices can be tracked(form submission). Help me please, TIA!
When you land on a page of the form with the mobile device. Do you see yourself at all in GA real-time reports? I mean even pageviews.
Yes, when I reach the page that the form is on, I can see myself in real-time as a mobile visitor, direct. But after I submitted the form, the goal(event) is not triggered.
Can you share a link to the preview and debug mode? Also tell me the link which form should I submit.
The preview link is here
https://www.googletagmanager.com/start_preview/gtm?uiv2&id=GTM-TN2QV47>m_auth=ZTYh6gBVaWJMjlfa5o5E0A>m_preview=env-12>m_debug=x&url=https://www.emile-education.com/
And the form is on https://www.emile-education.com/trial-request/
Thank you very much!
GA Event fired properly to me (I emulated a mobile browser). When you submit a form with the mobile device, do you see the event in real-time reports? (not conversion but event).
Hi, I saw that you have done it properly, and GA caught your submission. I did see in events that everything worked when you tried, but I just did another test myself, and everything else (contact form, contact form 7, form) were fine, but the "successful submission" did not. We just noticed that the "phone number" column is the one that makes differences...We will change the "phone number" into required. Thank you very much!
Hi Julius,
after several months of useful tracking using this method, my GA doesn't receive conversions anymore.
Making some checking, I'm surprised that the the step 1.1 is failing: the event cf7listener can't be seen in GTM preview mode.
What can be happened?
Thanks a lot for your post. I have follow step by step and it works like a charm!
Just the only thing was change the dash for variables names.
Great job!
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.
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!
Thanks a million for this brilliant post. Very helpful and very easy to follow. I felt like an expert by the end of it!!! #respect
Thanks! There's a small typo in your article: you use "wpcfmailsent" instead of "wpcf7mailsent". Only matters when someone copies & pastes :)
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.
I struggled with a million plugins for 3 days and found your article! This is perfect! Thanks a lot
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.
Hey there, thanks for the step-by-step, very easy to follow!
I'm just having some issues when in the debug panel,
I've set up the conversion in Google Ads Conversions, pulled conversion IS and Conversion label into into Tag Config (Tag Type (Google Ads Conversion Tracking). Trigger set as Custom Event, event name: CF7 Submission and trigger fires on 'All Custom Events'
When I submit a form in preview mode, my cf7 listener fires on page load, but my CF7 Submission tag never fires after successful form submissions.
Would love some help with this one! Thanks so much.
Can you share a link to the page where I can take a look at that form?
[email protected][email protected]!? This makes zero sense. You say
"This solution works with AJAX-based forms (built with Contact Form 7) which means that if the page does not refreshed after the successful submission, then go ahead and continue reading."
But I'm using contact form 7, and the page refreshes after submission, and there ar no settings anywhere to turn this off??
How can then there be all these people here saying it works, when it doesn't? I'm using the latest wordpress with the latest version of CF7. There are no settings anywhere in my plugin about page refresh, I haven't done anything advanced or special to my website.
This is just f-ing stupid. Why in the name of god is onu of thu most common free plugins unable to do something as simple as send a DOM event properly? Why does my version work differently to everyon else's. Why do you need to b a programmer to add basic functionality to the most common contact form plugin. I am fed up to the back teeth with tech that is retarded and doesn't interface with anything and has been dsigned by morons who never interact with the real world. What am I supposed to do here?
Hey, 100% of your questions should be forwarded to the developers of the plugin, not me.
By default, CF7 never refreshes the page (and fires a DOM event). After reading this guide https://contactform7.com/redirecting-to-another-url-after-submissions/ I'd say that the redirect is caused by something else. Most likely, the theme you are using (or maybe other plugin) is doing that. But as I've mentioned, all the further questions you're asking are not GTM-related and should be forwarded to either CF7 creators or someone else who specializes in CF7 and WP. good luck
Jo Julius, just wanted to say this tutorial is the last tutorial i'll ever need:) Thanks!
Hey Julius
Thank you so much for the article. I am not sound in GTM but your articles always helping me to solve my GTM difficulties. Keep writing and thanks again.
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
My form id data is not reflecting in analytics. Please help me with
What does Data Layer Variable of form ID show to you in the preview and debug mode? Make sure you have entered the variable name correctly.
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.