Form Submission

Pardot Form Submission using Google Tag Manager

Standard

Recently one client asks to implement form using google tag manager for Pardot B2B marketing automation by Salesforce. First, you need to understand, How to form submission working with Pardot Form either you can redirect third party URL or Display Success Message on Pardot Form Submission. Pardot form is a difficult to track in Google Analytic because an iframe so first you need to understand and think about , How you will put code on the Pardot Form and or write a custom Javascript 

  1. Pardot Form embedded on the website with an Iframe 
  2. Pardot Form showing alway referral or Direct traffic  but solving this issue you need write a custom so that you can identify original source form submission 

IFrame Pardot Form Submission Tracking with Google Tag Manager

  1. Ignore Referral as Paradot  
  2. Show Correct Source of Traffic 
  3. Implement Form Decor to track correct origin source of traffic

First Install Google Tag Manager on Pardot iFrame Form template header and Body  

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

 

Pardot iFrame Form Tracking

Tracking Pardot Forms in Google Analytics

2. Implemented Form Decor and Cross Domain Tracking Implemented to see correct form submission as correct source of traffic in Google Analytic for salesforce pardot Form and Conversion tracking

3. If you are not redirect from Pardot Form to third Party URL, When Form Submission it will show message after Submitting Pardot Form below See the screenshot.

When showing success message show then need to write a custom javascript to track those form submission Tracking pardot forms in google analytics using Google Tag Manager

Pardot Form Tracking as Event Tracking using Google Tag Manager

Warning: If you do n’t know about javascript or do n’t have developing knowledge then do n’t try to Pardot Forms Tracking using Google Tag Manager that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

I am avaible for Hire on Freelancer: Freelancer.com

I am avaible for Hire on Upwork: Upwork.com

I am avaible for Hire on Peopleperhour: Peopleperhour.com

I am avaible for Hire on Guru: Guru.com

Track Gravity Form Event Tracking Submissions Using Google Tag Manager

Standard

Track Gravity Form Event Tracking Submissions Using Google Tag Manager

Recently, one of the client has asked me to track Gravity form submissions tracking using Google Tag Manager, they said, they have tried so many method few other people written on internet because that’s not firing on actual form submission and also said it’s fail when a gravity form of pop up. I know very well why it’s not working on actual because most people does not know, How to work gravity form and also behind in Gravity form coding and API..

Which I have developed javascript it will working on Pop Gravity  Form as Normal Gravity Form on Successful Form Submission.

Gravity form Fired on AJAX-enabled forms when the confirmation page (gform_confirmation_loaded) is loaded. so that you need to understand loading of ajax gravity form on confirmation page.

Successfully Track Gravity Form Event Tracking Submissions Using Google Tag Manager

  1. First Install Google Tag Manager on WordPress for tracking gravity form submission using Google Tag Manager
Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

2. Write a custom data layer window.dataLayer.push using jquery on loading gform_confirmation_loaded) using Google Tag Manager custom html 

