3 Form Tracking Techniques with Google Tag Manager

[@MeasureSchool]

0:00 - Introduction 1:43 - Method #1: URL Success Page 1:52 - Create Goal in Google Analytics 3:52 - Testing: URL Success Page 4:50 - Method #2: Form Submit Trigger 5:15 - Set Up in GTM 11:04 - Create Goal in Google Analytics 14:17 - Method #3: Element Visibility Trigger 15:09 - Inspect Your Page with Chrome Developer Tools 16:26 - Set Up in GTM 16:26 - Create Trigger 19:11 - Create Tag 19:30 - Testing: Element Visibility Trigger 20:12 - Other Tracking Techniques

[@mengyumi9482]

Test yesauto com

[@NoumanSiraj]

Hi, I am struggling to learn how to make a event tag from visibility trigger in GA4.

[@Stefan-wz1wf]

After 5 Years still my NO. 1 Video to check if forms from my Clients doesn't work! Thank you so much!

[@sarahetefagh4945]

gosh!!! how can you teach so smoothly? you are an amazing teacher, no one can teach tag manager like u

[@bkpublicidade2333]

This video might be the best tutorial of how to track forms with Google Tag Manager. The example using the CSS Selector was very useful. Thank you for this content!

[@chandanshaw4667]

Thank You, Julian. that Visibility Trigger helps me a lot 🙏 👇 For GA4 STEP 1: Create a tag "GA4 | SEND MESSAGE" or anything you like. STEP 2: Set the configuration tag - GA4 ID. STEP 3: Set event name "form_send_message" or anything you like. STEP 4: Use the same process for "VISIBILITY Trigger" as shown in video.

[@Team-yp6ch]

There is no class "wpc7-mail-sent-ok" because Contact Form 7 update

[@chandanshaw4667]

@@Team-yp6ch Drop here your website URL containing the form page, will check.

[@mm.d6354]

Hi Julian, i was struggling with this... because of you i can now solve the problem in my clients website. Thanks!!!

[@Anarnam]

almost 2 years after release still 100% helpful! Thanks

[@sandipmaji]

I am using the Thank You page conversion tracking method just to avoid the error. Thank you for this wonderful tutorial. Cheers Mate!

[@MeasureSchool]

ha... just uploaded the new icons for channel members. Thanks for your continuous support! You are awesome

[@jero7420]

Thank you so much from Argentina!! I was looking for the third form you explained. Google should hire you. Thank youuu

[@MeasureSchool]

Thank you! haha

[@mahmoudmenefie5497]

Thanks alot for this video ... How can I use the third method only and still have a GA Goal setup?

[@martinm8720]

WOW absolutely brilliant! Thanks so much that last form setup is exactly what i was looking for thank you!

[@FayMirza2007]

Same here

[@sergio411]

AWESOME VIDEO!! If anyone is pulling hairs for not seeing Conversions on Real Time @ GA assign a same value for your event at GTM and at Conversion set up at GA instead of leaving it blank

[@NikhilMandrekar]

Great! As a follow-up video, you can show how a person can import the goal from GoogleAnalytics to GoogleAds (atleast for technique 1) so that they can track their conversions through their ads.

[@MeasureSchool]

Good idea, I'll try and make a video on this topic.

[@maximesanthonnax4411]

Hi Julian, thank you so much for all this information. You detail step by step how to properly set up our tracking and conversion, I really enjoy your content and I would like to thank you once more for all this amazing knowledge you offer !!!

[@spartanmarketing8648]

Excellent! We used method 3 to track a multi-step form within a pop-up! Thanks

[@nadinekleger7038]

Great video - helped me so much with my GTM issues. Advanced version: Is there a way to connect events and formsubmits? --> The basic idea is, I only want an event to fire when a form is successfully submitted - so I don't have any events tracking that did not end up in a submitted form. Any ideas? Anyone?

[@rafaelmarquezf]

