- Ever wonder what's going on in your browser
or when your page loads, a tracking code fires,
or your site just loads and loads and loads?
Then it's time to look under the hood
and examine the inner workings of your website.
In this video, I'm gonna show you
how you can use the Chrome Developer Tools
as a marketer to understand your website better.
All and more coming up right after this.
(funky digital music)
Hi there, and welcome to another video
of measureschool.com, where we teach you
the data-driven way of digital marketing.
My name is Julian, and on this channel, we do
tutorials, how-to videos, and take a look
at some useful tech for marketers, just like this one.
So if you haven't yet, consider subscribing.
So I'm a big believer that marketers
should become more technical, but where should they start?
Well, I would say, understanding the subject
of your marketing better, and this is,
most of the times, the website.
To make this learning experience more relevant,
you should look at your own website,
and understand what the marketing inner workings are.
That's why I think the Chrome Developer Tools
is a great tool set to get started
understanding the more technical bits
of your marketing that every marketer should really know.
So let's take a look at the Chrome Developer Tools
and how you can use them as a marketer.
We've got lots to cover, so let's dive in.
All right, today, our journey starts in our demo shop,
where we're gonna take a closer look
at the Developer Tools of Google Chrome.
Now, the Developer Tools are a built-in feature
of Google Chrome, but other browsers
have such developer tools as well,
or you might need to install a plug-in,
such as Firebug, for the Firefox browser.
But in this video, we're gonna specifically
talk about the Developer Tools.
How can you reach them?
Well, if you go into your View settings,
under Developer, you'll find here Developer Tools.
There's also a shortcut that you might able to use
in order to get there faster.
You will be greeted with another panel here
that lays over your website, and has different tabs up here.
Now, we won't go through all the different functionality,
because it goes really in-depth,
but as marketers, we should be aware
of some of these functionalities.
So let's get started.
First up, here we are in the Elements overview.
Now, the Elements overview gives you
a representation of the current HTML.
This is different to what you see
when you go to View Page Source,
because this is the initial HTML file
that is downloaded from the server.
This is the current HTML file,
as it is represented on this page right now.
This might differ because of the scripts,
and might download and manipulate
the page in one or the other way.
So, if you wanna find the current state,
you can look at this Element overview here.
And, as you might already saw, when I go over
one or the other line here, there are some markers
that come up in the website.
This is actually pretty useful,
if you want to find out where in the HTML markup
a certain element is placed.
You can go through the Elements pane directly,
and try to find out when it highlights it.
The other way to do it is to right-click,
and click on inspect element.
So it will jump right into it.
Or there is a selector tool right here
that lets you jump right to the element
that you are currently pointing at.
Now, how can this be useful?
As you might know, HTML and the CSS code
that you see right here are represented in the browser,
and if you wanted to change any of the content
or the appearance of this website,
you would need to do this in your HTML or CSS.
Now, it's very cumbersome to go back and forth
between your text editor to edit your HTML pages,
then reload this page and see what
the changes have resulted in, so with the Elements pane,
you can easily find the element that you wanna edit,
make your edits directly in this Elements pane,
and then it will be represented here,
and you would know what to change in your text editor
or in your CMS at this stage.
You can also use this, obviously,
to communicate it to a developer
more clearly than just telling him,
hey, change the text here and there.
The other panel that we can change here is,
the other panel represents the CSS.
And the CSS is the markup that governs
how a website is laid out, and the style elements
of this particular HTML element.
So, for example, here, you can change
the color of certain elements,
certain CSS rules on and off, or even change them.
Now, I use this pane very often once I want to identify
a given element and see how it is marked up
in the HTML itself, so, for example,
if I wanted to build in any kind of tracking
on this Contact button, I would like to see,
how is it marked up?
This is a list element with the ID menu-item-244,
which I can use in Google Tag Manager, for example,
to identify it uniquely on our page.
I also use this to communicate
any kind of changes that I wanna have made
to a developer, and be able to tell him
exactly where I wanna have something changed.
It is very powerful.
The third use case would actually be
for conversion rate optimization.
So if I wanted to change an element in an A/B test,
I would test it out beforehand in this overview panel.
Then I'll know what to change in my A/B testing tools,
such as Google Optimize.
One other great piece of information
is down here, the actual selector list,
that gives me information on how I can select it via CSS,
which can also be used in Google Tag Manager
with the CSS Selector.
The one button we haven't talked about yet
is this Toggle device toolbar,
which actually puts your browser
into a special state that lets you test
the website on different screens,
if it is responsive, and it also lets you
choose different devices to see
how your website looks like on this particular device.
There's also a function to connect Google Chrome DevTools
to a mobile device, but that's not something
I'm gonna get into right now.
All right, let's move on to the next panel,
which is the JavaScript console.
Now, the JavaScript console is a great tool,
especially if you work with tracking.
So, as you might have seen in my previous videos,
I use this often to look up certain variables,
such as the data layer, and see
what the current state of this variable holds.
Now, the JavaScript console is our direct access
to the JavaScript runtime environment.
It can give us a lot of information,
and we can even instruct our codes
to log out certain information,
in order to make it more visible.
So, for example, on this browser,
I have a tool installed called the GA Debugger,
and once I activate it, it's gonna reload the page.
Let's go out of our device mode here.
And now, we have the JavaScript console
filled with a lot of information,
a lot of debug information, of our Google Analytics.
And we can see what data was sent over,
and what hit type, and so on, which lets me really easily
identify any kind of problems, if there are any.
The other thing that the JavaScript console,
it's great for errors.
So if I go, for example, to this error page,
I can see up here, when we scroll up,
that there was an uncaught reference error.
There was something called that is not available.
Now, if I wanted to see where this error occurred,
there's a link right here that I can click,
and I go over to the Sources panel.
Now, the Sources panel is a panel where you see
all the different files that were downloaded
during the load process of your website.
And you can open certain files and read them,
and read their markup, to identify any errors.
For example, right here, we see
this is where the error originated,
and I could change that in my markup.
Apparently, a variable was called that is undefined.
Now, there are many different other JavaScript
functionalities to debug this.
So you can set break points, for example,
but I won't get into this right now.
For you, it might just be important
to look at your console and see if there are any errors
that are occurring and how they originate.
All right, let's move on to the Network tab.
Now, once we reload this page, we see up here
that there's a timeline that develops,
and we can mark within that timeline a given point
and see what page loaded, or what part
of the page loaded, during that time period.
So this was the actual document.
The HTML has loaded at the beginning.
We have a little bit more stuff here.
And we see that, at that point, the CSS has loaded,
and the jQuery file, and some more JavaScript.
Now, this is especially great for SEO folks
who want to optimize their website for speed.
Because, here, you can see the markup decides when
each element and each file of your website is loaded,
and you could optimize accordingly
and see any kind of bigger files that take a long time.
For example, this file here takes a bit of time,
this is the analytics.js, till we get a response
and are able to proceed.
Now, this is also particularly great
if you wanted to see one of the other requests
that gets sent from your browser to a server.
So, for example, what is interesting for us,
if we have a Google Analytics code firing,
is there a collect request?
It sends over the hidden image file here,
and we can read up a lot of information.
We can see the request URL, which has
all the different parameters that let
the Google Analytics measurement protocol
translate it into an actual Google Analytics hit.
So, here, we have, for example, dl, which is our page path.
We have sr, which is the resolution of the display.
We have our client ID, which identifies
us uniquely to Google Analytics.
And we have, of course, the Google Analytics ID,
to which this request belongs to.
So we can see a lot of great information,
how a request was actually sent.
We have the headers right here,
and can see the status code of what information was sent.
A little bit cumbersome to figure out,
so I usually go with the console request here,
and let it dissect within the JavaScript console.
But if you wanna get more into the nitty-gritty,
you can certainly use this Network tab
in order to dissect your requests.
All right, I'm gonna skip over
the Timeline and the Profiles.
These are really more advanced
functionalities for developers.
I'll go into the Application tab,
just to show you a little bit more of what you can do.
In the Application tab, you can see
more interesting information, such as
the storage and the cache that have been created
during the page load of your website,
and the interesting part, for people who do
any kind of tracking, or marketers, are the cookies.
So you can see what cookies were set on the browser,
and you can go ahead and see which cookie was set,
and can also delete them.
This can be quite important if you wanted to reset
the user identification of Google Analytics, for example.
You can also clear all your cookies right away,
and, are henceforth not cookied anymore,
and can see, again, how cookies are built up
from a fresh kind of user.
We also have the Local Storage and the Session Storage.
These will get more important once HTML5
(funky digital music) gets used more and more,
instead of cookies.
So there you have it.
This is how you can use
the Chrome Developer Tools as a marketer.
Now, I think it's a great tool set
for starting to look under the hood
and understanding the more technical bits
of digital marketing more, but I couldn't cover
all the different aspects of Chrome DevTools,
and I would like to hear from you,
what do you use Chrome DevTools for
in your daily marketing life?
Leave a comment below, and share it
with everybody here in this awesome community.
All right, and if you liked this video,
please give us a thumbs up, and subscribe to this channel,
because we will bring you new videos every Wednesday.
My name is Julian.
Till next time.