Setup Facebook Pixel Tracking With Clickfunnels using Google Tag Manager

Standard

 Set up Facebook Purchase Conversion Pixel on ClickFunnels using Google Tag Manager

Recently once client asked Setup Facebook Purchased Pixel Value on ClickFunnels using Google Tag Manager, Because they want to see which Facebook ads converted into Sales, How many revenue generated from each ad on Facebook, If you are aware of ClickFunnels Process Like Upsell and bump Sell and other offers till complete purchased of Sales, each setup of sales you need to create a purchased pixel and set up the conversion pixel. Before apply Facebook Purchased pixel on ClickFunnels make a test order to understand processes of sales.

1. ClickFunnels Adword Conversion Tracking using Google Tag Manager

2. ClickFunnels Ecommerce Tracking using Google Tag Manager

What is require to set up Facebook Purchase Pixel Setup on Clickfunnels using Google Tag Manager

Setup Facebook Pixel Tracking With ClickFunnels

Set up The New Facebook Pixel In Clickfunnels

Already written below link How to get total revenue using Google Tag Manager on ClickFunnels

ClickFunnels Ecommerce Tracking using Google Tag Manager

First Install Google Tag Manager to Facebook Purchase Conversion Pixel on ClickFunnels 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

Setup Facebook Purchased Pixel on Google Tag Manager with Custom included all the variable like total revenue, Product Category and Product Name  and Setup Trigger on where is completed conversion

Facebook Conversion Pixel On Clickfunnels

Facebook Pixel Tracking With Custom HTML in ClickFunnels 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 Setup Facebook Pixel Tracking With Clickfunnels 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 available for Hire on Freelancer: Freelancer.com

I am available for Hire on Upwork: Upwork.com

I am available for Hire on Peopleperhour: Peopleperhour.com

I am available for Hire on Guru: Guru.com

No Fields Found.

ClickFunnels Adword Conversion Tracking using Google Tag Manager

Standard

Track adwords Conversions Tracking with Clickfunnels using Google Tag Manager

