In this video, you’re going to learn how you can use Chrome’s Developer Tools as a Marketer to understand your website better.
Looking to kick-start your data journey? Hire us: https://old.measureschool.com/services/
RECOMMENDED MEASURE BOOKS: https://kit.com/Measureschool/recommended-measure-books
GEAR WE USED TO PRODUCE THIS VIDEO: https://kit.com/Measureschool/measureschool-youtube-gear
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.
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 toolset 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.
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 with