<script type="text/javascript">
    jQuery(document).ready(function(){
        jQuery(document).bind('gform_confirmation_loaded', function(){
Gravity Form Event Tracking Submissions

wordpress gravity form submission and adword conversion tracking

Warning:if you do n’t know about javascript/ Datalayer/Jquery or do n’t have developing knowledge then do n’t try Track Gravity Form Event Tracking Submissions Using Google Tag Manager a custom javascript without using Any plugin that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Ninja Form Submissions with Google Tag Manager

Standard

Ninja Forms Submission Tracking with Google Tag Manager

Recently one of client ask me to track Ninja form submission using Google Tag Manager, once I have looked and test form submission for Ninja , Found two way tracking using either on Success message tracking or using Custom Javascript using Google Tag Manager.

Ninja Form actually built with Ajax form Submission so need to understand actually, How it’s work because ninja form submission without reloading page/Refreshing Pages, write a ajax form submission jquery/Data layer and Fire ajax code on DOM then it will work on Ajax form Submission 

  1. Tracking on Success message making trigger on it 
  2. Using  Jquery Custom Javascript to Track Form Submission
<script>
jQuery( document ).ready( function() {
//Setup our on formSumbit Listener.
jQuery( document ).on( ‘nfFormSubmitResponse‘, function() {

 

  1. First Install Google Tag Manager on WordPress for tracking Ninja Form Submissions with Google Tag Manager
Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-XXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

Note: Make you will replace GTM Tracking Code with your GTM ID XXXXX

2. Write a custom ajax form submission  javascript using jquery on loading (nfFormSubmitResponse) using Google Tag Manager custom html 

Ninja Forms Submission Tracking

Tracking Ninja form submissions with Google Tag Manager

Warning:if you do n’t know about javascript/ Datalayer/Jquery or do n’t have developing knowledge then do n’t try Event tracking Ninja Forms Submissions with Google Tag Manager a Ajax custom javascript without using Any plugin that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

For Contact: mappchero@gmail.com

Jotform Form Tracking Successfully using Google tag manager

Standard

Track jotform submissions in Google Analytics using Google Tag Manager 

Recently once of client ask me to track Jotform Success using Google Tag Manager Success when Display Thank you message it should fire event only in Google Analytic!.

Especially Problem with JotForm they will not allow inject any type of code because security reasons. Here you have one option to track form submission as the goals you need to redirect after successful submission.

Why you want track Form submission, Without Form submission you can not track success and effort of digital marketing, like if you are spending on money SEO, PPC and Facebook or any other marketing channels.

Step 1. Setup Google Tag Manager Code to modify to work for Joftform , Because of jotfom does not to directly place a code on Jotform for that case you need to modify below code to work in Jotfom, 

Paste this code as high in the <head> of the page as possible:
<!– Google Tag Manager –>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘https://www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXX’);</script>
<!– End Google Tag Manager –>
Additionally, paste this code immediately after the opening <body> tag:
<!– Google Tag Manager (noscript) –>
<noscript><iframe src=”https://www.googletagmanager.com/ns.html?id=GTM-WN29THP”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<!– End Google Tag Manager (noscript) –>

 Step 2. Now Configure Trigger , Tag and Event Triggers in Google Tag Manager for work for joftorm in Google Tag Manager. 

 

Jotform Tracking

Jotform Tracking using Google Tag Manager

3.  Now time show result in Google Analytic after making couple code and datalayer written in Google Tag Manager.

Avoid self referral issue in Google Analytic, Look at below screen

Exclude these domains from your referral traffic. Users arriving at your site via any of these domains will not be counted as referral traffic in your reports.

 

For Contact: mappchero@gmail.com

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement Jotform tracking using Google Tag Manager without, it may be stop form submission  

Disclaimer: Google tag manager belongs to Google property 

Squarespace Form Submission with Google Tag Manager

Standard

Are You Looking to Track Squarespace Form Submission with Google Tag Manager

Recently one client ask me to track to track squarespace form submission using Google Tag Manager because it’s bit of tracking to squarespace form using Google tag Manager.

Even you will ask to squarespace support they will not help much tracking correct form submission and they also very poor documentation about form submission. without correct form submission of Squarespace you can not track actual return of investment like Adword, SEO and other marketing. That’s every marketer want correct form submission.

After that I have decided write to easy solution track squarespace form submission using Google Tag Manager.

How to Track Squarespace form submissions with Google Tag Manager

Step 1. First Install Google Tag Manager on Your Squarespace that will allow track traffic and form Submission

Google Tag Manager Code inject in SquareSpace 

Login into your Squarespace account ——>Click on the “Settings” ——-> Click on the“Advanced Setting”—-> Click on the”Code Injection” ——-> in the header section.

Copy the code below and paste it onto every page of your website. Place it immediately after the opening <body> tag.

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX‘);</script>
<!– End Google Tag Manager –>

Note: Make you will replace GTM Tracking Code with your GTM ID

Step 2. Need to create a custom html javascrit to track squarespace form submission 

Name of Custom HTML – Squarespace form Submission

Custom HTML Squarespace form Submission using Google Tag Manager

Custom HTML Squarespace for Google Tag Manager

Step 3. Triggering for ” Squarespace form Submission validation on submit” without Putting Code on Squarespace template for form submission using Google Tag Manager

Trigger to Track Contact Form Submission on Squarespace using Google tag manager

Track Contact Form Submission on Squarespace using Google tag manager

Step 4. Create a Tag for Track to Squarespace form Submission in Google Analytics using Google Tag manager.

SquareSpace For Tags for Google Tag Manager

Create a Tag Squarespace form Submissions using Google Tag Manager

Step 5. Trigger to track Squarespace form Submission in Google Analytics using Google Tag manager.

Custom Event for Squarespace form Submission using Google Tag Manager

Custom Event for Squarespace forms Submission

For Contact: mappchero@gmail.com

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on Squarespace form submission using Google Tag Manager  that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property 

Contact Form 7 with Google Tag Manager without a Plugin in WordPress

Standard

Are you looking WordPress Contact Form 7 Submission/Ajax form Submission using Google Tag Manager

Are you looking to track Contact form 7 Successful form Submission Tracking using Google Tag Manager without plugin and using javascript or if you don’t login to your back-end of WordPress don’t need worry about it, Make sure you have already Place Google Tag Manager on the website.

One of Challenging part to track successful form submission on Contact form 7 Tracking in Google Analytic and lots of questions I have seen on the internet How to track success Contact 7 form submission on “track WordPress Contact Form 7 with Google Tag Manager” and Track WordPress Contact Form 7 with Google Tag Manager! And Some people written solution if you use the plugin of google tag manager “GTM Plugin for WordPress by DuracellTomi“, I am going to provide a solution track contact 7 form Submission using Google Tag Manager!

Why it’s more completed to tracking Contact form 7 submission using Google Analytic / Google Tag Manager, Because due to ajax based form Submission that’s alway will be challenging track on Google Analytic that will not track as usual other form submission for track ajax form using Custom Javascript or Redirect to thank You Page.

How to make Successfully form Submission Tracking using Google Tag Manager in WordPress Contact Form 7 with Google Tag Manager without a Plugin!

Step 1. First Install Google Tag Manager on Your Website /Store

Copy the code below and paste it onto every page of your website. Place it immediately after the opening <body> tag.

<!– Google Tag Manager –>
<noscript><iframe src=”//www.googletagmanager.com/ns.html?id=GTM-XXXXXX”
height=”0″ width=”0″ style=”display:none;visibility:hidden”></iframe></noscript>
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({‘gtm.start’:
new Date().getTime(),event:’gtm.js’});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!=’dataLayer’?’&l=’+l:”;j.async=true;j.src=
‘//www.googletagmanager.com/gtm.js?id=’+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,’script’,’dataLayer’,’GTM-XXXXXX‘);</script>
<!– End Google Tag Manager –>

Note: Make you will replace GTM Tracking Code with your GTM ID

Step 2. Need to create a custom html javascrit to track contact us 7 form submission using without Plugin

Name of Custom HTML – Contact 7 Form Submission validation on submit

Contact Form 7 submit with Google Tag Manager

Contact Form 7 validation on submit using Google Tag Manager

Step 3. Triggering for “Contact 7 Form Submission validation on submit” without Plugin a tracking form submission using Google Tag Manager

Ajax Form Tracking Contact 7 Form Submission

Track Contact Form 7 Submissions in Google Analytics

Step 4. Create a variable for Track Contact 7 form submission using Google Tag Manager

Custom Variables for Contact 7 form Submission

WordPress contact form 7 variables using Google Tag Manager

Step 5. Create a Tag for Track to Contact 7 form Submission in Google Analytics using Google Tag manager.

Google Tag Manager Contact 7 Tags

Contact 7 For Tags for Google Tag Manager

Step 6. Trigger to track Contact 7 form Submission in Google Analytics using Google Tag manager.

Custom Event to track contact 7 form submission

Contact 7 form Submission fire on Custom Event

Step 7. Now time test contact 7 form submission on the website using Debug mode of Google Tag manager

Successfully Contact form 7 tracking

Tested on Contact form 7 Submission using Google Tag Manager

Step 6. Result Verify in Google Analytic for Contact 7 form Submission and Successfully tracking as event Google Analytic.

Contact 7 Form event Tracking in Google Analytic

Event Tracking in Google Analytic for Contact 7 Form

For Contact: mappchero@gmail.com

Warning:if you do n’t know about javascript or do n’t have developing knowledge then do n’t try to implement on contact 7 form submission using Google Tag Manager  that can broke your site, Cart and other functionality 

Disclaimer: Google tag manager belongs to Google property