Recently, one of client asks me to track Dynamic Adword conversion with ClickFunnels using Google Tag Manager. Already written a previous post , How to track E-commerce tracking in ClickFunnels using Google Tag Manager (https://googletagmanagersolution.com/click-funnel-ecommerce-tracking-using-google-tag-manager/) same concept is going to apply to track ClickFunnels Dynamic Adword Conversion Tracking using Google Tag Manager.

When you will start working on Adword conversion tracking for ClickFunnels make sure you will All the UpSell and Apply adword conversion when Upsell finish or does not go to UpSell. And Make sure you will make a test sale before start implement adword conversion tracking on ClickFunnels using Google Tag Manager.

1. Setup Facebook Pixel Tracking With Clickfunnels using Google Tag Manager

2. ClickFunnels Ecommerce Tracking using Google Tag Manager

Integrate ClickFunnels with Google Adword Conversion Tracking using Google Tag Manager

First Install Google Tag Manager to Track adwords Conversions Tracking with Clickfunnels

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

For Dynamic Adwords Conversions Tracking with Clickfunnels using Google Tag Manager used Custom Javascript 

  1. Ge Total Revenue Value of UpSell and other Revenue tracking using Google Tag Manager on ClickFunnels

    clickfunnels conversion tracking

    ClickFunnels Dynamic Adword Conversion Tracking using Google Tag Manager

Now it’s time to verify Adword Conversion Tracking for ClickFunnels using Google Tag Manager

ClickFunnels Adwords Conversion Tracking Tag Manager

Adword Conversion Tracking ClickFunnels 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 implement on ClickFunnels Adword Conversion 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

No Fields Found.

Bigcommerce Google Tag Manager Ecommerce Tracking without touching Code

Standard

Google Tag Manager for BigCommerce Ecommerce/E-commerce Tracking without Touching Code

Recently one client asked me to track e-commerce tracking on BigCommerce on Stencil Themes using Google Tag Manager with Custom Javascript without Touching code of the big commerce. I asked to the client why you don’t want to put data layer, He said website is fully customized and also don’t want to share access of admin anybody, asked to client I need to make test order on the website, once I make a test order then see possible with custom javascript on BigCommerce (Stencil Themes).

What Challenges for E-commerce Tracking on BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website

  1. Product Array – one of that challenging to get product array on on BigCommerce (Stencil Themes).
  2. Write a Custom Javascript to Get Your order number
  3. Write a  Custom Javascript to get Total order value
  4. Write a Custom Javascript to Tax and Shipping value

First Install Google Tag Manager on Bigcommerce Google Tag Manager Ecommerce Tracking without touching Code

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

Written Javascript to get the value of product Array, total order value, Shipping value , Tax value and Order number on BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website for E-commerce/eCommerce Tracking 

Ecommerce with Google Analytics at BigCommerce

Product Array For Ecommerce Tracking using Custom Javascript on BigCommerce

google tag manager bigcommerce stencil E-commerce Tracking

Custom Javascript to Get value of E-commerce Tracking on BigCommerce Ecommerce/E-commerce Tracking without Touching Code

Written Custom E-commerce Tracking Code using Help of Custom HTML on Google Tag Manager For BigCommerce (Stencil Themes) without Touching Code/ Data Layer on the website for E-commerce/eCommerce Tracking 

Bigcommerce Google Tag Manager Ecommerce Tracking

BigCommerce ecommerce tracking 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 Bigcommerce Google Tag Manager Ecommerce Tracking without touching Codea 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

No Fields Found.

Drupal Ecommerce Tracking for Google Analytics using Google Tag Manager

Standard

Implementing Enhanced Ecommerce Tracking using Google Tag Manager for Drupal

Recently, one of client asks me to track e-commerce /commerce tracking in Drupal using Google Tag Manager. Because Client wants to see revenue from where it’s generated in store. Does not want to provide access of the website and said I will provide access of Google Analytic and Google Tag Manager, he said implement e-commerce tracking using Custom Javascript using Google Tag Manager.

Once I walk through his Drupal website and make a test order to see possible for E-commerce / Enhanced Tracking with Google Tag Manager using Custom Javascript in Drupal

What Challenges for Enhanced Ecommerce/eCommerce Tracking on Drupal using Google Tag Manager with Custom Javascript

  1. Written a custom javascript to get product array, order id, shipping , tax and other details to work  using Custom Javascript on Drupal

First Install Google Tag Manager on Drupal Google Tag Manager Ecommerce Tracking with Custom Javascript 

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

Written Custom E-commerce Tracking Code using Help of Custom HTML on Google Tag Manager on Drupal with Custom Javascript for E-commerce/eCommerce Tracking

Drupal Ecommerce Tracking using Google Tag Manager

Drupal Google Tag Manager E-commerce using Custom Javascript

Written Custom E-commerce Tracking Code using Help of Custom HTML on Google Tag Manager For Drupal with custom javascript  Code/ Data Layer on the website for E-commerce/eCommerce Tracking  and Verified with Google Analytic 

Drupal Ecommerce Tracking

Drupal Ecommerce Tracking for Google Analytics using 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 Drupal Google Tag Manager Ecommerce Tracking with 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

No Fields Found.

Top Magic Javascript for Daily uses of Google Tag Manager

Standard

Google Tag Manager (GTM) is a tool that allows you to manage and deploy marketing and analytics tags on your website or mobile app, without requiring you to modify the code of your site or app. JavaScript is a programming language that is commonly used in web development. When used in conjunction with GTM, JavaScript can be used to perform various tracking and analytics tasks on your website.

JavaScript can be used in GTM to perform a variety of tasks, such as:

  • Tracking clicks on specific elements on the page, such as buttons or links
  • Tracking form submissions
  • Tracking user interactions on the page, such as scrolling or hovering over specific elements
  • Tracking page views
  • Tracking form field data
  • Tracking user engagement
  • Tracking video interactions
  • Tracking file downloads
  • Tracking scroll depth
  • Tracking user location

You can add JavaScript code to GTM by creating a new tag and selecting “Custom HTML” as the tag type. Then you can configure the tag with your JavaScript code, and set up triggers to determine when the tag should fire. This allows you to use JavaScript to track specific actions or data on your website, without having to modify the website’s code.

It is important to note that GTM is not limited to JavaScript, You can also use it to add tags for other marketing and analytics tools such as Google Analytics, AdWords, and Facebook pixel.

Tracking drop-down text using JavaScript in Google Tag Manager (GTM) involves the following steps:

  1. Create a new custom HTML tag in GTM for the drop-down text tracking.
  2. In the tag configuration, add the JavaScript code that will track the drop-down text. The code should be able to select the drop-down element on the page, add a “change” event listener to it, and retrieve the selected text value when the drop-down selection changes.
  3. Create a new trigger in GTM that will fire the tag when the drop-down text changes. This can be done by using the “Click” trigger type and setting it to fire on the drop-down element.
  4. Publish the container to make the drop-down text tracking live on your website.
  5. Verify that the tracking is working by checking the real-time report in GA4.

Here is a sample JavaScript code that can be used to track drop-down text in GTM:

var dropdown = document.getElementById("dropdownId");

dropdown.addEventListener("change", function() {
  var selectedText = this.options[this.selectedIndex].text;
  dataLayer.push({'event': 'dropdownText', 'dropdownText': selectedText});
});

You can adjust the above code to match the id of your dropdown and the dataLayer variable name.

It’s important to note that the above code is just an example, and should be adapted to the specific needs of your website. It’s also important to understand the basics of JavaScript and GTM in order to implement the tracking correctly.

Tracking “Select” Drop Down Menu “Option” tag value Javascript using Google Tag Manager

In order to track the value of a “select” drop-down menu’s “option” tag in JavaScript, you can use the addEventListener method on the “select” element to listen for the “change” event.

Here’s an example of how you can do this:

var select = document.getElementById("mySelect");
select.addEventListener("change", function() {
    var selectedOption = this.options[this.selectedIndex];
    console.log(selectedOption.value);
});

In this example, document.getElementById(“mySelect”) is used to get a reference to the “select” element, and .addEventListener(“change”, function() is used to listen for the “change” event.

When the “change” event is fired, the anonymous function is executed, which gets the selected option element by using this.options[this.selectedIndex] and then logs the value of the option element using console.log(selectedOption.value).

You could also use Jquery to track the value of the selected option.

$("#mySelect").change(function(){
    console.log($(this).val())
});

In this way, every time the selection change, the console.log($(this).val()) will print the value of the selected option. In all the examples above, the console.log() is just an example of how you can use the selected option value. you could use it in any way you want, such as sending it to a server, storing it in a variable, etc.

Get Text of CheckBox Javascript using Google Tag Manager

In JavaScript, you can use the .textContent property to get the text of a checkbox element. Here’s an example:

var checkbox = document.getElementById("myCheckbox");
var text = checkbox.nextSibling.textContent;
console.log(text);

In this example, document.getElementById(“myCheckbox”) is used to get a reference to the checkbox element, and .nextSibling.textContent is used to get the text of the next sibling node.

For this to work, the checkbox element should be wrapped by a label element and the text should be inside the label element.

<label for="myCheckbox">This is my Checkbox</label>
<input type="checkbox" id="myCheckbox">

You could also use Jquery to get the text of a checkbox:

var text = $("label[for='myCheckbox']").text();
console.log(text);

In this example, $(“label[for=’myCheckbox’]”) is used to select the label element that corresponds to the checkbox element, and .text() is used to get the text inside the label element.

You could also use .innerText property to get the text of a checkbox.

var checkbox = document.getElementById("myCheckbox");
var text = checkbox.nextSibling.innerText;
console.log(text);

These examples assume that the text you want to get is inside a label element. If the text is not inside a label element, you can use parentNode or closest() to traverse the DOM and find the element that contains the text you want to get.

// Using querySelector
var radioButtons = document.querySelectorAll("input[name='color']");
var selectedValue;
for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        selectedValue = radioButtons[i].value;
        break;
    }
}
console.log(selectedValue); // Output: the value of the selected radio button

