• Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login
  • Courses
    • Courses
    • Course bundles
  • Blog
  • Services
  • Resources
    • Youtube channel
    • E-books and Guides
    • GTM Recipes
    • View All Resources
    • GTM Community
    • GA4 community
  • About
    • About
    • Contact
  • Login

December 8, 2022

Track Contact Form 7 with Google Tag Manager and GA4

Updated: December 8th, 2021

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 4 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 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 continue reading this blog post because today I’ll explain how Contact Form 7 event tracking with Google Tag Manager and Google Analytics 4 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)
  • Others are not giving 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!
  • Many of the guides are quite outdated (google-analytics-wise)

Interested? I hope that after reading the previous paragraph, you felt like this:

Dicaprio

 

Table of contents

+ Show table of contents +

  • Video tutorial
  • Things to keep in mind
  • Contact Form 7 DOM events
    • 1. Auto-Event Listener
    • 2. Variables and a Trigger
    • 3. Google Analytics 4 Event Tag
    • 4. Let’s test
    • 5. Register custom dimensions
    • 6. Configure a conversion in GA4
  • The most common mistakes setting this up
  • Final Words

 

Video tutorial

If you want to quickly learn how to track Contact Form 7 with Google Tag Manager and Google Analytics 4, here’s a video tutorial. However, if you get stuck somewhere or want to learn more technical details, continue reading this guide.

Looking for a tutorial related to Universal Analytics, then take a look here.

 

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 targeted at single-page forms. Multi-page forms fire events of successful form submissions after each step. Their tracking is not covered in this guide.

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 been completed successfully, but mail hasn’t been sent because there are fields with invalid input.
  • wpcf7spam — Fires when an AJAX form submission has been completed successfully, but mail hasn’t been sent because a possible spam activity has been detected.
  • wpcf7mailsent — Fires when an AJAX form submission has been completed successfully and mail has been sent.
  • wpcf7mailfailed — Fires when an AJAX form submission has been completed successfully, but it has failed in sending mail.
  • wpcf7submit — Fires when an AJAX form submission has been 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).

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

contact form 7 event tracking with Google Tag Manager

 

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 by clicking the Preview button at the top-right corner.

Then you will be asked to enter the URL of the page where your Contact Form 7 is located. Do that.

Now, you will be redirected to that website, and you will notice a widget appear at the bottom-right corner. It must say connected.

If it doesn’t, please read this guide. Now, it’s time to submit the form. Enter all the required fields and click SUBMIT (or whatever is the text of the form button). Once you see the form success message, go to the GTM preview mode’s browser tab (or window). Its URL contains tagassistant.google.com.

If everything worked smoothly, you should see a cf7submission event on the left side (just like in the screenshot below).

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 submissions, 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 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 the form submission and pass it to Google Analytics 4 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.

Custom Event trigger in GTM

Now, it’s the variables’ turn. Let’s take a closer look at what’s happening in the Data Layer after the cf7submission event occurred. In addition to event and formId, the 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 posts, 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, and in JavaScript, indexes start from 0 (0, 1, 2, 3, 4)). And finally, we choose the final key – the field’s value.

As a result, our Data Layer Variable name is response.3.value

dlv - form subject in Contact Form 7

Another variable that I would recommend creating 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).

dlv - formId

Save both variables and test them. The best way to do it is to refresh the Preview and Debug mode, refresh the page with Contact Form 7 and try submitting it again.

After that, click the cf7submission event once again and go to the 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 an 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 on how to pull data from the Data Layer.

 

3. Google Analytics 4 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 4 with the following settings. Also, if you are new to Google Analytics 4 event tracking, I would recommend reading this guide afterward.

Go to Tags > New > GA4 Event. I presume that you already know some Google Analytics 4 basics and you already have the Google Analytics 4 configuration tag created in the GTM container (if not, watch this video).

In that tag:

  • Select your existing GA4 configuration tag.
  • Enter the name of the event (the recommended value if generate_lead, but you can name it whatever you want)
  • Then click on Fields to Set and enter two parameters:
    • form_id and set its value to be the Data Layer variable (that returns the ID): {{dlv – formId}}
    • form_subject and set its value to be the Data Layer variable (that returns the ID): {{dlv – Form Subject}} (although, keep in mind that I used this just for demonstration purposes. In reality, it does not make a lot of sense to track form subjects in tools like GA. Data cardinality will be too high).
  • Set the tag to fire on the cf7submission Custom Event trigger.

