Last updated on May 30th, 2019 at 06:09 am
Reading Time: 7 minutesEnhanced Ecommerce is One of the most vital data tracking when selling products online. That’s why most of the the CMS platforms has native integration to make it easier to track sales. However, not all popular platform support eCommerce tracking, one of those is Clickfunnels.
Clickfunnels is one of the most used application to sell products online. Although, it doesn’t have Google Analytics eCommerce integration, their payment gateway with stripe is one of the best and easiest way to configure.
In this article, I will show you how to implement eCommerce tracking in Clickfunnels.
Requirements:
– Google Tag Manager
– Cookies Script
– jQuery
Prerequisite:
First you need GTM account, you can use your GMAIL account to create. Just follow this steps on:
– How to Create Google Tag Manager Account
Next, you need to implement your GTM to your ClickFunnels account.
– Here’s the Step-by-Step guide on How to Implement GTM to Clickfunnels.
If you already have GTM account, then skip the steps above.
Adding Cookie Extension
We need to implement Cookie function first in the Head section of your FUNNEL > Setting > Head section.
Copy and Paste this code below
<script> ;(function(factory){var registeredInModuleLoader=false;if(typeof define==='function'&&define.amd){define(factory);registeredInModuleLoader=true;} if(typeof exports==='object'){module.exports=factory();registeredInModuleLoader=true;} if(!registeredInModuleLoader){var OldCookies=window.Cookies;var api=window.Cookies=factory();api.noConflict=function(){window.Cookies=OldCookies;return api;};}}(function(){function extend(){var i=0;var result={};for(;i<arguments.length;i++){var attributes=arguments[i];for(var key in attributes){result[key]=attributes[key];}} return result;} function init(converter){function api(key,value,attributes){var result;if(typeof document==='undefined'){return;} if(arguments.length>1){attributes=extend({path:'/'},api.defaults,attributes);if(typeof attributes.expires==='number'){var expires=new Date();expires.setMilliseconds(expires.getMilliseconds()+attributes.expires*864e+5);attributes.expires=expires;} attributes.expires=attributes.expires?attributes.expires.toUTCString():'';try{result=JSON.stringify(value);if(/^[\{\[]/.test(result)){value=result;}}catch(e){} if(!converter.write){value=encodeURIComponent(String(value)).replace(/%(23|24|26|2B|3A|3C|3E|3D|2F|3F|40|5B|5D|5E|60|7B|7D|7C)/g,decodeURIComponent);}else{value=converter.write(value,key);} key=encodeURIComponent(String(key));key=key.replace(/%(23|24|26|2B|5E|60|7C)/g,decodeURIComponent);key=key.replace(/[\(\)]/g,escape);var stringifiedAttributes='';for(var attributeName in attributes){if(!attributes[attributeName]){continue;} stringifiedAttributes+='; '+attributeName;if(attributes[attributeName]===true){continue;} stringifiedAttributes+='='+attributes[attributeName];} return(document.cookie=key+'='+value+stringifiedAttributes);} if(!key){result={};} var cookies=document.cookie?document.cookie.split('; '):[];var rdecode=/(%[0-9A-Z]{2})+/g;var i=0;for(;i<cookies.length;i++){var parts=cookies[i].split('=');var cookie=parts.slice(1).join('=');if(cookie.charAt(0)==='"'){cookie=cookie.slice(1,-1);} try{var name=parts[0].replace(rdecode,decodeURIComponent);cookie=converter.read?converter.read(cookie,name):converter(cookie,name)||cookie.replace(rdecode,decodeURIComponent);if(this.json){try{cookie=JSON.parse(cookie);}catch(e){}} if(key===name){result=cookie;break;} if(!key){result[name]=cookie;}}catch(e){}} return result;} api.set=api;api.get=function(key){return api.call(api,key);};api.getJSON=function(){return api.apply({json:true},[].slice.call(arguments));};api.defaults={};api.remove=function(key,attributes){api(key,'',extend(attributes,{expires:-1}));};api.withConverter=init;return api;} return init(function(){});})); </script>
Creating dataLayer for eCommerce Data
Once you have GTM created and implemented. Follow this step-by-step implementation.
1. Go to your FUNNEL.
2. Select Order Funnel.
3. Go to SETTINGS > TRACKING CODE
4. Paste the code below in Header Section and save the funnel.
<script> dataLayer.push({ 'event': 'OrderForm' }); </script>
Should look like this.
5. Next go to your Google Tag Manager and create New Tag
6. Name the tag as dataLayer.OrderForm and click the icon to select the tag we need.
7. Select Custom HTML on the list and paste the code below to your tag.
8. Tag should look like this.
9. Next, create the trigger for this tag. As you can see on the image above, click the Trigger icon.
10. Click the + sign on the upper right section of the window.
11. After clicking the + sign, change the Untitled Trigger to trigger.OrderForm
12. Then click the center icon of Trigger Configuration to open the trigger selections.
13. From Choose trigger type select Custom Event from the list.
14. In the Event name field, type OrderForm as value and SAVE.
15. After saving, you will go back to the created TAG. SAVE it as well and you’re done creating the tag.
Sending Ecommerce Data to Analytics
Now we’re ready to send the data to analytics once the purchased is successful. The data contains all the details of transaction including Product Names and prices.
1. To begin with, go to your OTO1 or Upsell 1 Funnel.
2. Go to SETTINGS > TRACKING CODE, copy and paste the code below in Header Section.
<script> dataLayer.push({ 'event': 'OTO1Page' }); </script>
3. Once added. Save the funnel.
4. Now go to Google Tag Manager and Create new tag.
5. Name your tag as conversion.dataLayer.
6. Click Tag Configuration and select Custom HTML as tag type.
7. Paste this code below in the Custom HTML Tag.
8. Next, create the trigger for this tag. Simply click the Triggering section
9. Click the + sign on the upper right section of the window.

10. After clicking the + sign, change the Untitled Trigger to trigger.OTO1
11. Then click the center icon of Trigger Configuration to open the trigger selections.
12. From Choose trigger type select Custom Event from the list.
13. In the Event name field, type OTO1Page as value and SAVE.
14. Just save the TAG as well and you’re done creating the tag for conversion.
Creating eCommerce Variables
Now that we have the tags. We need to create the variables needed to make the tags work.
1. In you Google Tag Manager account, click Variable.
2. Change the “Untitled Name” to productName
3. Then, click Variable Configuration section to select type of variable.
4. On the Variable type, select 1st Party Cookie
11. Your variable should look like this.
12. Great! You’re almost there! Next, we’ll need to push the data to analytics.
Sending eCommerce Transaction to Google Analytics
We’re good to send the data to analytics. Few more steps and we’re done.
1. Create new TAG.
2. Name it as event.eCommerceTransaction
3. Select the tag type Google Analytics – Universal Analytics
4. On the property of GA – Universal Analytics select track type as Transaction
5. Then on Google Analytics Setting, select the Variable of GA UID if you already have it.
If you don’t, select New Variable to create one.
Name this variable to GAUID then paste your Google Universal Analytics ID. You can get it in your analytics account.
Then make sure that Enable Ecommerce Features is check and Read data from variable should be {{event}}. Don’t forget to save it.
6. Next, you need to create the trigger. By now you should know how to create trigger.
7. Just select Custom Variable again and on event name, type transactionComplete
8. Don’t forget to type a name to your trigger. It could be anything but for this tutorial name it trigger.transactionComplete
9. Save the trigger and tag.
10. You should have like this.
11. Everything is now setup. All you have to do now is to PUBLISH your GTM container to make the changes LIVE.
That’s it! You’re now tracking eCommerce transaction on Clickfunnels.
Debugging & Verifying Implementation
Facebook Pixel Helper
First thing first, we need to check if FB Pixel event is working properly. To test, you need to install Facebook Pixel Helper. It’s a chrome extension so you make sure you’re using Chrome browser to test.
Follow this Guide on How to Test Facebook Pixel events using Pixel Helper.
Check Possible jQuery Conflict
By default, ClickFunnels already support jQuery library. But to make sure that there’s no javascript error cause by jQuery, you need to check the console and look for error related to jQuery.
1. There are two pages you need to check. The Order Form & OTO1 or Upsell 1 Page.
2. Right click on the page and select inspect or inspect element
3. Debugging window will appear and just click the Console tab and you should see if there’s an error.
4. If you see error like jQuery not a function or anything about jQuery error. It means you need to add jQUery library.
5. To fix this, just go to the FUNNEL > SETTING > Head Tracking Code and paste the code below:
<script src="https://ajax.googleapis.com/ajax/libs/jquery/3.3.1/jquery.min.js"></script>
should look like this.
6. Save and inspect to check if the error still exist and check Facebook Pixel Helper if Pixel events are firing fine.
Hey John, amazing post! Super helpful! I just wanted to ask you a question about a possible scenario.
What if someone completed the Order form but when they reached OTO1Page they decided to exit out of their browser instead of clicking the yes or no upsell links in clickfunnels?
Would this transaction still be sent to Google Analytics or no? I know this is a rare case but I was just curious.
Thanks so much,
Parker
Hi Parker,
Thank you for great feedback!
Although I already sent a message on your email. The trigger of sending the data to analytics is on OTO1 not in order confirmation page.
Thanks!
does this track all otos (2 or more)? order bumps too?
Hi Beniamin,
The guide only tracks Initial offer and Bump product.
OTOs are not covered in the guide.
Thank you!
Would repeating the same steps as OTO1 for OTO 2 and 3 work?
Remember that the trigger in OTO1 is the Initial Offer. You can replicate how initial offer was made and make sure it has correct value.
Few things to note.
ON OTO2 where the OTO1 purchased should trigger. On OTO3 the OTO2 Purchased should trigger. The last OTO should trigger in Order/Thank you page.
Would this work if I have analytics enhanced e-commerce connected to shopify as well?
Hi Beniamin,
Yes it will work fine. Just configure the analytics variable to support enhanced ecommerce and use {event}
Thanks
Hi, thanks for the tutorial! What variables can I edit? For example, instead of OTO1 can I name it my product I’m selling?
How do I add a 2nd OTO? I have a main offer, OTO1 and OTO2, and then it goes to checkout. So I’d like to get that configured, too.
Hi Kat, Regarding your question, the OTO1 is just a trigger. The Product Name is dynamic. Whatever the name you used on the product that appears in Order Form, the script will get it and use that as a product name for your ecommerce transaction. This guide only tracks the main product purchase. Upsells and Downsells are not supported on this article. This is because upsells and downsell are not dynamic. You need to manually add the product names, prices to the dataLayer. If you have background in dataLayer and Javascript. You can just replicate the code I created to… Read more »
I don’t and my developer doesn’t have experience with it – I don’t really have time for him to learn right now. Can I hire you to do it?
hey John, what if we want to add a string to the Order Id reported in Google Analytics? Instead of just the plain order id, we want to add like “CF” such as “CF-09000”?
You can modify this part.
FROM:
Cookies.set(‘TSID’, TSID);
TO:
Cookies.set(‘TSID’, ‘CF-‘+TSID);