Tracking & Analytics

Tracking Sales from ThriveCart with ClickMagick

Chris Schwartze | Updated: November 30th, 2017

Tracking Sales from ThriveCart with ClickMagick

Tracking Sales from ThriveCart with ClickMagick

Sales tracking for digital products is hard, especially when you have a complicated funnel. There isn't that much on the market for tracking, not for small business at least. I've tried most of them, from Funneldash to Wicked Reports all the way up to ConversionFly. I thought some of these were complex, feature-bloated or too expensive for a startup.

This week, I was (again) looking at sales tracking as it was still the missing link in our software stack. After today, I'm convinced that I found it, it’s ClickMagick.

The reason that I haven’t tried ClickMagick was that their homepage didn’t feel promising to me. I was wrong! It’s dead simple and it gives me every insight that I need to run an online business.

With tracking software, the most important thing is to setup tracking correctly. It all falls and stands with that.

Inserting tracking scripts on your website is easy, the bigger challenge is tracking every sale correctly.

In our case, we’re using ThriveCart. It has many features, such as purchase bumps, upsells and downsells.

Track ThriveCart sales with ClickMagick

All great, but how are we going to track these? Here’s a snippet of ClickMagick’s sales tracking pixel, straight out of the app dashboard:

<!-- ClickMagick Sales Pixel Code -->
<script>
var uid=XXXXX,att=2,ref='some_reference',type='s',dup=0,ign=0,ssl=1,amt=50.00;
window.onload = function() { if (uid && type) {
var el = document.createElement("cmTrackPixel"), Img = new Image;
Img.onload = function() { el.src = this.src; }
Img.src = "http"+((ssl==1) ? "s" : "")+"://www.clkmg.com/api/"+type+"/pixel/?uid="+uid+
"&amt="+amt+"&att="+att+"&ref="+encodeURIComponent(ref)+"&dup="+dup+"&ignore="+ign; } };
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.clkmg.com/api/s/pixel/?uid=XXXXX&att=2&amt=50.00&ref=some_reference"
/></noscript>
<!-- End ClickMagick Sales Pixel Code -->

As you can see, In this example, I’ve set the amt= to 50,00. We can add this pixel to our ThriveCart tracking field, like so:

ThriveCart Tracking ClickMagick Field

When this pixel runs, and a prospect is tracked it will return 50,00 in sales. Simple, right? It is, I know.

But what happens if this user uses a coupon? That would destroy our tracking since the pixel amt= is static.

ThriveCart has a couple of Javascript variables we can take advantage of, as shown in these docs:

Here’s an example of a Facebook purchase pixel, with a Javascript variable from ThriveCart.

<script>
fbq('track', 'Purchase', {value: _thrive_order.order.product.total_readable, currency: _thrive_order.order.currency});
</script>

We can use _thrive_order.order.product.total_readable in our ClickMagick sales pixel.

ClickMagick provides us with two options, a javascript pixel or an image/HTML pixel.

With this image/HTML pixel, we cannot use ThriveCart’s Javascript variable, it will not work.

<img src="https://www.clkmg.com/api/s/pixel/?uid=73252&att=2&amt=50.00&ref=some_reference" height="1" width="1" />

So we’re left with the Javascript pixel, in the following example, I’ve added _thrive_order.order.product.total_readable after amt=. That variable should translate to 50,00 when a customer completes a payment.

<script>
var uid=XXXXX,att=2,ref='some_reference',type='s',dup=0,ign=0,ssl=1,amt=_thrive_order.order.product.total_readable;
window.onload = function() { if (uid && type) {
var el = document.createElement("cmTrackPixel"), Img = new Image;
Img.onload = function() { el.src = this.src; }
Img.src = "http"+((ssl==1) ? "s" : "")+"://www.clkmg.com/api/"+type+"/pixel/?uid="+uid+
"&amt="+amt+"&att="+att+"&ref="+encodeURIComponent(ref)+"&dup="+dup+"&ignore="+ign; } };
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.clkmg.com/api/s/pixel/?uid=XXXXX&att=2&amt=0.00&ref=some_reference"
/></noscript>

This script didn’t work. After much testing, we concluded that scripts in ThriveCart are running before the closing of the body tag.

The purchase didn’t register because the ClickMagick javascript pixel needs to be inside the head section.

Luckily Steve, from ClickMagick helped us out and after much back and forth we came up with a pixel that works in ThriveCart. Add this code to the Paste tracking code to add only if the customer purchases field in a ThriveCart checkout.

ClickMagick Sales Pixel for ThriveCart

ClickMagick ThriveCart Sales Analytics
Here are the pixels we’re using. If implemented right, these should work out of the box. These scripts are tested against all scenarios and it attributed the sale amount along with the reference. Make sure to replace 12345 with your unique CilckMagick account ID. Optionally you can remove the comments in the code and add a reference to your product.

When a customer purchases your Main Product

<!-- ClickMagick Sales Pixel Code for ThriveCart Main purchase -->
<script>
/// Replace 12345 with your ClickMagick account ID
/// Replace your_product_reference
var imgpixel = document.createElement('img');
imgpixel.src = "https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=" +
_thrive_order.order.product.total_readable +
"&ref=your_product_reference";
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=0.00&ref=your_product_reference"/>
</noscript>
<!-- End ClickMagick Sales Pixel Code for ThriveCart Main purchase -->

When a customer purchases your Bump Offer

<!-- ClickMagick Sales Pixel Code for ThriveCart Bump purchase -->
<script>
/// Replace 12345 with your ClickMagick account ID
/// Replace your_bump_reference
var imgpixel = document.createElement('img');
imgpixel.src = "https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=" +
_thrive_order.order.bump.total_readable +
"&ref=your_bump_reference";
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=0.00&ref=your_bump_reference"/>;
</noscript>
<!-- End ClickMagick ClickMagick Sales Pixel Code for ThriveCart Bump purchase -->

When a customer purchases your Upsell

<!-- ClickMagick Sales Pixel Code for ThriveCart Upsell purchase -->
<script>
/// Replace 12345 with your ClickMagick account ID
/// Replace your_upsell_reference
/// Replace [UPSELL_ID_HERE]
var imgpixel = document.createElement('img');
imgpixel.src = "https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=" +
_thrive_order.order.upsells[UPSELL_ID_HERE].total_readable +
"&ref=your_upsell_reference";
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=0.00&ref=your_upsell_reference"/>;
</noscript>
<!-- End Sales Pixel Code for ThriveCart Upsell purchase -->

When a customer purchases your Downsell

<!-- ClickMagick Sales Pixel Code for ThriveCart Downsell purchase -->
<script>
/// Replace 12345 with your ClickMagick account ID
/// Replace your_downsell_reference
/// Replace [DOWNSELL_ID_HERE]
var imgpixel = document.createElement('img');
imgpixel.src = "https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=" +
_thrive_order.order.downsells[DOWNSELL_ID_HERE].total_readable +
"&ref=your_downell_reference";
</script>
<noscript>
<img height="1" width="1" style="display:none" src="https://www.clkmg.com/api/s/pixel/?uid=12345&att=2&amt=0.00&ref=your_downell_reference"/>;
</noscript>
<!-- ClickMagick Sales Pixel Code for ThriveCart Downsell purchase -->

Leave a comment below if you found this helpful. Get in touch if you need help implementing your software.