google analytics 4 event tag - contact form 7

 

 

4. Let’s test

Save all changes and refresh the Preview and Debug mode (by clicking the PREVIEW button at the top-right corner of the GTM Interface). Then you will be redirected to the page where your Contact Form 7 is implemented. Submit it and look closely at what’s happening in the Preview mode tab (or window).

Expected result: Google Analytics 4 event tag must fire only when the form was submitted successfully (in other words, when the cf7submission event is present on the left side of the preview mode). But the Custom HTML tag must fire on any page (regardless of whether the form was submitted or not).

Once the tag appears in the section of fired tags, head over to the DebugView of Google Analytics 4 and try to find your device (in the top-left corner’s selector) if there is more than one.

Then you should start seeing events coming from your device (including the generate_lead). If you are facing some issues with DebugView, read this guide.

Click the event, and you will see the parameters that were sent together with it. Click any of those parameters to check the values.

But our job is not done yet. Even though you see custom parameters in the DebugView, you won’t see them in regular GA4 reports (or Analysis Hub). If you want to use/see them (and I bet you do), you must register them as custom definitions. Read the next chapter to learn more.

 

5. Register custom dimensions

This applies to any custom event parameter you send to Google Analytics 4. If you want to see/use them in things like Funnel reports, Free form exploration, see their reporting cards in standard reports, etc., you must register custom parameters in the GA interface.

In Google Analytics 4, go to Admin > Custom Definitions. Since we sent 2 custom parameters with the menu link click, we must register them here.

Click the Create Custom Dimensions button and then enter the name of the first parameter you sent. In my case, that is form_id. Save it. Make sure the scope of the dimension is Event.

Then register a second parameter (in my case, that was form_subject) and save it. By the way, I sometimes use the words “custom parameter” and “custom dimension” interchangeably. In general, custom metrics and custom dimensions are both grouped as custom parameters.

And now we wait. Within the next 24 hours, the custom parameters will start appearing in your Google Analytics 4 reports.

If you want to learn where to find the CF7 event data in GA reports, read this tutorial about event tracking in GA4.

 

6. Configure a conversion in GA4

The last step of the Contact Form 7 event tracking: create a conversion in Google Analytics 4. This is not necessary, but if you want to treat every form submission as an important interaction, you should do it.

I assume you want to treat every generate_lead event as a conversion. You should log in to your Google Analytics 4 interface and go to Admin > Conversions.

Then click New conversion event and enter generate_lead. Hit save.

Then submit the Contact Form 7 once again and check the GA4 DebugView. From this moment, the generate_lead event will be displayed with a green icon. This means that GA4 now treats this as a conversion.

If you want GA4 to track conversions ONLY of certain Contact Form 7 forms (and not all generate_lead events), read this chapter on a feature called “Create event” in GA4). If you want to learn where to find the conversion data in GA4 reports, read this part.

 

The most common mistakes setting this up

If you haven’t worked a lot with Google Tag Manager before, some parts of this guide might be confusing. If you have followed all the steps of this blog post and something is still not working, here are the most common mistakes that people make.

Hopefully, some of them will apply to your case, and you can resolve the issue.

 

Mistake #1. Your form is not a Contact Form 7

Sometimes, WordPress websites use multiple form plugins. Even if you have installed CF7, maybe the form that you’re dealing with is using a different plugin.

The easiest way to check whether your form is Contact Form 7 is to right-click on any form field.

Then check the code of that form field. If you see something related to wpcf7, that’s a Contact Form 7. If not, then this blog post will not help you. Read another guide instead.

 

 

Mistake #2. Misconfigured triggers

When you configure everything, here is how the final setup must look:

  • The Custom HTML tag must use ONLY the All Pages trigger. DO NOT add the Custom Event trigger to the Custom HTML tag.
    contact form 7 event tracking with Google Tag Manager
  • Google Analytics 4 event tag must have only the Custom Event trigger.
  • Check if you have correctly entered the event name in the Custom Event trigger. It must be exactly cf7submission. If you are not sure what I am talking about, revisit step #2 of this guide.
    Custom Event trigger in GTM

 

