Implement Enhanced eCommerce Tracking in ClickFunnels

Last updated on May 30th, 2019 at 06:09 am

Enhanced 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.

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.

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

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.