In this video, I'm going to show you how you can test your tracking codes before you actually
implement them in Google Tag Manager onto your website or pass them on to a developer.
All and more coming up.
Hey there, welcome back to another video of measureschool.com teaching you the data driven way of digital
marketing.
My name is Julian, and today we're here in our new studio.
It's still a work in progress, as you might hear, but nonetheless, I want to talk with
you today about a little technique that I use to test my tracking before I actually
implemented into Google Tag Manager or pass it on to a developer.
Why is this important?
Well, we have all been there, you go through the tracking steps, implement your tracking,
and at some point it's supposed to work but no data has received, there could be a multiple
and a host of reasons why this is.
But one might actually be that the tracking code that you are supposed to implement is
malformed because you may have done some customization sort of tracking code, added some parameters,
and suddenly, something is not working.
Now to make sure that you're tracking code is actually working correctly, I often test
my tracking codes before I actually implement them into Google Tag Manager or pass them
on to a developer that way, we don't have these feedback loops of going back and forth,
and later finding out well, the tracking code, the JavaScript code that we actually are supposed
to implement was malformed.
Now, Chrome gives us some great tools in order to accomplish this.
And that's what I want to show you today.
So let's dive in.
All right
for this tip, we're going to start out on our website where we want to test our tracking
before we actually put it into Google Tag Manager hard coded onto our website, or send
it on to a developer.
You know these tracking codes that you get from Google Analytics, for example, here in
our admin section, we have our tracking information, tracking code and here's a little bit of JavaScript
that you need to install on to the website.
So how can we test the beforehand?
Inside of our browser, we have access to JavaScript through our developer tools.
And we can open them right here on the right side, we have more tools.
And there is our developer tools, this will open up our developer tools.
And he would get a panel that shows us the HTML markup representation, the document object
model of the website that we are looking on right now.
By the way, you might be seeing something like this, it's just that you can't change
the site's up here of where the panel is displayed.
For our purposes, we want to first of all, look at the console, it was this is our direct
access to JavaScript inside of the browser.
So whatever we type here needs to be JavaScript confirm, and can be executed right away.
So for example, an alert statement,
press
enter, and the JavaScript is right away executed, we get this alert statement from JavaScript,
and therefore can use this to execute JavaScript inside of our browser.
What if we wanted to execute this JavaScript?
Well, it's not actually just JavaScript here, because we have script tags, which are HTML.
And then we have a little script blog right here, that is actual JavaScript.
And first of all, what this script does, it loads this library from Google Tag Manager,
let's just copy this URL right here, and open up this new tab, it's much more JavaScript,
this is the complete library of the gtag.
And let's just mark this all and copy it into our browser here and paste it in.
Let's press enter, and it executes, nothing really happens.
Because this is just a library.
Now, we want to test our tracking.
And this is down here inside of the script tags.
Let's copy that, go back to our page and read it as well, press enter, nothing happens again.
But inside of our tech assistant, we see that there was a page view generated, we also should
be to see this in our real time reporting that there was a page view that was just generated
for this account.
So here we go.
So again, we can already test our tracking inside of the developer tools.
Since now the library is loaded.
And we have this configuration set up, what if we wanted to send an event into Google
Analytics.
Or let's look up in the documentation of the gtag how to send events that's right here,
let's copy this and try it out.
Inside of our developer tools, we need to enter an action.
So in our case, it would be test tag or test event,
then we have a category
and a label, I will omit this last value here.
And as you might notice, I've entered valid JavaScript with these quotation marks around
my values, that the representation for string, I also got rid of that last comma here because
we didn't want to use the value, which also shows that this needs to be valid JavaScript.
Otherwise, you would get an error and it wouldn't be executed correctly.
But again, if I would have the comma in here, press Enter.
And that's doesn't do anything to the gtag.
So correct, says automatically the library.
But normally, it wouldn't be valid JavaScript, and you would have an error in there.
But again, you can test this all out beforehand.
And now we would see up here that there has been an event fired, and that should also
be visible again, inside our events right here.
So here is where the event fight, right.
So you can test already these codes inside of the console, as long as you provide it
with pure JavaScript, so the browser can interpret it.
But as you might have seen, it was a bit cumbersome to go through these lines here with my up
and down arrow key.
And if you make a mistake, you don't have any way to go back and forth between your
versions.
So what I would recommend if you have larger code blocks, just like this one, to use another
method, which is under sources tab.
Now, in the sources tab, you normally look at our HTML, here is the representation it
gets downloaded by the browser, different libraries, different platforms.
But there's also a little tab right here on the snippets, if you don't see that you can
probably activated in your settings where you can input complete blocks of code.
So for example, I can go here with a new snippet.
Lets call this Facebook pixel.
And he I can enter my JavaScript a little code editor right here.
So let's go over to Facebook.
Right here we have our code.
And this is a bit of HTML bit of JavaScript.
Let's just copy that and input that here.
As you can see, we have our code editor, it already complains here about at this is not
valid JavaScript.
So let's get rid of our script tags here and also the no script tag.
And here we go.
This is our Facebook pixel.
Here's the library that gets loaded.
And then the initiation call and the track call for the page view.
By the way, if you want to prettify something, you can format it here.
So the format it and you make it a little bit more readable in terms of functions, for
example, that are written out and so on, you can do that with any kind of code.
And then if you want to execute it, so press enter, like on the console, you simply click
down here, and it will run the code and open up in the window below here the console again,
you can get rid of that by clicking the X you can get it back by pressing the Escape
key.
So this has execute now.
And we see in our Facebook pixel helper that the page view was fired.
But we actually want to try out a another track call.
So let's go to the second step here, which will let us add events.
Let's say we wanted to add a purchase, we enter a conversion value five and the currency
euro and we get our code.
Let's copy this to the clipboard and also paste it underneath here.
Now again, they are script tags in there to delete them.
And let's execute this.
We get our message down here that something happened.
And in our Facebook pixel helper, we also see that a purchase was now sent over to Facebook.
So these are tools the console and the snippets are really great for trying out tracking codes
before you implement them by Google Tag Manager, hardcode them or send them on to your developer.
By the way, the snippets can be saved.
Now this is an unsaved one.
But if I press my command or control key S
we see that this is now saved.
And if I close and open up the browser, again, this will still be here it will be saved with
the settings of the browser.
So it's really a great alternative if you don't have a more powerful text so editor
available such as VS code or Sublime Text to edit your JavaScript.
Alright, so there you have it.
This is how you can test your tracking before you actually implemented it into Google Tag
Manager or pass it on to a developer.
If you have other techniques that save you time.
This saves me so much time and I'd love to hear from you in the comments down below.
And if you haven't yet, then maybe consider subscribing right over there.
Because we're bringing you new videos just like this one every week.
Now.
My name is Julian.
Till next time.