Sign up free
Categories: Adword Conversion TrackingGoogle Analytics Event TrackingGoogle Tag Manager (GTM)

Gravity Form Event Tracking Via Tag Manager

in this blog, you will see how to add tracking in WordPress Gravity Form via Google Tag Manager (GTM)

Gravity Form Tracking

We can track gravity form by using google analytics event tracking and conversion tracking code in 2 different Ways.

  1. By using wp-admin.
  2. By Using Tag Manager.

Here we will see both ways. It is entirely up to you, whichever options do you like you can go with that.

Gravity form Event Tracking by using wp-admin:

Steps to add Tracking Code using wp-admin:

  • Login to wp-admin.
  • Click on Forms(in left  menu)
  • Click on respective form where you want to add Tracking Code.
  • Click on Confirmation(setting->confirmation).
  • Click on TEXT option (Right-top of confirmation message box).
  • Add your event tracking or conversion tracking pixel code after message.
  • Check the checkbox of  ‘Disable auto formatting‘ .
  • Click on Save Confirmation Button.
Gravity Form Tracking Code Instruction

Steps to add Tracking Code using Tag Manager (GTM):

By using Google Tag manager you can add any type of HTML code on your website without editing main source code of your webpage of your website. Only you have to add GTM Container code on your website.

I know you will be amazed by GTM because of it’s extensive feature. but here we are not going to discuss on GTM features/options. We will focus on how to add Tracking code on Gravity form using GTM.

There are 2 more ways to add tracking code by GTM.

  1. Add tracking code on default GTM form submit event (i.e gtm.formSubmit listener):
    By using this you can easily add your tracking code , just you have to enable some options in variables and create some Tags and triggers. But there is some problem with this, that it will track each form submission whether it is successful form submission or not.
    That is why I would suggest to go with Custom HTML code.
  2. Add tracking code by using Custom HTML Code: 
    Follow the below steps to add tracking code by using custom HTML code, This will help you to track successful form submission.

Steps to add tracking code by using custom code in GTM:

1) Create following new custom HTML tag, to push Gravity form states.
Tag Name: Gravity Form Custom Code
Configure Tag: Custom HTML Tag
Trigger on : DOM Ready

Gravity Form Event Tracking Custom Code

Custom Code:

 
<script>
  if(jQuery('.gform_confirmation_message').is(":visible"))/* page load */
  {
    var formId=jQuery('.gform_confirmation_message').attr('id').replace('gform_confirmation_message_','');
    dataLayer.push({'event':'gform.submit.success','formId':formId});
  }
  jQuery(document).on('submit','form[id*="gform_"]',function(){/* for Ajax Load */
  clearInterval(window.gsetInt);
    var formId=jQuery(this).attr('id').replace('gform_','');
    jQuery(this).find('.gfield').removeClass('gfield gfield_error ')
    window.gsetInt=setInterval(function(){
      if(jQuery('.gform_confirmation_message_'+formId+'.gforms_confirmation_message,.gform_confirmation_message_'+formId+'.gform_confirmation_message').is(":visible"))
      {
        clearInterval(window.gsetInt);
        dataLayer.push({'event':'gform.submit.success','formId':formId});
      }
      if(jQuery('#gform_fields_'+formId+' .gfield_error').is(":visible"))
      {
        clearInterval(window.gsetInt);
        dataLayer.push({'event':'gform.submit.error','formId':formId});
      }
    },200);
  });
</script>

2) Create Trigger:
Trigger Name: DOM Ready
Choose Event: Page View
Trigger Type: DOM Ready
Fire On: All Pages

DOM Ready Trigger

3) Create Trigger For Success Form Submission: 
Tigger Name: gform.submit.success
Event Name: gform.submit.success

Gravity Form Successful Submission Event

4) Create Variable to get form ID:
Variable Name: formId
Choose Type: Data Layer Variable
Data Layer Variable Name: formId

Form ID DataLayer Variable

5) Create Lookup table variable to get Custom Label for Gravity form
Variable Name: Custom Label for Gravity Form
Choose Type: Lookup Table
Input Variable: {{formId}}
Lookup Table: As per Below Image

Lookup Table for Custom Label for Gravity form

6) Create Event Tracking Tag For Gravity Form
Tag Name: Event Tracking Tag For Gravity Form
Trigger on: gform.submit.success
Label variable: {{Custom Label for Gravity Form}}

Event Tracking Tag For Gravity Form

Result:

Gravity Form - Event Tracking Sample

Likewise you can add Conversion Tracking Code and Change Conversion Label by using Lookup table Variable

Note: As I have tested, this code is working fine in almost all cases. Still you can modify the custom code, if it is not matching your requirement.
You can go for some of other my blogs, which might be useful for you. Also I would love to hear from you about some suggestions and help . You can contact me via contact us form or use blog comment form.

Notes On Click

Share
Published by
Notes On Click
Tags: Adword conversion trackingevent trackinggoogle analyticsGoogle Tag ManagerGravity formGTMWordpress
8 years ago

Recent Posts

  • Adword Conversion Tracking
  • Google Adwords Remarketing

Conversion and Remaketing code in BigCommerce

In this blog, you will see how to add Adwords Conversion Tracking and Remarkeing Code in BigCommerce.BigCommerce is one of…

7 years ago
  • Google Analytics and Ecommerce Tracking

Ecommerce Tracking in OpenCart 2.3

Around 6 months back, I had published an article on “How to add GA e-commerce tracking in Opencart“. I am really thankful…

8 years ago
  • Google Analytics and Ecommerce Tracking

Google Analytics Definition and Common Terms

 If you have gone through our previous blog about Google Analytics, you might have sound understanding about Google Analytics and how it…

8 years ago
  • Google Analytics and Ecommerce Tracking

What is Google Analytics and it’s Features?

Do you want to know more about your visitors and how your content is performing?​ Whether you run a website…

8 years ago
  • Google Analytics and Ecommerce Tracking

How to Add Google Analytics in BigCommerce

In this blog, you will see how to add Google Analytics and E-commerce Tracking Code  in BigCommerce. BigCommerce is one of the…

8 years ago
  • Google Analytics and Ecommerce Tracking

Google Analytics and E-commerce Tracking in Miva Merchant

If you have gone through some of previous blog, you might have seen how to install google analytics, e-commerce tracking…

8 years ago