In this video, I’m going to show you how you
can install ecommerce tracking on your thrivecart checkout pages. All and more coming up. Hey there measuregeeks, Julian here back with
another video for you. Today, I want to talk about thrivecart and
how you can install ecommerce tracking on your checkout pages. Now thrivecart is a checkout builder just
like Samcart or Send Owl or Gumroad. But it’s actually the checkout system that
we also use at as it’s very easy to set up. I’m generally quite satisfied with the product. And of course, I have built my custom tracking
into this platform as well as I want to track ecommerce tracking and send my data on to
various pixels like AdWords or the Facebook Pixel. So today I want to show you how you can set
up the same tracking on your thrivecart checkout pages. So you will have enhanced ecommerce tracking
and can send on your conversion data to your AdWords conversion tracking or your Facebook
Pixel. Sounds like a plan? Well, we got lots to cover so let’s get started. All right, before we get started, let’s take
a look at what you can expect by implementing this tracking onto your thrivecart pages. So here I am on a thrivecart checkout page. And as you might know on thrivecart itself,
you can build in a lot of functionality to sell a product. But also add certain bump offers and upsells
and downsells to your checkout flow. Now the tracking we are going to implement
today will track the view of such offers and then ultimately also the buy. So every time you enter such a checkout page,
we are sending information over to Google Analytics with the enhanced ecommerce tracking
via an event. That is true for every checkout page, like
this first checkout page. Like this upsell page here, or the downsell
page. And of course, also the purchase page at the
end with the order amount. All of this will be sent over to Google Analytics
via an event call and you’ll be able to see this later on in your conversion reports. Under ecommerce, we have our sales performance
report, we see the different orders and how much revenue they’re generated. Plus, in the product performance report, you
will see the conversion rate per product because we are measuring the view of the product and
then also the purchase in the end. Now, this is by no means the full enhanced
ecommerce tracking. We don’t have any shopping behavior or checkout
behavior reports really filled. Unfortunately, what is also not trackable
with thrivecart at least are the usage of coupon codes. So that’s one downside of the shopping system
in combination with Google Analytics. But other than that, we get some really nice
reports. I have also included a set up for conversion
tracking, for our Google Ads conversion tracking, and our Facebook Pixel. So let’s get started implementing this into
our thrivecart checkout pages. So here we are in the backend of our thrivecart
checkout pages. And I would recommend before you get started
to set up your products completely the means the main product that you’re selling the upsells
and the downsells, and so that all the funnels are already configured. Because some of the fields will actually only
appear if you have your downsells already configured. And we don’t want to miss anything. So set them up beforehand, and we can continue
implementing our tracking. Now for each product that you are selling
as the main product, you will need to set up these tracking steps in order to track
the whole funnel. You will not need to do this for the upsells
and the downsells. So let’s go ahead here with our first product,
I’m going to go to the Edit button. And typically you can find all the configurations
for the tracking codes in the checkout tab under tracking right here. And here is one configuration that you need
to tick which is the custom tracking code option. Now this might look a little bit different
than from what I have set up because it really depends what kind of different payment plans
you have. Nonetheless, you will always have a all pages
section, a checkout page section and purchasing of the main product and bump of a section. The first step that we need to take care of
is to install Google Tag Manager. So let’s go over to Google Tag Manager, I
trust that you have already set up an account here. And in order to get our Google Tag Manager
container snippet, we can go into the admin section or just click on our container ID
up here who get our two codes. And one code here is reserved for the head
tag. This is the more important one. And then we have one for the body section
which is reserved for users who don’t have JavaScript enabled. Unfortunately, with thrivecart, we only have
the option to paste our codes in the head section. So for our implementation, we will only use
this first code right here, copy it, go back to thrivecart. And here we’re going to paste our code in
to install Google Tag Manager on all pages. Let’s try this out before we continue. Let’s save this and go to our URL right here. And now in Tag Manager itself, let’s enter
the preview and debug mode, which will put our browser into a special mode. And if Google Tag Match has installed correctly
and we reload here, we should see our Google Tag Manager preview window that will let us
know which tags have fired on our pages. So now we have Google Tag Manager installed,
hopefully on all pages, we could do a little bit of a test here and see if it’s also on
the checkout pages. Let’s do this really quickly. It’s on this upsell page. Let’s see if it’s on the downsell page. Yes, on the downsell page as well. And on our order confirm page. It’s installed as well. The next step would be to install our datalayers
into this checkout tracking section right here. I’ve prepared the datalayer as we can’t pull
out values from the information that thrivecart gives us on this thank you page for example. The way to do this is JavaScript. So just to demonstrate, I’ll open up the developer
tools. Go into the JavaScript console. And there’s an object called underscore thrive
underscore order. And this is a JavaScript object that is on
every order success or thank you page where we have all the information like the invoice
ID, the products that were bought, and the total available right in this JavaScript object. It just needs to be passed in to the format
that Google Tag Manager expect which is the data layer. And I have prepared a little bit of JavaScript
for you. I will link this up down below. These are all the tracking codes that you
need to install. So for the all pages tracking code, we have
already installed our Google Tag Manager container snippet. We will copy this JavaScript right here, go
back to thrivecart and put this underneath our tracking code underneath our containers
snippet. Then we have another section for our thrivecart
checkout pages. So let’s copy that. And put this into this checkout page section. And last but not least, we have a thrivecart
purchase code. This needs to be implemented on all payment
plans and not the bump offer. So let’s copy this. And I’ll show you exactly what I mean by that. If you have multiple payment plans, you probably
have two form fields right here. And we’re going to paste exactly the same
code into both of those and not into this bump offer field. This will actually stay completely empty. Now, there’s an option here to only run these
codes for the first time the customer gets to the success page. This is an option that I will tick in order
for your conversions not to be counted double once to use a reload page, for example. So now that we have these JavaScript datalayers
installed, let’s try them out. Let’s save this again. And let’s go back to our page here. And see what information gets pushed into
the datalayer now. We already see a new event here called check
out. Let’s click on that and go to the datalayer. And here we can see that there is detailed
information being pushed into the datalayer. We have it now correctly formatted in the
enhance ecommerce tracking datalayer. So it’s ready to be picked up by Google Analytics. But let’s go to the next step here. We are on the upsell page. And here we have a new event called upsell. And the datalayer is also filled with exactly
that information that we would need to feed to Google Analytics. Let’s not buy this and actually go to the
downselll. Now we get to the downsell. And again, here we have a new event called
downsell with the datalayer filled with this downsell product. Let’s buy this. And we get to our success page, we have now
bought the main product, the bump up and down sell and not the upsell. And there’s a new event and the data called
purchase. And the data layer now looks like this, we
have our products in here that we have bought, our revenue, our ID. And this by the way corresponds to the invoice
ID that you can also search for inside of Thrivecart. Now I haven’t configured any tax or shipping
amounts as these are digital products. But those would also be filled if you have
them configured correctly. As mentioned, discount and coupon will always
be empty unless you change this around somehow because currently, we cannot pull the information
about the coupon into our datalayer unfortunately. Now that we have all the information that
we would need for enhanced ecommerce tracking in the data layer and it’s formatted correctly,
let’s set up our Google Analytics container. So we can actually send that information on
to Google Analytics or Facebook. For this I have prepared for you a container
that makes it a bit easier to set this up. Also here under this link. At the bottom, we have a container download, you can go to the raw
section here. And then you get the json which you can download
with Control S or Command S, just press the key combination and download not as a text
file, but as a .json. Let’s download this want to use the json as
the file extension. And we’re going to go ahead and go to our
admin here. And then import container. And we choose exactly our container file. And we choose an existing workspace. And you can choose merge. If you are not sure that this will override
anything, I would always go with merge and then rename if there are any conflicting tags
code to confirm, since our containers empty. I’m pretty sure now we should have no conflicts
here. And you see, we have already installed tags
here, the Facebook tag, the Google Analytics tags, and Google Ads conversion tracking. As variables, we have simply our Google Analytics
container, our Google Analytics settings variable. Now here, you actually need to go in and change
this around for your Google Analytics code that you want to send this to. So go to your admin section in Google Analytics
and find out your tracking code. Up here we have our tracking ID which we would
need to copy and change around in this field, also going to change the name here. Let’s save this. Now it will be all sent to our Google Analytics
account. I have also set up some common variables,
revenue variable and the transaction ID variable if you want to use this in any other circumstances,
or any other conversion codes. Now, let’s take a look at the configurations
of the tags itself. We have a Google Analytics pageview tags which
simply sends our pageview information over to Google Analytics. This is a common one and pretty much self
explanatory. But I have an extra one which sends our enhanced
ecommerce tracking conversion data over and it’s simply fires on these custom events that
I have set up. So the checkout the upsell, the downsell and
the purchase event. Every time these events happened in the data
layer, we would have an event fire with the category enhanced ecommerce and the event
would be filled into the actual fields so purchase, upsell, downsell and so on. And then we have filled out the override settings
for our Google Analytics settings variable and have ticked down here the ecommerce information. So every time this tag fires, there should
be ecommerce information available. And that’s why we want to transfer this over
and use the data layer for this. So let’s try out our tracking right here,
we’re going to refresh our preview and debug mode. Go back to our page, we would need to have
our beginning page here. And we are here on the main page and our checkout
event fires. And with it our event enhanced ecommerce tracking
should also be sent off. You see here in the tag assistant that Google
Tag Manager throws a warning that our snippet is installed inside of another div. In practice this shouldn’t make a big difference. And you can ignore this warning, as it’s mainly
a compatibility feature for older browsers, especially in Internet Explorer. Our tags still fires fine. So we have here our Google Analytics tag with
our Patreon requests obviously sent and then our event and enhanced ecommerce tracking,
and the action checkout. So it was transferred over from this part. In the background, what happens is that all
the information that is available in the data layer is now sent on to Google Analytics,
we can check this going into our dev tools. So again, I’m going to go back to our dev
tools here. And then in the console, you can either look
at the output of an extension called the GA debugger, which is turned on right here. Or another extension that I like is the GTMGA
debugger that you can install to your browser. And once you’ve reload this, it will tell
us exactly that right here an enhance ecommerce tracking was sent over and the product details
that were received by Google Analytics. At the same time, you should be able to see
inside of your real time reporting a new event. Now, since this is not non action hit true,
you would see it actually here under events last 30 minutes. And here you can see our enhanced ecommerce
checkout just fired. This will not give us information about the
enhanced ecommerce tracking, but at least this information was received. And we will be able to see this later on in
our conversion reports under ecommerce. And then under product performance, we should
have our numbers filled. But this usually takes anything between a
few minutes to 48 hours. So let’s check back later. Let’s go further through our flow here. Fill this out again. Now on the upsell page, we have an event called
upsell. Our enhanced ecommerce tracking event fires
again, and the information again sent over. As you can see it here in the GA debugger
is the upsell information. Also in our GTMGA debugger, you should be
able to see it right here. We have our information available. And this should be also true if you go to
the downsell. So again, our enhanced ecommerce tracking
fired inside of our GTMGA debugger. If you reload this, we also see enhanced ecommerce
tracking with our GTM guide ebook that is now seen or offered to the user. Not only if the same information is then sent
over on the thank you page, on the order success Page, Google Analytics would actually know
that the user has bought this product and can calculate the conversion rate of it. So here we are now our purchase page, our
purchase event fired and this time, our enhanced ecommerce tracking, again, fire with the information,
this time in a GA debugger, right here. All the different products that we have sent
over with the different prices, and also our transaction ID plus our revenue was it here. So this information got now sent over to Google
Analytics, we have the order ID right here we can copy it. So let’s just quickly check up in Google Analytics,
first of all, if our event was received. So we had our checkout event and our downsell,
upsell, and now our purchase event as well. And if you’re lucky, we should be able to
see this already in our enhanced ecommerce reporting here under the sales performance. Let’s go to the right date today. And what was our ID 2437. Here we go. So we can see here 407 was transferred correctly
and our different products that we have bought as well. So this should match up pretty nicely. And we have everything stored in Google Analytics. Now at the same time, as you have just seen,
we’re also sending over a Facebook event right here. Now we get an error here because this is actually
not a correct ID that I’m sending over. But the purchase information should be sent
over correctly, we are sending here the value of the order. And we are also sending a request to to Google
Analytics conversion tracking. So here we have our conversion ID which you
will need to fill out in the actual tag. That’s something you will need to change and
our conversion value as well. We are actually also sending over the conversion
or the transaction ID right here. So that they will be deduplicated if they
fire twice. So over all, this is not a complete implementation
of the most important conversion codes like Facebook and Google Ads pixel and enhanced
ecommerce tracking for a thrivecart checkout pages. Now I’ve tested this with other products such
as physical products as well, and it works just fine. You just need to install the codes that I
gave you one time in these different checkout pages that you find on the products. You don’t have to install them here under
the upsell or the downsell section or within the funnel itself. Although there are custom tracking scripts
that you could install, but here is something you don’t have to necessarily touch. Everything that I showed you today needs to
be installed in this tracking section under checkout. And then here tracking. Don’t forget, if you want to take this life
to all your users, you need to publish this as a version. So we’ll submit a new version here and publish
this so go live to all your users. Alright, so there you have it. This is how you can install your ecommerce
tracking on your thrive cart checkout pages. Was I missing anything? Is there any more questions please leave me
a comment down below if you have any. I always love to hear from you. And if you haven’t yet, then maybe consider
subscribing to our channel right over there. Because we bring you new videos just like
this one every week. Now my name is Julian. See on the next one.