Mistake #3. If you cannot see the cf7submission event in the preview mode

This is crucial. The cf7submission event MUST appear in the preview mode. If it does not happen, the setup will not work.

There are two main reasons why you don’t see it in the preview mode:

  • Your form is not a Contact Form 7
  • You have added a tag, but it does not fire on the Pageview (a.k.a. Container Loaded) in the preview mode.
    • Click the Container Loaded event in the preview mode and check if your Custom HTML tag has fired. If it hasn’t, refresh the preview mode and start again.
    • Also, check if the trigger of that Custom HTML is All Pages (because it should be).

 

Mistake #4. Your Contact Form 7 refreshes the page after it is submitted

The solution that is described in this blog post applies ONLY if the form submission does not refresh the page. The form success message should appear without reloading or redirecting.

If the form reloads the page, consult your developers to fix it, or you can refer to CF7’s website. Here is an article from the CF7 blog. If the link is not working, try to google for something like “Contact form 7 AJAX is not working”.

Other CF7 + GTM guides online rely on AJAX too (when the form does not reload the page).

Looking for other form-tracking alternatives? Read this.

 

Contact form 7 event tracking: Final Words

And there you have it. In this blog post, I’ve explained how to track single-page AJAX-based Contact Form 7 with Google Tag Manager and Google Analytics 4. The process is similar to another WordPress Plugin, Gravity Form:

  • Implement a custom auto-event listener that listens to successful form submissions.
  • Create variables and a custom trigger.
  • Set up a Google Analytics Analytics event tag that sends the event of a successful form submission to Google
  • Register parameters as custom dimensions/definitions
  • Finally, configure a conversion (optional)

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 form ID. Therefore you can track submissions by updating the custom cf7submission trigger. Set it to fire when form ID equals 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: how to track form submissions with Google Tag Manager. I bet you’ll find something useful.

 

Julius Fedorovicius
In Form Tracking Google Tag Manager Tips
63 COMMENTS
John Kramer
  • Mar 20 2018
  • Reply

Another great post!! thank you Julius

    Julius Fed
    • Mar 21 2018
    • Reply

    Thank you, John!

deepika
  • Mar 21 2018
  • Reply

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?

    Julius Fed
    • Mar 21 2018
    • Reply

    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"

Roberto
  • May 14 2018
  • Reply

Very nice. Thanks :-)

Kelsey
  • May 21 2018
  • Reply

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?

    Julius Fed
    • May 21 2018
    • Reply

    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?

Julius Fed (Fedorovicius)
  • Jun 15 2018
  • Reply

I just checked, the colon does not make a difference. Share a link to the preview mode and I'll take a closer look.

Mansoor
  • Aug 30 2018
  • Reply

Exactly I am having same error. could you please post final solution or you could mail me at shaikhmansoor69 [ at ] gmail.com

Thanks you.

    Julius Fedorovicius
    • Aug 30 2018
    • Reply

    There might be many solutions. Please read this guide first https://www.analyticsmania.com/post/google-analytics-real-time-reports-not-working/

      mansoor
      • Aug 30 2018
      • Reply

      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.

        Julius Fedorovicius
        • Aug 30 2018
        • Reply

        Yeah, that's totally fine.

Rebecca Smith
  • Sep 6 2018
  • Reply

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.

    Julius Fedorovicius
    • Sep 6 2018
    • Reply

    Hey, does the cf7submission event appear in GTM Preview and Debug mode (on its left side)?

Steve Peron
  • Oct 22 2018
  • Reply

Just wanted to say thanks! I have been looking for a GTM solution in contact form 7 for a long time. Well done!

James Cormack
  • Jan 3 2019
  • Reply

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}}".

Rajnikant
  • Apr 12 2019
  • Reply

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)?

    Julius Fedorovicius
    • Apr 12 2019
    • Reply

    Hi, create two separate data layer variables

Johan
  • Apr 23 2019
  • Reply

Thank you!! This was very easy to follow.