Wow, that was outstanding. I have a question...... I am creating audiences now and I am using: If visited Page and I want to exclude people who filled out the form. I have form 3 type of form, where I had to use CSS code so I can not exclude people who visited the form completion. Any ideas? Thank you.

[@yumeileventhal3069]

Great tutorial! Question: At 7:05 mark, you mentioned a technique of opening up a new window without sending the form out. How do you do it exactly? I tried it with Command + Send, but that doesn't work.

[@GentzaBallesteros]

Thanks for your content Julian! I follow you since a while ago and it has helped me a lot. I wanted to ask you if the Method 2 is still working in 2020, because before i created the form trigger, i did a submission which is tracked by GTM in the Form variables (where you find 'Form ID', 'Form target', 'Form text', etc), but when i created the trigger you show in the video and made another submission, GTM doesn't recognizes it as a "gtm.formSubmit" hit, but only as another regular click (again, showing the Form's variables). What do you think is going wrong? i missed something? Thanks a lot again 😀

[@CBCChileOficial]

I have the same problem! Hope that Julian could assist with this

[@percypol30]

I have a similar problem... My GTM just doesnt recognize the form submission - in any of the 3 methods - when the submission is done with AJAX! So I set the form submission to "reload page" and now it works! Maybe this could be the same for you.

[@jasonfletcher8]

What do you do if your website wont open up a new tab? Anyway to see the form data layer before the new page loads? Or prevent the new page from loading? I tried command on my mac, there are just several CTA buttons that wont open a new tab with that pressed on our website.

[@the6ixvseverybody]

Hi there, what if I wanted to add tracking to the submit button of a form that I have on the main nav header of a website? I would like to be able to see the page where the user came from once they actually submit a form. How would I go about tracking in GTM and GA?

[@thinklocaldigital]

Hi Julian, what if the Form ID and Form Target fields are blank, what variable can I use to trigger the tag?

[@lukas______]

You can use form classes, assuming the field is indicative of that specific form (IE, no other form uses the specific name or numbers associated with that form). Just use whatever variable that won't change and stays the same. Form ID for my case changed every time so I used form classes and it worked.

[@thinklocaldigital]

@@lukas______ thanks Lucas

[@АнастасияКошпормак]

Thank You so much! I did not understand how to track the element visibility after submitting the form! You are the best teacher!

[@zanetaseilerova5703]

Hi! Great video thank very. much, it helped me a lot. There is one thing that is missing. I had to use the third version of the tag and the visibility values and I wanted to set up the goal in Analytics but I couldnt because you don't explain how to set up the third version. Please can you advise? When I am in Goal I have options as destination or event but neither one of them is giving me the option of the visibility action. Thanks a lot!!!!!!

[@bromtapes]

Great video, it just saved me hours of exploration, the third one worked out perfectly and this can work in 99% of cases. Thank you!

[@ryanloose2290]

That 3rd option really saved my ass. Your the man!!

[@KatharineMemole]

Very helpful! In particular the part on how to enable form variables so I could figure out what GTM has access to for triggering. Thank you!

[@reyesreyna8656]

Hey Julian, this is a great video and it got me up and running on Tag Manager. I used the third method for establishing a trigger. I'm not sure why the 2nd method did not work for me, nonetheless I am good now. But I do have a problem. I followed your video and for some reason I can not find the CSS node that established the connection to Tag Manager. It is "div.elementor-message-success". But now when I do a search in my Console....it's nowhere to be found. My concern is that if I need to modify...I can't. I'm just stumped. Anyway, just some feedback just in case the matter comes up in the future.

[@ErikHill1]

Great video. As always, thank you Julian!

[@ana-mariaparaschiv4909]

Great tutorial, Julian! Many, many thanks! I have one question: what if the Thank-you message doesn't have a new class when the form was successfully submitted? I still have the same class ("form") and a new html visible element on the page, which is a H5 = "Thank you" text. Is there a way to track this visible element? because the page is not reloading or something... Thanks in advance!

[@loutruong]

