/tagmanager/community?hl=en
/tagmanager/community?hl=en
12/16/13
Original Poster
Google user

Not firing gtm.formSubmit

Hello all,
 
Been trying to setup a form submission tracking on a friends website using GTM.
 
Managed to implement tracking on link clicks just fine, and porting it to GA seems to work fine aswell.
 
I am however having issues with gtm.formSubmit who dosn't seem to fire or get picked up by the listener whenever I submit a contact form on the site with the preview&debug GTM feature.
 
My settings are as follows.
 
Form Submit Listener, set to run on all pages(single page website, so no problem).
 
 
My GA Submit Form Event tag is setup to fire on gtm.formSubmit (event being equal or containes, tried both).
{{event}} contains/equal gtm.formSubmit
 
Ive also set these values:
Category is set to: ''Form-Submit
Action is set to: "Send Besked"
 
 
The form in question can be found at the bottom of the page on http://www.lydskolen.dk
 
 
Thanks advance for your help and if there is anything that need clearification then please do tell, I'm a analytics and GTM rookie.
 
 
/Mike
Community content may not be verified or up-to-date. Learn more.
All Replies (7)
claudia_k
12/17/13
claudia_k
Hi Mike,

Your form is submitted via JavaScript. This JavaScript blocks the actual submission of the form which is intended - after all you do not really want to reload the page but submit the data via JavaScript. Unfortunately this has the side effect that it also blocks the GTM form submit listener from learning that a form was submitted.

So you need to tell GTM yourself that a form was submitted. In your example the easiest way to do might be to change yur submit handler - but please do so only if you know a it of JavaScript and check what you are doing...
In the file http://www.lydskolen.dk/js/custom.js, around line 860 you find your submit handler - this is the code that takes care of submitting the form and handling what happens when the server response comes back. In the part thta is executed when the submission was successfull add code to tell GTM that the form was submitted successfully. Example:
dataLayer.push({
  'event' : 'contact-form-submitted'
});

Then use the rule {{event}} equals 'contact-form-submitted' as rule to trigger your tracking tag (instead of {{event}} equals 'gtm.formsubmit').

Note that the macros for {{element}}, {{element id}}, {{element classes}} etc. will be empty, so you cannot use them in your tag.

Good luck

Claudia
12/17/13
Original Poster
Google user
Hi Claudia,
 
Thanks for the input, I was however hoping for a solution that does not involve editing content/scripts on the site, is this possible?
I tried changing the event listener to a click with the id of the Submit-button, but I'm guessing the problem is the same.
Are there any alternatives to actually editing code?
(the 'smart' thing about GTM imo is that editing site code, untill now, wasn't necessary except for adding the GTM snippet)
 
In fix you mentioned you give me the line
'dataLayer.push({
'event' : 'contact-form-submitted'
});'
 
(thanks btw for a full example), but could I also please ask you to tell me where you would implement it in the particular javascript exactly? My experience with javascripting is close to null.
 
Thanks in advance
claudia_k
12/22/13
claudia_k
Hi there,

Sorry for the late reply. Triggering the tag on a rule with these conditions:
{{event}} equals gtm.elemClick 
and 
{{element ID}} equals submit 
should work - at least it did fine in my tests with my own GTM account  (sorry for the test submissions...). So maybe try again. But keep in mind that triggering the tag on the button click has the negative effect that it would also be triggered for unsuccessful submits - I am not sure whether you would want to have that or not. 

If you want to tell GTM manually that the form was submitted you need to change the code in the submitHandler. This is in file custom.js around line 870 (see screenshot)
Directly after the opening curly bracket of the first condition (if data == 'OK) add the push to the dataLayer. Example:
if(data == 'OK') {
  dataLayer.push({
    'event' : 'contact-form-submitted'
  });
  //... the existing code

Then use the rule {{event}} equals contact-form-submitted to trigger your tracking tag. Keep in mind that in thisc ase the macros for {{element id}}, {{element classes}} and similar are empty, so you cannot use them in your tag.

Good luck

Claudia


12/23/13
Original Poster
Google user
Thanks alot for your help!
Tomáš Sokol90
3/18/15
Tomáš Sokol90
Hi there,

reading the post above, i guess i have similar problem on my site : www.vyhrajstrechu.sk - it is a microsite for leads. 
When i submit registration, page only scrolls down but no form event is generated in GTM.

I'd like to track only real submissions, not all clicks.

Can you help me with instructions? I am just getting started with GTM.

Appreciate any help

Tomas
Google user
5/22/15
Google user
Hi Claudia,

Thanks for your answer. I also have a similar issue of not firing gtm.formSubmit event. Here is my screen shot of the html code for the submit botton. Do you suggest I could use the same way to solve this problem?

Many thanks ~


GB_SEO
6/7/17
GB_SEO
Hi Claudia,

i'm using your solution to try to Decorate the form's URL in a cross link environment but the URL variable is not passed on submit via javascript invoicing the dataLayer manually in the script.
If i remove the clickedElementUrl variabile from the trigger, the Analytics Tag Decorate is fired on dataLayer.push but it doesn't Decorate the URL.
My configuration:
Variable clickedElementURL: Auto-Event Variable, Variable Type: Element URL, Componente Type: Full URL.
Trigger formSubmission: Custom Event, Event name: formSubmit, Fires on: event equals formSubmit, Page URL http://www.source-url.com, clickedElementURL http://www.dest-url.com
Tag crossDomainFormSubmission: Universal Analytics, Type: Decorate Form, Firse on: formSubmission.

<script type="text/javascript">
$(document).ready(function() {
$('#send').click(function() {
dataLayer.push({
'event': 'formSubmit'
});
   $('#form').submit();
});
});
</script>

G.
Were these replies helpful?
How can we improve them?
 
This question is locked and replying has been disabled. Still have questions? Ask the Help Community.

Badges

Some community members might have badges that indicate their identity or level of participation in a community.

 
Expert - Google Employee — Googler guides and community managers
 
Expert - Community Specialist — Google partners who share their expertise
 
Expert - Gold — Trusted members who are knowledgeable and active contributors
 
Expert - Platinum — Seasoned members who contribute beyond providing help through mentoring, creating content, and more
 
Expert - Alumni — Past members who are no longer active, but were previously recognized for their helpfulness
 
Expert - Silver — New members who are developing their product knowledge
Community content may not be verified or up-to-date. Learn more.

Levels

Member levels indicate a user's level of participation in a forum. The greater the participation, the higher the level. Everyone starts at level 1 and can rise to level 10. These activities can increase your level in a forum:

  • Post an answer.
  • Having your answer selected as the best answer.
  • Having your post rated as helpful.
  • Vote up a post.
  • Correctly mark a topic or post as abuse.

Having a post marked and removed as abuse will slow a user's advance in levels.

View profile in forum?

To view this member's profile, you need to leave the current Help page.

Report abuse in forum?

This comment originated in the Google Product Forum. To report abuse, you need to leave the current Help page.

Reply in forum?

This comment originated in the Google Product Forum. To reply, you need to leave the current Help page.