• Skip to content
  • Skip to primary sidebar

retargetingpx

  • About
  • Tutorials
    • Facebook
    • Tag Manager
    • Google Analytics
  • Retargeting
  • Refine FB Retargeting
    • Documentation
  • Log In
You are here: Home / Tutorials / Analytics / Implement Enhanced eCommerce Tracking in ClickFunnels

Implement Enhanced eCommerce Tracking in ClickFunnels

September 22, 2018 by John Dela torre 14 Comments

Paid Premium Content

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

Reading Time: 7 minutes

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.

Paid Premium Content
Unlock File/Content for $10.00
Purchase to Unlocked everything on this post only. Lifetime Access after Purchase

8. Tag should look like this.

Paid Premium Content
Unlock File/Content for $10.00
Purchase to Unlocked everything on this post only. Lifetime Access after Purchase


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.

Paid Premium Content
Unlock File/Content for $10.00
Purchase to Unlocked everything on this post only. Lifetime Access after Purchase


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

Paid Premium Content
Unlock File/Content for $10.00
Purchase to Unlocked everything on this post only. Lifetime Access after Purchase


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.

Need help? or still having problem?

Hire me to implement this for you. I'll hire you

Categories: Analytics, Tag Manager, Tutorials Tags: Enhanced Ecommerce, gtm

About John Dela torre

Being a web enthusiast and lifestyle entrepreneur, John has ten years of experience as an Analytics Specialist/Web Developer. He also specializes in visual concepts and designs, expert in Facebook Pixel Tracking & Marketing, Google Analytics, & Google Tag Manager. He also have a solid experience in SEO & SEM.

14
Leave a Reply

avatar
4 Comment threads
10 Thread replies
3 Followers
 
Most reacted comment
Hottest comment thread
5 Comment authors
John Dela torreSimon OrthKat TierneyKat TierneyBeniamin Magdici Recent comment authors
avatar
  Subscribe  
newest oldest most voted
Notify of
Parker Knight
Member
Parker Knight

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

Vote Up-1Vote Down  Reply
October 11, 2018 4:14 pm
John Dela torre
Author
John Dela torre

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!

Vote Up0Vote Down  Reply
October 15, 2018 10:15 am
Beniamin Magdici
Member
Beniamin Magdici

does this track all otos (2 or more)? order bumps too?

Vote Up0Vote Down  Reply
October 15, 2018 9:26 am
John Dela torre
Author
John Dela torre

Hi Beniamin,

The guide only tracks Initial offer and Bump product.
OTOs are not covered in the guide.

Thank you!

Vote Up-1Vote Down  Reply
October 15, 2018 10:10 am
Beniamin Magdici
Member
Beniamin Magdici

Would repeating the same steps as OTO1 for OTO 2 and 3 work?

Vote Up0Vote Down  Reply
October 15, 2018 11:09 am
John Dela torre
Author
John Dela torre

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.

Vote Up1Vote Down  Reply
October 15, 2018 11:41 am
Beniamin Magdici
Member
Beniamin Magdici

Would this work if I have analytics enhanced e-commerce connected to shopify as well?

Vote Up0Vote Down  Reply
October 15, 2018 7:26 pm
John Dela torre
Author
John Dela torre

Hi Beniamin,

Yes it will work fine. Just configure the analytics variable to support enhanced ecommerce and use {event}

Thanks

Vote Up0Vote Down  Reply
October 15, 2018 8:24 pm
Kat Tierney
Member
Kat Tierney

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.

Vote Up0Vote Down  Reply
December 14, 2018 6:10 am
John Dela torre
Author
John Dela torre

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 »

Vote Up0Vote Down  Reply
December 14, 2018 6:37 am
Kat Tierney
Member
Kat Tierney

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?

Vote Up0Vote Down  Reply
December 15, 2018 5:44 am
Simon Orth
Member
Simon Orth

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”?

Vote Up0Vote Down  Reply
August 16, 2019 5:14 am
John Dela torre
Author
John Dela torre

You can modify this part.
FROM:
Cookies.set(‘TSID’, TSID);

TO:
Cookies.set(‘TSID’, ‘CF-‘+TSID);

Vote Up0Vote Down  Reply
August 16, 2019 5:22 am

Primary Sidebar

Recent Posts

  • Implement Enhanced eCommerce Tracking in ClickFunnels
  • How to Verify if Facebook Pixel is Firing or Working Properly
  • Updated Way to Implement Google Tag Manager on ClickFunnel
  • How to Verify Google Tag Manager Installation
  • How to Create Google Tag Manager Account

© Copyright 2020 Tracking Pixel · All Rights Reserved · Login

wpDiscuz