David
  • May 8 2019
  • Reply

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?

    Julius Fedorovicius
    • May 8 2019
    • Reply

    Yes, set the conversion tag to fire only once per page.

Cesare
  • Nov 1 2019
  • Reply

very well explained. really. thanks a lot.

Alex
  • Nov 6 2019
  • Reply

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?

    Julius Fedorovicius
    • Nov 6 2019
    • Reply

    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

Alex
  • Nov 6 2019
  • Reply

Julius, form redirects the user to booking engine (another domain), right.
Your recipe will not work in this case?

    Julius Fedorovicius
    • Nov 6 2019
    • Reply

    Yes, I have mentioned this at the beginning of the blog post.

Pierre
  • Jan 27 2020
  • Reply

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 !

    Julius Fedorovicius
    • Feb 3 2020
    • Reply

    I don't have. However, you can track the appearance of the popup with the help of Element Visibility trigger.

Vibhu
  • Jul 14 2020
  • Reply

Thank you so much for this wonderful post. It helped me a lot.

Tom Mercik
  • Aug 10 2020
  • Reply

Greetings Julius!
I got as far as #1 (Testing Listener) and the event did not appear.
Checked all the comments and can verify that everything fired (via Preview and Debug mode), so I'm left with one last possibility: my CF7 forms do have a Thank You followup page.
Your video indicates that this CF7 method won't work if that's the case ie a Thank You page followup.
What method will work? Based on previous attempts with "Thank You Page Tracking with Google Tag Manager", that didn't work for me either.
I'm stumped. Any assistance or directions would be most appreciated.
THX in advance.
Tom

    Julius
    • Aug 10 2020
    • Reply

    Hi,I see that you have the access to my GTM course for beginners. Have you tried all the form methods explained there? Things like element visibility might be an option.

    However, that might require css selector knowledge. My intermediate/advanced gtm course has a whole module on that.

Tom Mercik
  • Aug 12 2020
  • Reply

THX for the feedback!
I'll go through those various forms again (each time has been a learning experience) and I'll delve into "element visibility" to get a better appreciation of what that might entail.

As for "int/adv gtm course" - not sure I've progressed enough to move up a level or two.

THX again,
Tom

Eric
  • Oct 2 2020
  • Reply

Thank you very much for the tutorial! I was really struggling to set the tracking correctly and the video + guide are so well done!

Jerome
  • Dec 10 2020
  • Reply

Hi Julius, thanks great work and I love your videos.

One small question, I'm using GA4 so slightly different but your tutorial is so clear that it works perfectly fine.

However, is there a way to associate a name to a form id ? Indeed, I'd rather have "Newsletters_homepage" than "form id 40" in my report.

Thanks if you have any tips for that,

Jerome

    Julius
    • Dec 10 2020
    • Reply

    You can use whatever is in the data layer. If your list of forms is finite, you can use a lookup table variable to map IDs to form names

Paula Rillo
  • Feb 15 2021
  • Reply

Hi Julius, thank you so much for this guide I love your content.

Have your ever had issues with wpcf7mailsent not being precise?

I followed this guide on 9 different accounts (wordpress landing pages) and the goals counts doens't check with the database.
In my case I use on all my wordpress, Contact Form 7 Database Addon – CFDB7 plugin and the goals report won't show the same numbers even testing with Flamingo.

María
  • Feb 26 2021
  • Reply

Hi Julius, thanks for this.
Could you please let us know what would be the auto-event listener for Gravity Forms? (For GA4).
Thanks again for your help.
María

    Julius
    • Feb 26 2021
    • Reply

    The listener does not care whether it's GA4, UA, of something else. Use the search feature on my blog and you will finf the gravity form for UA. Adapt it to work with GA4.

Mubin
  • Mar 1 2021
  • Reply

Thanks for this. I'm struggling to create the goal in GA to fire. Can you please help? The event trigger is firing in GA but my goal (conversion) isn't. I feel it's something to do with the Action section. I selected Actions Equals to > form id {{dLv - formId}} (that's the same as what's in my GTM.

    Mubin
    • Mar 5 2021
    • Reply

    Any update on this Julius? I need to create separate goals for different forms so need to identify each by the action I assume (form Id).