// Using getElementsByName
var radioButtons = document.getElementsByName("color");
ar selectedValue;
for (let i = 0; i < radioButtons.length; i++) {
    if (radioButtons[i].checked) {
        selectedValue = radioButtons[i].value;
        break;
    }
}
console.log(selectedValue); // Output: the value of the selected radio button

In the above example, the querySelectorAll or getElementsByName method is used to select a group of radio buttons that have a name attribute of color. The for loop iterates through the group, and the checked property is used to check which radio button is currently selected. The value property of the selected radio button is then stored in the selectedValue variable and output to the console.

Listen for Changes in Drop Down Menu using Google Tag Manager

To listen for changes in a drop-down menu, you can use the “onchange” event in JavaScript. This event is triggered when the value of the drop-down menu is changed by the user. Here’s an example of how you might use this event:

<select id=”mySelect”>
<option value=”option1″>Option 1</option>
<option value=”option2″>Option 2</option>
<option value=”option3″>Option 3</option>
</select>

<script>
var select = document.getElementById(“mySelect”);
select.onchange = function() {
// code to be executed when the value of the drop-down menu changes
console.log(“Selected option: ” + select.value);
}
</script>

In the above example, the onchange event is assigned a function that will be called whenever the user changes the value of the drop-down menu. The function logs the value of the selected option to the console.