OMG i have the same question like you, have you find our the and for this ques, pls share it to men :D

[@ana-mariaparaschiv4909]

@@loutruong not yet, but promise to come back when I'll have it. Or, I'm still asking the dev to implement a Thank-you page, which would be so much easier for everything :))

[@percypol30]

I have a similar problem... My GTM just doesnt recognize the form submission - in any of the 3 methods - when the submission is done with AJAX! So I set the form submission to "reload page" and now it works! Maybe this could be the same for you.

[@SiriusTYT]

Best content i've seen so far about Google Ads! Thanks a lot :)

[@squarebyte9846]

Super thankful! Thanks for making this video

[@abdullahshakir9750]

Covering all aspects, It's fantastic

[@maialbaghdady8685]

Best educational video ever. Thank you for sharing these valuable info with us

[@iskramineva]

Thank you, the third option really helped a lot for a particular website.

[@seanhayden1365]

Thank-you Julian for this and all of the other tips

[@leonhon3890]

Hi Julian, I was wondering if in Squarespace I didnt have a formID when I view in google tag manager. How should I proceed? as I would like to link google tag manager and Google Analytics. Looking forward to hear from you soon. Leon

[@okpalachisom7279]

thanks man, you literally just saved me

[@jab183]

Is there a way to track form submissions that don't have the URL change after clicking submit by only using Google Analytics and not GTM? Any help is much appreciated!

[@marcobattaglia8540]

The element visibility was the only one which worked perfectly! Thanks Julian :) You are the best !

[@mcbuzzvideo]

Outstanding tutorial, as always! Thank you, Julian!

[@suiteCRMtutorials]

superb.. do you have a GA4 version too?

[@chinthakaarampath5188]

Hey Julian Thanks for this video. How can we setup tracking for forms which use the same page as the thank you page? So that the forms submissions are shown separately as conversions.

[@stefanraithel8612]

Hi, that Vid is awesome. The second way is the best for me. Problem is: if the user filled out wrong and he gets an error, the conversion fires to analytics anyway. That is a problem for my client. Form isn't on a specific page. thanks for the input guys

[@MeasureSchool]

yea. that's when you can customize even further and make your tracking more accurate. One method might work better other don't

[@KobayashiZeitguys]

Julian, once again you save the day!!!! Legend

[@veliyandeliyski6674]

Hi Julian, great video. However, I see that you set up the trigger to fire every time the "thank you" element appears in the viewport. After firing it, you scrolled to the top of the page, so the element was no longer in the viewport. Don't you think that it will fire once again when you scroll back to it? And if yes, how would you handle the option to submit the same form multiple times on the same page? Best regards and thank you in advance.

[@דוראלון-י6ר]

Great video. I have a question, I tried the way with the Tracking forms with the FormSubmit Trigger, but I have a problem. I use window 7 and when I press on ctrl button in my keyboard + send button in my page, a new window doesn't open. That's why I can not see the gtm.formSubmit. what do I need to do?

[@MeasureSchool]

you can try to submit then right away press the ESC key, which stops the browser. You could also try the Extension GTM Sonar

[@דוראלון-י6ר]

Thank you for your answer but unfortunately, the two ways don't work. When I send the form on my website there is a popup window with telling thank you and then refer the visitor to the homepage. Do you have another solution? Thank you.

[@alishaan8471]

Do we need CRM or DBMS in our website to use this? Please answer

[@thomasguns4485]

Technique nr 3 worked with me, thx!

[@Tarunsharma-tl7xg]

you are a good. teacher way of teaching is best.

[@ArchieJDChannel]

amazing once again! great thanks!!!

[@fariyakhan597]

Love watching your videos. If I am trying to track a multiple choice tracking and want data on each choice - any suggestions how I can do that in GA?

[@benjaminbarros4068]

Great tutorial! But why didn’t you just use the button trigger? Could it be used in that particular case?

[@ramesh190]

Great video. Can we use GTM for method 1 also or we need to use GA only? Thanks.

