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