You can also use jQuery .change() function that triggers the change event, or .on(“change”) function that attaches a function to the change event.

$(“#mySelect”).change(function(){
console.log(“Selected option: ” + this.value);
});

or

$(“#mySelect”).on(“change”, function(){
console.log(“Selected option: ” + this.value);
});

In both cases the function will be called whenever the user changes the value of the drop-down menu.

Disclaimer: Google tag manager belongs to Google property  For Contact: mappchero@gmail.com

I am available for Hire on Freelancer: Freelancer.com

I am available for Hire on Upwork: Upwork.com

I am available for Hire on Peopleperhour: Peopleperhour.com

I am available for Hire on Guru: Guru.com

Track Tawk Live Chat Event Tracking with Google Tag Manager

Standard

Track Tawk.to Chat App Event Tracking in Google Analytics through Google Tag Manager

Recently one of client ask to track tawk.to live chat event tracking in Google Analytic using Google Tag Manager, Tawk.to is very most of popular chat free software that’s see most of website using in the site through Google Tag Manager and send an event to Google Analytics when chat session started, Close and offline event. 

Why it’s important to track TawK.to Track Tawk Live Chat App Event Tracking in Google Analytic using Google Tag Manager

Tawk.to chat will provide tons of information about your visitors from where they came , and Chat started and How many people converting after using chat system. Also you can chat system as goal conversion in Google Analytic and Set Up Adword Conversion tracking on Tawk.to chat

Tawk.to & Google Adwords Conversion tracking integration using Google Tag Manager

First Install Google Tag Manager on the website for rack Tawk Live Chat Event Tracking 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

First Modify API of Tawk Live Chat Event Tracking using Datalayer and Event Passing through Google Tag Manager

<script type=”text/javascript”>(function(){
var s1=document.createElement(“script”),s0=document.getElementsBy

Now you will  awk Live Chat Event Tracking using Datalayer and Event Passing through Google Tag Manager in Google Analytic

Track Tawk Live Chat App Event Tracking

Track Tawk.to Chat Engagement Event in Google Analytics using Google Tag Manager

Track Live Chat App Tawk.to with Google Tag Manager (GTM)

Offline Track Chat Track Live Chat App Tawk.to with 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 Track Tawk Live Chat Event Tracking with 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 No Fields Found.

Zopim Live Chat Event Tracking in Google Analytic using Google Tag Manager

Standard

Track Zopim Chat Event Tracking with Google Tag Manager

Recently so many people and client ask me to track/write a code to track Zopim live chat event tracking for Zopim Chat Interaction tracking in Google Analytic using Google Tag Manager. You can track chat interaction like zopim Chat Started , zopim Chat Closed, Offline Message Sent, Chat_Rating_Good, Chat Button Clicked.

Why should track Zopim Chat Event as in Google Analytic using Google Tag Manager

Knowing more about your visitor before converting into sale, Which medium they came know your website and how many time chat Interaction before conversion to sales that will help you understand marketing channel growth. 

  1. First Install Google Tag Manager on the website for tracking Track Zopim Chat Event Tracking 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.  Implemented ZOPIM JAVASCRIPT API tracking all the event those like zopim Chat Started , zopim Chat Closed, Offline Message Sent, Chat_Rating_Good, Chat Button Clicked.

First you need to understand API ZOPIM and How it working it then you need convert ZOMPIN API into Data Layer

<script> 

$zopim(function() {

$zopim.livechat.set({

<script> 

$zopim(function() {

$zopim.livechat.setGreetings({

3. Now it’s to show result in Google Analytic – Zopim Live Chat Event Tracking in Google Analytic 

Zopim Chat Event Tracking

Zopim Live Chat Track 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 Track Zopim Live Chat Event Tracking in Google Analytic 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 No Fields Found.

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 No Fields Found.