[@ghanuthakur2527]

Hi Julian.. Happy New Year. I need your help in form submission event tracking. I implemented your these techniques for contact form 7. But as I am using third party form like Form Crafts.. How can i start event tracking with gtm and form crafts

[@MeasureSchool]

no clue... maybe their documentation has an answer

[@ghanuthakur2527]

Hi Julian.. I have found that WPForms allows to integrate with GTM. Can you please create one video the form submission of WPForms with GTM. I really love the way you teach on video. Thanks

[@dmw4176]

How long does it keep form submissions in google analytics? When I try to view all form submissions say for instance for the week they are no longer there. Even after an hour if I click on real time the submissions no longer show up in google analytics. Any idea on this? DW

[@michaelbroadhurst2196]

Hi Julian, great video! How do you track a successful Divi form submission? I can't find which Element to track with the CSS Selector in GTM's triggers.

[@michaelbroadhurst2196]

From what I can see with Divi's forms is that there's a element with the success message which you can only see after successful submission. The thing that changes is a "style" element that makes that element an opacity = 1 to show it.

[@rashidarshad8343]

Hello Julian..This is a Very Useful Video..and your way of guiding or teaching is so Nice and easy..

[@tocourtial]

Hey Julian! very useful! congrats! I'm using Contact Form 7 (plugin WordPress) and to track a submission, I used the second technique (formSubmit tag with form ID). Also, I activate the validation check feature in case the user fills in the wrong email. However, when I test with an unvalid email, the tag still gets fire. Do you know how to solve this issue, other than the 3nd technique? Thank you! Also important: I have several forms accessible by different URL. When submitting a form, users stay on the page (this is how Contact Form 7 works)

[@MeasureSchool]

We actually have a video on contact Form 7 you can check out

[@shashankphatkure]

you are a genius! thanks very much

[@KelechiXV]

Thank you so much. Amazing Value in this video! Cant wait to see my campaigns Results!

[@MeasureSchool]

Great! Form tracking is truly powerful. Which technique did you go with?

[@KelechiXV]

@@MeasureSchool i went it the third one since i dont have a new URL. Thanks again!

[@socialhuman760]

excellent video. can you combine #1 and #3? in my site, after user clicks submit, they get sent to confirmation page, but there can be cases where an error message will get displayed if something went wrong with the back process.

[@MeasureSchool]

yes, absolutely

[@Zelielz1]

How does GTM recognize the form? When i set up the trigger it triggers when i visit the website and not when the form is submited...

[@xL1me]

0:14 - Intro 1:13 - Form 1 _ 2:08 - Setting up Goal GA 4:46 - Form 2 14:06 - Form 3 20:12 - Ending

[@MeasureSchool]

cheers... I put this into the description too

[@xL1me]

@@MeasureSchool , thanks for the videos. Very helpful :)

[@Voltagee101]

Hi Jullian, When I am not seeing any differential variables for my form attributes - my form ID is blank and form classes are all the same. I am using divi builder plugin.

[@Solonomade]

same problem here

[@EslamsamyismailelsayedBadr]

Thank you a lot I write: document.queryselector("div") and it tell me that " Uncaught TypeError: document.queryselector is not a function at :1:10 " even if this div already exist what should I do?

[@MeasureSchool]

querySelector not queryselector

[@adwordsbureaustrak811]

Hi Julian, at first what a great video and explanation as always! What if you use the third method and you have different forms on your website and the CSS selector is the same for each form. How do you track each form seperately? I tried exception triggers but it doesn't work. I would love to hear from you. Thank you in advance!

[@adwordsbureaustrak811]

I have found the answer myself. Within the visibility trigger it is possible to check the box "Some visibility events" so you can create a exception trigger. I hope this is useful for some of you!

[@ginoopantony7933]

Thanks Julian for this video. The third option really help me recently for a client website to track leads

[@khusravsultanov7333]