Jackson McHugh
  • Mar 12 2021
  • Reply

Hi Julius,

I am pulling my hair out trying to get this to work. Whenever I set up the tag initially with the trigger 'all pages' it just fires every single time I load the page and does not show up as a separate event in the preview mode. In other tutorials I have tried I can not get the trigger to work based on wpcf7submit OR wpcf7mailsent. Is this a problem with how I have set up GTM in the first place?

Kim
  • Mar 15 2021
  • Reply

Really helpful post, thank you very much. The only trouble I had was with item 5. Register custom dimensions, as I don't appear to have the option to manage custom definitions. Nonetheless, this has been really helpful in helping me set up event tracking with GA4, and I'm sure I'll refer back to it again in the future!

    Julius
    • Mar 15 2021
    • Reply

    Custom dimensions are now moved to a separate section in GA4. Keep looking for them in the UI.

Monchalee
  • Mar 31 2021
  • Reply

Aloha Julius. Thank you so much for this; it all worked perfectly.

Once this has been set up properly in GTM and GA4, is there a way to assign a label to the form ID that is more meaningful when I look at the data in GA?

For example, I don't want to know how many "form 9s" were submitted, but I want to know how many "meeting requests" were submitted.

rameshwar pawar
  • Nov 1 2021
  • Reply

i want all my form data inputs giv me like name , subject , message and all pls give how to all data event to show analytics using gtm..
i try this video steps but its show only parameter in form id not show in inputs..pls help

    Julius Fedorovicius
    • Nov 5 2021
    • Reply

    The code should provide all the inputs too. If it does not, then something is wrong in the form configuration (not sure what)

rameshwar pawar
  • Nov 1 2021
  • Reply

how to show all input value in analytics like form subject form messege and all

    Julius Fedorovicius
    • Nov 1 2021
    • Reply

    create data layer variables for all values you want to get and then include those variables in some event parameter, e.g. form_submission_data.

    Remember, you cannot include personal information in such events. GA terms do not allow that.

cassio
  • Mar 14 2022
  • Reply

Hello how are you? Very good content. Implementation was very easy. My only question is whether I can categorize the form? For example, I know that the IDxxx form is for news, but the IDyyy is for forms in general, but how can I change the format that appears in GA? If a form is sent in IDyyy, News will appear

George Cotter
  • Apr 11 2022
  • Reply

Hi there,

Great post and got the form id pulling in fine. We use several lead forms on 1 website and currently in UA Analytics can track each form as an individual goal to see performance.

Can I seperate each form ID to report a different event? Or drill down on the generate_lead event to view form ids?

james
  • Apr 25 2022
  • Reply

hi , I follow all the steps and succefully done , but ı want to track the cf7 event in my subdomain too. what should ı do ? by the way my subdomain enclude my tag manager container code and the cookie domain in automatic.

Mike
  • Apr 26 2022
  • Reply

Nice post Julisus <3

I have a quest about Google Ads Conversion tracking with GTM for the contact form 7, and tracking multi forms on the web, not just one form, how to separate each conversion for each form?

Any ideas for my case?

Thanks,

    Melika
    • Sep 1 2022
    • Reply

    I have the same question,
    Did you find any solution?

Melika
  • Sep 1 2022
  • Reply

Hi Julius,
Hope you're doing well,

I have 2 contact forms,
And want to track submissions.

How can I separate them in Google Analytics GA4?

I just have one generate_lead.

    Julius Fedorovicius
    • Sep 1 2022
    • Reply

    I have already explained that in the blog, use form_id dimension

Antonio M
  • Sep 23 2022
  • Reply

Hi Julius,

Thank you for incredible explaining.

I have a question that i cannot figure out by myself.

For example, my "your-subject" field is a drop down menu, that users can choose what service they would like to have.
I want to create different revenue value defending on witch subject the user has choosen in that menu.

For exemple, they choose a certain subject from the menu and a certain revenue is triggered. This way I could trigger different values in revenue for different subjects choosen.

Kindly
Antonio

Andy Miller
  • Oct 7 2022
  • Reply

Julius great post indeed, a quick question
1. What is we want the form data to be attributed regarding lead source, i.e. we need to capture the Lead Source when form is submitted i.e if its Organic website, PPC Ads, Social Media, etc

