Samcart Ecommerce Tracking with Google Tag Manager

In this video I’m going to show you how you
can install Google Tag Manager and it’s tracking on to Samcart. All the more coming up. Hey there measuregeeks, Julian here back with
another video for you. Today, we want to talk about the checkout
system Samcart and how you can install Google Tag Manager and tracking like Google Analytics
Enhance eCommerce tracking, Facebook Pixel or Google Ads conversion tracking on to your
checkout pages. Now, Samcart is a bit like a checkout builder,
it’s very easy to build checkouts, and a lot of people use it for their payment gateways. So once they have marketed a product, then
they want to sell it. And it’s the easiest way to do it for some
kinds of products. And therefore Sam card is a quite popular
checkout system nowadays. And for anybody who is doing the driven marketing,
you obviously want to also track your conversions and get more insights on how your users are
using the checkout. But this whole checkout builder system comes
with a little bit of a downside because we don’t get full access to the actual website. We can’t mess around in all the codes. So we need to utilize the form fields that
they give us in the back end, and fill out our fields correctly. So we can be doing conversion tracking correctly. Luckily, Samcart is quite good at giving us
some fields that we can fill out. But it was also a little bit of a problem
doing this with Google Tag Manager. So today, I want to show you a definitive
guide on how you can install Google Tag Manager onto a Samcart page. So you have full enhanced ecommerce tracking. You will have the ability to deploy a Facebook
Pixel and Google Ads as well. So we got lots to cover. Let’s dive in. Get started, we want to install our Google
Tag Manager codes on to our Samcart pages. So we head over to Google Tag Manager. If you have already an account set up that
you should be able to find your container snippets by clicking on the container ID up
here. And we get the codes that we need to install
in the head and the body within Sam cart. We can do this by going into our profile section
here. And under Settings, we have two fields that
are the embed HTML script and header and then one in footer. And this is where we’re going to place our
script because it will be installed on all the pages of our SoundCloud installation. So let’s copy these in here. And the body part will go in the footer, and
then simply click Save. And now we want to try this all out. Let’s go over to our products. I have some test product set up here already. And let’s look at this product in preview
mode. We see here Google Tag Manager is already
loading in the preview and debug mode because I’m here already in the preview mode. If you are not in here, you can click on preview,
this will open up this little window. And you should see the Google Tag Manager
is installed correctly. Alright, the next steps are to install our
pre configured container which I have linked up down below. So go over to Google Tag Manager in the admin
section, you can import your container and just choose the container that I’ve set up
for you already, which is the Samcart json we go with existing workspace, I just have
one workspace here. And I’m gonna choose to override if you already
have tags in your container, then I’d recommend to choose the merge option and see if there
are any conflicts that need to be resolved. We go ahead and confirm this. And this will install some tags, triggers
and variables in your container. And this will take care of the tracking. Now, what do they exactly do? You might know in order to fill information
into your ecommerce reports within Google Analytics, you will need to have certain datalayer
information that is transferred over to Google Analytics. So for example, the product that we are viewing
at the moment, the price, and so on. This is normally encoded into a datalayer. Now, Samcart has an extra advantage here because
it actually gives us all the information in a JavaScript object. Just to show you, you don’t have to do this
yourself. When we go into the developer tools, you can
go into the console and simply type in product. And this will give us an object here where
all the information that we basically would need is available. We have the ID, for example, we have the price,
we have the stock level, or even the name of the product. And this is actually also true for the bump
product that you can install right here, which also has its own price. Now, since this information is available within
JavaScript, we don’t actually have to set up a custom data layer. We can just pull it out via Google Tag Manager,
which is also based on JavaScript. So I’ve written a little custom JavaScript
variable that produces the right format of the data layer and pulls out the right information
right here. Then pushes this all back into our Google
Analytics tag which we have set up right here for our event, enhanced ecommerce tracking
view. So this is all set up. And it simply takes the data from this variable,
custom JavaScript Ecom product view. So you don’t have to change anything around
in terms of the data layer. Let’s have a look how this works. We are here already in the preview and debug
mode, reload. And we see our Google Analytics event ee view
lready fired, what does that mean? Well, let’s open up our developer tools. And I have a handy tool, which is the GAGTM
debugger, which gives me this view and I can look into what was sent over to Google Analytics. And then the enhanced ecommerce tracking section,
you can see they were product detail view sent. So of our primary product, and our bump products
or one on one coaching call, GTM Essentials training, and impression lists. So we have the list items in here as well. These are directly pulled from our product,
so you don’t have to enter any custom information. This all sends over a Google Analytics event. So we should already see this in the events. No, we don’t see it. Let me just check out we probably forgot to
change our Google Analytics ID. Down here we have our Google Analytics settings
variable which is a random number, right now. We would obviously need to change this to
our tracking information sent to the right account. So let’s copy that. And put that into our tracking ID right here
as well. Change the name. Refresh this and I’m going to reload our page
again. It’s going to send over the information hopefully. And then in our real time reporting, under
events we see a new event has entered. Now, the event name are really unnecessary. But since we are sending this with an event,
we can attach certain information that gets transferred to the ecommerce tracking, which
is then filled out. This might take a while to populate anything
between half an hour and 48 hours. So far, everything went automatically, especially
on these checkout page as first checkout page. But there is a problem because if you’re using
something called the funnel feature and up sells, then you will need to implement something
more onto your page. What does this mean? Well, let’s go through here. And I have this actually set up for the store
as well. Going to buy this product and place the order. I’m actually going to an upsell page. Now this upsell page contains a product. And you can choose to add this to your order. Or say no thanks. You can set this up in your upsell tab here
where you can set up the product that you want to sell. And also can setup the funnel, I have just
a simple funnel with one upsell. The problem though is on this page itself,
when we open up the developer tools and type in our product product, then we see this is
not actually available, like on the last page. So we can’t pull information out of the system. It’s not dynamically transferring this over
to JavaScript and we would not be able to access it via Google Tag Manager. So we will need to code that information in
ourselves. And this is where a bit of the downside is
of Samcart because when I look at the upsell right here, go into my upsell, there is no
custom HTML field, there is no way to fill the information.lthough I give them here the
product that it’s connected to, to pull all that information dynamically. And we will need to play some extra code. And this is only possible in this upsell HTML
window. To be honest, this upsell HTML window cause
me a lot of grief because it has a very weird behavior when you change something around. We will need to go over to the source panel
here and enter some custom JavaScript. What would this JavaScript look like. I also going to give you this code down below,
you can post this into all your upsells. This is a little bit of code which we unfortunately
need to fill out by ourselves. And once you have posted or change any code
around, you cannot simply click on save changes because it will overwrite the changes, somehow. You will need to click first on the source
and then click on save changes in order for these changes to be saved. Something that took me a while to figure out. So now we need to alter this code a little
bit. And we need to alter us with the stars here
the product name, the product ID and the product price. How would you you find those? Well if you go up here to our products, I’ll
open this in a new tab. So we have this available, we’ll go over to
our advanced integration scores which has all the information available. We want to have the product name, the ID,
which is up here in the URL, and obviously, also the price. So let’s start out with our ID right here. Copy that and put this into the right place
right here without the stars. But it needs to be within the quotation marks/ When I change over here and copy the name,
you might see that our price has already changed again back. Somehow this editor doesn’t retain the values. So again, I’m gonna copy the product ID, I
will put this into the price field here. And now I’m going to go to source save, go
back to source. And let’s put in our product name. This time, it didn’t change it. So product name, again, source, Save Changes
source. And last but not least, our price. Down here, whoops, I changed around the price. And the ID field. So let’s put this in like this. Okay, so now we have this information on here. And it will build the data layer push for
us based on this information that we have on here. Unfortunately, if you have a lot of these
upsell products, you will need to install this information into all the upsells that
you see in the upsell section right here. There is no way to pull this out dynamically. Now let’s see how does it actually behave. We’re going to go back to our upsell, reload
this. And we can see our event ee view again fired. We’re going to open up our developer tools,
look into GTMGA debugger, reload it again and see what information gets sent over. Yes, our information now gets sent over to
Google Analytics. Again, we should see a real time event that
happened for our product. So this gets tracked correctly now. And the last but not least, the page that
is most important, we add this to my order, we get to the thank you page, where we have
our three products that we have bought. And again here this information is dynamically
available through our JavaScript object. So we’ll be able to send this on via Google
Tag Manager, we have our Google Analytics event transaction. So again, here our transaction should be filled. And all the information and all the products
that we have bought are now sent over as far as I can see in the GTMGA debugger. Here we go, we have our purchase, and all
our three products that we have bought. So here’s again, something you don’t have
to necessarily implement anything, you just need to do this on the upsell pages. So now that all the information is sent over
correctly, we should be able to see this inside of our enhanced ecommerce tracking later on
here under conversions. And ecommerce reports, we should have our
sales performance, product performance, and product list report. Now, be aware that this is not a full on enhance
ecommerce tracking installation because enhance ecommerce tracking also has impact on your
homepage or the product pages that you display the product on. So this will not all be filled. But the most important information like the
sales information is available in these reports. So since this is working, and the information
has been sent over correctly, I went ahead and built some more variables like the Google
tags param which we would need for Google ads, and the custom product IDs which would
Facebook would need. So I’ve built some extra tags, you can choose
to keep them or delete them from your installation, which would be the Google Ads transaction,
the Google product remarketing. I also installed the conversion linker for
completion sake. And for Facebook, we have our base pixel with
our event and our transactions. Now, please be aware that you will need to
change around your ID here. So where this information gets sent to, in
order to install this correct, the same is true for our conversion ID in Google ads. Don’t leave this just running because then
there will be a lot of data sent to my test account. In the end. If you are happy with your installation, you
can go ahead and submit this as a version. Give it a name and publish this. So it goes live to all your users. And this is how you can install Google Tag
Manager and your tracking on to the samcart system. All right, so there you have it. This is how you can install Google Tag Manager
on Samcart and deploy the tracking like Google Analytics, Facebook ads, and the Google Ads
conversion tracking on to your page. As mentioned all the codes and the container
download will be linked up in the description below. So check that out as well. And if you have any questions, please leave
them in the comments. Now if you liked this video, then I’d love
for you to hit that thumbs up button and also check out our different videos that we have
linked up right here. Now my name is Julian, til next time

, , , , , , , , , , , , , , , , , , , , , ,

Post navigation

Leave a Reply

Your email address will not be published. Required fields are marked *