Hi Julian. Thanks for great videos. I just wanted to know that, is it possible to track form submit within one form and fire different conversion, depending on what user chose? I have a form and there are 3 options that the user can choose. Thanks in advance

[@MeasureSchool]

yes, you would just need to make Variables that pull out the correct value from the field and then use that variable in your trigger

[@khusravsultanov7333]

Thanks a lot :)

[@samiradsmedia1194]

Is there a way to clear the contents of the user-defined variable in DOM and cause that same variable to be read again ?

[@cryptovolta4253]

I have a custom pricing table I coded that is pulled into WP via an . The markup and js are in the same domain as the WP site so there are no cross-site-scripting issues. How would I get the click event from the table to "bubble up" to the parent page and then be passed to GA as if it were native to the page (not d)? Is this possible? Thanks again for the great vids!

[@MeasureSchool]

have a look at my video

[@cryptovolta4253]

@@MeasureSchool Great! I will do that. Thanks for the reply!

[@PeakDistrictSEO]

Thanks Julian, I watched this whole video... and it helped. I had a form where the elements weren't labelled in HTML so it was the 3rd option I needed. I have to watch it twice, as I hadn't got it set up right, but your video was super helpful. Quick question, Do you do a text version step by step. I think that would be a great way to support the videos you make. Thanks again

[@catsandlion6255]

great tutorials! thank you! is there a tutorial around where you show how to track ajax loaded pages? Can´t find anything helpful. example is the wix/ecwid store. all pages and urls are loaded with ajax. tracking the urls is not working.

[@emiliobelisle6140]

Great Video. I have a question if you are open to them: I have set goals and events in my GA to track lead form submissions. In the acquisition section, I can see which channels, sources, & mediums contributed to lead forms. I used 3rd party sites and what I can't see is, when I get the lead info in my CRM, what channel/source/medium the lead came from before they visited my site. Can I set an identifier with each lead form submission, which I could then match to my CRM and GA, so I can measure sales closing ratios by channel? (it is not an e-commerce site. Sales transactions are not captured on the website; only in my CRM when the file is marked as sold)

[@MeasureSchool]

yes, check out our video on lead source tracking

[@MeasureSchool]

or send in the ClientID with your form

[@AndryEspinoza]

Thanks! The third element help me a lot.

[@alfanazkiyadzikri6557]

thank's, awesome! i will to try this tutorial

[@juanmiguelgarciadavila4767]

Thanks for the information. I have a question how it works when the form of your website comes from an autoresponder script, i have noticed is almost impossible to read any kind of events

[@MeasureSchool]

not sure what you mean by autoresponder script

[@juanmiguelgarciadavila4767]

@@MeasureSchool What I meant was that I received a div class to install the form, I activated the all clicks but It is not tracking anything. The form was provided by a company that it´s called jump lead

[@matt_staton]

Will the second method only fire when the form is successfully submitted?

[@sahilaggarwal9962]

Hi Julian, Thanks for this superb video... Can you help me with a scenario in which - user has logged in / registered - after successfully login user will be shown 5 page form - how can we track such forms in which the URL also not gets changed..... Also user can logout on any step and can come back and will land with prefilled form

[@MeasureSchool]

if you watch the video you will see a technique on how to track a forms where the URL doesn't change

[@alanjosephproductions]

Very good and informative videos, well done! Do you know if there's anyway of tracking a form presented in an iFrame like SquareUp Appointments? The SquareUp Appointment web app the client has no access to the underlying HTML/JS code to add tag manager to and from what I can see in Square's interface there's no option to add it. Thoughts?

[@MeasureSchool]

we have a video on tracking, but if you don't have the ability to add any code to the itself, you are out of luck, I'm afraid

[@alanjosephproductions]

@@MeasureSchool I'll check out that video on the iFrame.

[@alanjosephproductions]

@@MeasureSchool I checked out that video and further confirmed the challenge I am having. Do you know if there's a heatmap option that could be used without requiring a tracking code installed in child/iFrame source but, would work if the iFrame was statically located?, i.e. no scrolling so, the "book" would always be located in the same X/Y relatively speaking.