How can this parameter be tracked when the form is submitted and that attribute available to further understand which channel is working better as a lead source.

Sean
  • Nov 3 2022
  • Reply

I've tried looking though the code some and I keep getting this:
{
event: "cf7submission",
gtm: {
uniqueEventId: 9,
start: 1667495841328,
allowlist: undefined,
blocklist: undefined,
whitelist: undefined,
blacklist: undefined,
scrollThreshold: 90,
scrollUnits: "percent",
scrollDirection: "vertical",
triggers: "7",
priorityId: 3
},
tagTypeBlacklist: undefined,
formId: 450,
response: [
{name: "first-name", value: "Blah"},
{name: "last-name", value: "Blamberton"},
{name: "your-email", value: "[email protected]"},
{name: "phone-number", value: "8645662804"},
{name: "your-interest", value: "Virtual Visit"},
{name: "your-time", value: "Morning"},
{name: "your-preferred-day", value: "Monday"},
{name: "your-search-medium", value: "Search Engine"},
{name: "your-message", value: "Test form submission"}
]
}

I've looked around some places to see if they could identify it and I'm stumped. Any ideas?

    Julius Fedorovicius
    • Nov 4 2022
    • Reply

    Sorry, I don't understand the question. Everything looks ok with your data layer. Use data layer variable to fetch the values you need.

      Sean
      • Nov 11 2022
      • Reply

      Sorry, the rest of the post didn't get copied in. I followed the setup and double and triple checked that I had everything in correctly but I'm getting at least part of the data layer returning tagTypeBlacklist: undefined

      It doesn't look like the response you are getting and was wondering what might make the page return that response.

Marko
  • Nov 21 2022
  • Reply

I have used your setup and it works! Just i have a problem that we use cf7 for ecommerce tracking and i need some value that will be transaction id.

If I check data of submitted forms with flamingo I can see serial_number value. But I can't find a way to pull that value in datalayer.

Or if you have any other ideas what could i use as transaction id?

Roberto
  • Dec 14 2022
  • Reply

Going crazy because I can track CF7 with your method on some WP sites but I'm not able to do the same on another WP site configured with the same configuration (gtm container is the same for every site)

In GTM preview mode, we can't see cfsubmission's event (CF7 listener) after form submission

The data layer is this one and it is not "listening"

{
developer_id: {dMWZhNz: true},
gtm: {
uniqueEventId: 18,
start: 1671027661355,
allowlist: undefined,
blocklist: undefined,
whitelist: undefined,
blacklist: undefined
},
event: "gtm.load",
ads_data_redaction: false,
siteID: 0,
siteName: "",
pageTitle: "Test amm. Mag - Università Europea di Roma",
pagePostType: "page",
pagePostType2: "single-page",
pagePostAuthor: "Matteo",
browserName: "Firefox",
browserVersion: "107.0",
browserEngineName: "Gecko",
browserEngineVersion: "107.0",
osName: "OS X",
osVersion: "10.13",
deviceType: "desktop",
deviceManufacturer: "Apple",
deviceModel: "Macintosh",
postID: 24130,
tagTypeBlacklist: undefined,
mediaType: "youtube"
}

Manuel
  • Dec 28 2022
  • Reply

Thanks! That was a piece of work for me but without your help out of reach.

Leave a comment Cancel reply

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

 

Hi, I'm Julius Fedorovicius and I'm here to help you learn Google Tag Manager and Google Analytics. Join thousands of other digital marketers and digital analysts in this exciting journey. Read more
Analytics Mania
  • Google Tag Manager Courses
  • Google Tag Manager Recipes
  • Google Tag Manager Resources
  • Google Tag Manager Community
  • Login to courses
Follow Analytics Mania
  • Subscribe to newsletter
Recent Posts
  • Introduction to Google Tag Manager Server-side Tagging
  • 3 Ways to Pull Data from Data Layer with Google Tag Manager
  • Cannot See the Google Tag Manager Option in Google Ads Conversion?
Analytics Mania - Google Tag Manager and Google Analytics Blog | Privacy Policy
Manage Cookie Settings