[@victoriagirenok4352]

Thank you so much! So helpful

[@MeasureSchool]

Appreciate it Victoria!

[@abelmurua6980]

Any idea why when using recaptcha v3 Form Event its not triggering? I removed it and the tag gets fired but If I leave the ReCaptcha (elementor) it wont fire up. Not sure how to solve this

[@EstebanTerrazasMora]

Hi Julian, thanks for the video. in my site i have de facebook comment plugins, i try with the 3 options and i can´t track, any idea?

[@MeasureSchool]

how is the plugin implemented? Inspect the HTML and see if it's within an - if that's the case you are out of luck. Otherwise you could always try to track clicks as a proxy to form submits.

[@monkeybrothersgamingreview6774]

I have a question, after you hit save and refresh(while in preview), are you supposed to also hit Submit (blue button) in the upper right? Thank.s

[@MeasureSchool]

yes, once you are done testing you can Publish your changes through the Submit button. Then it will go live to all users.

[@krandaman1]

I like the last option, but is there more page-speed friendly way to listen for form submits through JS events rather than DOM changes?

[@MeasureSchool]

yes, the previous two options :)

[@paragrege373]

Hi I tried First and Second method both in first method my goal isn't showing in real time. In the second method gtmformsubmit button isn't coming please help me.how to do it

[@HelvetasSwitzerland]

This is fantastic! Thanks a lot.

[@MeasureSchool]

:)

[@tompelican]

This was an excellent tutorial for tracking form conversions. How would you track the conversion rate of a form? Maybe page view versus submit success?

[@MeasureSchool]

yes, thats a start. but you can always optimize and get closer to real numbers (eg. interaction of first form field / submissions)

[@tompelican]

MeasureSchool Thanks for the reply. So tracking if someone starts to fill out the form would give a better conversion indication over just a page view? That makes sense.

[@ivanrade]

The third option works best but only for desktop users. What am I doing wrong that it doesn't capture mobile users? Is it a problem with GTM or my website?

[@Outandaboutphill]

Hey Julian, can you go over how the element visibility works with GA4 properties? Thanks

[@MeasureSchool]

nothing different there. The trigger is in GTM, not in GA4. You just send the data to GA4

[@RobertoSilvaZuniga]

You are excellent tutor ;-)

[@MeasureSchool]

thanks

[@wheres_bears1378]

is there a way to track form submisions for say a directory member ? like in a classifeds

[@Shix92]

This is just perfect! Thank you for sharing this complete tutorial

[@VincentTravelStory]

for form submission trigger, how to use the check validation?

[@maszlaybernadett6693]

Dear Julian, Thanks for your super helpful video! I've searched all day but your video was the only real help. Thank you so much! :) And I have a question too... :) In the 3. method can I separate my contact forms? If I guess well, all of them use wpcf7-mail-sent-ok css. Thank you in advance! :)

[@MeasureSchool]

not sure what you mean by separate

[@brunooliquerque8261]

Hi Julian, Thank for explain. My debugging is not working. I've read google support but the function still doesn't work.

[@MeasureSchool]

sorry to hear.

[@zainabsalameh7881]

This is very helpful, thanks!

[@MeasureSchool]

Glad it was helpful!

[@AsAventurasdeGui]

Julian, this was a life-saver. Thanks!

[@gadelichka]

Hi there, i used the second method and the tag fired (its properly implemented) i also have added the event through GA but it didn’t show up in the reports when i tested it out. Any idea what”s wrong?

[@MeasureSchool]

So the tag fired, and did you see the GA event fires too? Can you install GA debugger, and check if the GA event are firing correctly?

[@gadelichka]

Measureschool it actually worked but it didnt show up immediately in the real time reports

[@puneetmahajan191]

hey, in my case on writing document.querySelector("div.wpc7-mail-sent-ok") in console, it returned "null". Can someone tell me what's the issue here? I have Contact form 3 case for my website.