The Most Complete Introduction to Google Tag Manager (GTM) for 2021 | Ziga Berce | Skillshare

Playback Speed


  • 0.5x
  • 1x (Normal)
  • 1.25x
  • 1.5x
  • 2x

The Most Complete Introduction to Google Tag Manager (GTM) for 2021

teacher avatar Ziga Berce, Founder, Entrepreneur & Lecturer

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Watch this class and thousands more

Get unlimited access to every class
Taught by industry leaders & working professionals
Topics include illustration, design, photography, and more

Lessons in This Class

20 Lessons (1h 51m)
    • 1. Introduction to The Class

      2:36
    • 2. What is Google Tag Manager and Why do You Need it

      2:54
    • 3. Interface overview

      8:30
    • 4. Best Practices & Considerations

      7:18
    • 5. Naming conventions

      6:54
    • 6. Useful Chrome Plugins For Working With Google Tag Manager

      7:24
    • 7. Create a Google Tag Manager Account

      3:52
    • 8. The Overview of 5 Instalation Methods

      1:16
    • 9. Manual Installation of Google Tag Manager on Your Website

      4:08
    • 10. Wordpress Setup of Google Tag Manager

      5:14
    • 11. Shopify Setup of Google Tag Manager

      7:12
    • 12. Squarespace Setup Of Google Tag Manager

      2:12
    • 13. Inject GTM Container to any Website

      2:32
    • 14. Google Analytics Setup & Publishing The First Version

      8:18
    • 15. Google Ads Remarketing Setup

      5:44
    • 16. Testing & Debugging Before Publishing a New Version

      8:40
    • 17. Facebook Pixel Setup

      14:07
    • 18. Copy Tag and Export Container

      4:13
    • 19. Troubleshooting Problems You Might Encounter

      6:41
    • 20. The Wrap up

      1:02
  • --
  • Beginner level
  • Intermediate level
  • Advanced level
  • All levels
  • Beg/Int level
  • Int/Adv level

Community Generated

The level is determined by a majority opinion of students who have reviewed this class. The teacher's recommendation is shown until at least 5 student responses are collected.

269

Students

--

Projects

About This Class

In this class, you will learn all the basic Google Tag Manager concepts, tools, and tags as well as how to set it up on the 4 most popular sites and e-commerce builders.

I'll show you some best practices and naming conventions I've been using for the past few years. As well as teach you to troubleshoot any problems that might arise.

We’ll go step by step over the setup of the 3 most popular tracking tools (Google Analytics, Google Ads, and Facebook pixel).

And the best part is you'll learn to do all this without any special technical knowledge or the need of your IT department.

By the end of this class, you will have a deep understanding of Google Tag Manager (GTM) and a basic starting point for all your future tag integrations.

This class is loosely structured into three modules each with a specific purpose:

  • The initial Google Tag Manager installation and browser setup. We’ll take a look at some of the essential browser plugins that will help you debug and troubleshoot problems.
    I’ll show you how to create and set up GTM on the most popular eCommerce platforms (WordPress, Shopify, Squarespace) and a custom website.
    We’ll go through some of the most common problems that might occur during your setup and how to solve them.
  • Google Tag Manager overview and some good practices. A few lessons will be a bit more theoretical as I’ll explain different parts of the Google Tag Manager interface. We’ll take a look at what tags, variables, and triggers are used for. I will also give you some of the best practices I've picked up over the years.
  • Setup 3 essential tags and publish them. In the end, we’ll also set up all the must-have tracking like Facebook, Google Analytics, …
    Then we’ll take a look at how to create a new version and publish the container on your website.
    We will also take a look at how to copy and paste your tags to different containers and accounts.
    Most importantly we'll learn how to check if your tags work correctly with the help of Google Tag Assistant.

If you’ve just started your own eCommerce store and would like to learn how to set up a Google Tag Manager, then join this class. You'll learn the most essential tracking concepts that each business nowadays needs.

If you are a marketer who wants more control setting up marketing tools and doing faster experiments without involving the IT department, then this class is for you as well.

So, stop thinking and start learning now!

PART TWO: A class about more advanced GTM is available here: https://skl.sh/3eyaTGZ

Meet Your Teacher

Teacher Profile Image

Ziga Berce

Founder, Entrepreneur & Lecturer

Teacher

Hello, I'm Ziga and I help businesses grow.

I'm a marketing professional with 8 years of experience in leading teams, accelerating growth, strategic positioning, brand building, and campaign management involving both B2C & B2B start-ups. Result-oriented, decisive leader with a strong entrepreneurial "can do" spirit and track record of increasing sales and growing bottom line through product-led growth.

In the past few years I've:
  ★ Raised over $3 Million through Crowdfunding campaigns.
  ★ Spearheaded 8 successful international B2C marketing campaigns, which increased sales by 8%.
  ★ Managed a Kickstarter launch campaign in Slovenia resulting in $4.3 Million raised in the first 2 months.
  ★ Built and led growth ma... See full profile

Class Ratings

Expectations Met?
  • Exceeded!
    0%
  • Yes
    0%
  • Somewhat
    0%
  • Not really
    0%
Reviews Archive

In October 2018, we updated our review system to improve the way we collect feedback. Below are the reviews written before that update.

Why Join Skillshare?

Take award-winning Skillshare Original Classes

Each class has short lessons, hands-on projects

Your membership supports Skillshare teachers

Learn From Anywhere

Take classes on the go with the Skillshare app. Stream or download to watch on the plane, the subway, or wherever you learn best.

Transcripts

1. Introduction to The Class: Hello and welcome to this Google tag manager course. I'm Žiga and I'll be your instructor. By the end of this course, you will have a deep understanding on how Google tag manager works and what you can do with it. We’ll start with the basics like getting to know Google tag manager and setting it up. We’ll also discuss some common problems you might encounter and how to solve them. Then we’ll dive straight into the meat of the course. Along the way I will show you real-world examples so you can build your own project as we go along. OK. So you must be wondering, who am I and why am I teaching you all this? Well, I’ve been in digital marketing for over 8 years and in this time I’ve had 2 successful crowdfunding campaigns and helped more than 10 others raise over $1 million. I've spoken at various conferences and marketing events and even lectured multiple generations of small business owners on different topics of digital marketing. And for the past two years, I've also had my own agency focused on helping businesses automate their marketing. Through all this time, I've been actively using Google tag manager to help me and my clients set everything up. Before we dive in, I just want to explain how you can get the most out of this course. If you're new to Google Tag Manager, I strongly suggest you start from the beginning and work your way all the way to the end. This will ensure that you have all the necessary knowledge for more advanced topics. Once you start the course, don't let days or weeks pass between lessons or you will start to forget what you've already learned. Trust me, having to go back and sit through lectures you've already watch is a drag. Carve a study space and eliminate all distractions. Then stick to it as you would in college. This space can be simple as a desk with a chair and some unobtrusive background music. If you have a question or problem during the course, feel free to ask them in the Q&A section or contact me directly. I'll be more than happy to help you. One more important tip. Take notes. If possible in an actual notebook. The physical act of writing will help you better retain the information. Last but not least, have fun and enjoy your learning experience. I'm super excited to share everything with you. So let's get started. 2. What is Google Tag Manager and Why do You Need it: If you're new to Google tag manager, you're probably asking yourself, why do I even need it and can't I do all these things some other way? Well, the short answer to both questions is yes. But let me tell you why using Google tag manager is a much better option. Imagine this. You just found a new marketing tool that will help generate more leads. and you want to test it out. You register for the service. and they provide you with a small script you need to install on your Web site. Now, you might not know exactly how to do this or you just don't have access to the servers. So you contact developers responsible for maintaining your website. You get the prompt response that they're currently fixing some bugs and will get back to as soon as possible. Well, we all know this can take just a few hours, but sometimes it can take days. And when they finally get back to you, it just might be because something more urgent came along and your tests will have to be postponed again. Sounds familiar? Well, these sort of situations can greatly impact your ability to quickly execute different marketing experiments and adapt to current situations. It would be perfect if you could have your own personal developer on hold. But unfortunately, most of us don't have that luxury. This is where Google Tag Manager can come to rescue. And even though you can't consider it as a full replacement for a developer, it will greatly empower you and your marketing team. So let's go through some of the things you can easily do with Google Tag Manager. As I already mentioned, you can simply install and remove third party scripts without the help from a developer. You also get a full overview of the scripts you're currently running on your website. This way, you can quickly check which marketing tools you have in use and disable those that you don't use anymore, thus speeding up your website. Another cool feature is publishing and version control. Any new changes you make have to be published before they appear live on your website. Also, when you do so, this snapshot of the current state is saved as a new version. This allows you to revert to any of the past versions if you so require. On top of that google tag manager enables you to test your scripts in the live environment without impacting of your existing traffic. This way, you can make sure that your new changes will work perfectly when you publish them. Every time. As you see, Google Tag Manager is a powerful companion that can help you manage all your marketing tools in one place. But that's just scratching the surface. And you learn much more in the upcoming course. 3. Interface overview: Let's do now a Google tag manager interface overview. This will help you better understand where you can find things and how to use them. So the first thing you can see, we're in the workspace tab and there's a sort of an overview of everything that is going on currently in your container. So you have the description of the container, if you would set it. All the changes for the tag, triggers and variables will be visible here. Versions as well. Which one is currently active, how many versions you have, who published it the latest and so on. Now you can have multiple work places. If you have multiple people working on the same container it will allow you to do your own changes without interrupting their work. So if somebody is doing some experiments and they haven't finished building up their container, you can still work on your project and publish it before they finish theirs. Or other cases why you could use workspaces is, for example, you have some new tags you want to test. You're not quite sure if you wanna stick with them. You just want to experiment a little bit. You can create a new workspace test it out and if it doesn't work, you can just delete it or revert back to this workspace. If we take a look, you have only three different workspaces available in the free version of Google tag manager. So keep that in mind. The next thing are Tags they are basically sort of like your workers. These are little scripts that will run when something happens. This can be, for example, like Facebook pixel or Google analytics pixel. And basically tags allow you to deploy your marketing scripts on your Web sites. What you can do with this tags is also modify cookies, inject HTML or JavaScript code and many other things which we'll see in the future lectures. The next section are triggers and you can imagine triggers sort of as conditions you attach to tags. So basically when you are deciding when the tag will insert a certain script or a code on your website or when it will do something, you have to define when this will happen. And triggers basically dictate when tags will fire. There are multiple triggers from really broad ones, like generic, when certain tag can be fired on every single page. So this you could use for your Google analytics Or really specific triggers when you want let's say, for example: Facebook conversion pixel only to fire when a conversion happens. Maybe on your thank you page after customer has bought a product. We'll go into more details on triggers again later on when we actually make some. The next section are variables and variables are sort of like containers for different values. You have two sections here. Ones are builtin variables which Google tag manager already predefined and you can configure more. Or user defined variables which you yourself can define however you want. So variables, in short, are, for example, as you can see here, as a page, URL so when the page loads in these variable, you will get the URL of your Web site or you'll get a referer where this person came from. Or of course, you can have like which element was clicked on the page or how far along the page somebody scrolled So variables hold all this information which you can then use in triggers or tags to do something depending on the state in which variable currently is. The next section is folders which basically allow you to better manage or organize tags, triggers and variables. And we'll look into best practices on how to use that in the next lesson. The last part is templates and these are basically community build helpful tools like tags or variables and will actually be using a couple of those because they simplify certain things that you would otherwise need to either program in JavaScript or develop yourself. You can search the gallery, for example, for tag templates and you can see there's a lot of already premade tags. And of course, the same goes for variables. There are two more important things that I want to point out. And these are these two buttons. The first one is the submit button, which creates a new version of your current container setup and published this version on your Web site. You don't need to publish it, though. You can just create a new version and after a certain number of versions, you can deploy it live on your Web site. You can, of course, have different testing environments where you can publish this version to. The other button is the preview button and the preview button enables you to debug Google tag manager containers. It will enable you to see what's happening with the container live on your Web site. And you'll be using these two buttons a lot. The next tab is the versions tab and in the versions tab, you'll have an overview of all the versions you have created, which versions are currently live, or each version you will see like a description and title. And with how many tags, triggers and variables it holds. And you can, of course, revert to previous versions if you so desire and see what has changed from version to version. So this is a good overview of the sort of a history of all the things you have published. The last tab is the admin section. And here you can basically manage all your account settings, user management per account or maybe for container. You also can export your current version or any version you have already created so you can migrate it to another container or maybe just create a backup for some future time. You can, of course, import containers here as well. And if you forgot where you can find your install Google tag manager code here is another way to just click on it and you will get that code. Well, this is the whole overview of the interface. We'll see a bit more details once we start working with it. 4. Best Practices & Considerations: Now, let's take a look at what you need to consider when working with Google tag manager and what are some of the best practices? The first thing you need to consider is that google tag manager is basically a JavaScript based. This means that it's limited only to your browser window. So you can do whatever JavaScript can do inside your browser, but you cannot track or analyze or otherwise impact anything outside of it. The other thing is that if your visitors have JavaScript disabled, the Google tag manager won't have its full functionality. It's only gonna be limited to image tags, which were gonna look a little bit later. This is one of the limitations you have to be aware of. Second one, which is not actually a limitation, but more of a constraint on your part is how you can expose data to Google tag manager. It won't know about all your data on your site it will only know about the data you provided. For example, if you use a plugin in WordPress, then you can simply check some checkboxes and you will get that extra data automatically pushed to the data layer and it will be accessible in Google tag manager. Otherwise, you'll have to ask a developer to expose some of your data that isn't available on frontend of your Web site. The next thing you need to consider is how your Google tag manager and tags will impact the speed of your Web site. Even though the Google tag manager is asynchronously loading, it still impacts the speed of the processing of your Web site. It's not going to impact much the rendering, so how fast your page is rendered, but it's gonna consume your CPU nevertheless. And also, you have to consider if you have lots and lots of tags. This would significantly slow down your Web site, and especially if you will do some sort of manipulations of HTML. Then this might slow down the whole page even more. So if you have a chance to limit those kind of tags, please do it. And also, you can delay some of the non important tags to fire a little bit later on. In this way, your page will seem to load faster. The last point I want to make a google tag manager is just a tool. Depending on how you use it and what you know about it, it's going to be, again, a limiting factor. So if you know HTML, if you know JavaScript, if you know how to debug problems, then of course you will be using Google tag manager to its full potential. That being said, in this course, we're going to focus on tags and examples where you don't need that knowledge. But if you do have that knowledge, you're gonna be able to do much, much more. OK. So let's check out some good practices when using Google tag manager. Going back to the speed if you have some unused tags or triggers, please remove them from Google tag manager. Anything you don't use and it keeps on loading it's going to slow down your Web site. So if you have some tracking tools that you were testing, and you don't anymore just remove them. The same goes if you have some tracking data that you're gathering, but you rarely check it and it's not that important. Just remove it. This is going to significantly impact the loading speed. So the next thing is version control. When you're making new versions of your containers try and describe them in more detail. You have two fields. One is the title and the other one is the description. Try to make them as clear as possible so when you'll be looking through your versions and if you want to restore a previous version, you will immediately know which version does what or which elements, tags, triggers were present in a certain version. Or which changes were made in that version so you can decide if this is the right version for you. Also, consider doing versions in increments. don't wait until you have like 10 different tags, 5 different variables, 8 different triggers all set up And then just make one huge version out of it. Try to segment them by logical sets. This way when you'll be reverting to a certain version, you won't lose all the updates from the other versions. The next one is more of a general good practice whenever you do things. It's user management. When you have multiple users working on your container, on your accounts, please give each user its own access. Don't just share your account with them. Don't share your password with them. This is really bad from a security point of view but also, if you give access to each user individually, you will be able to see who did changes to the container. Who made specific tags, triggers, who published something. So you'll have an overview of what is going on inside of your container. And it's not that complicated to create users so there's basically no reason for you not to do that. The last thing which is kind of really important is: make a plan. Don't just jump into Google tag manager and start clicking around. If you're testing, that's OK. But if you want to use it for a specific purpose, make a plan. Make a strategy how you want to approach it. Which things do you really need? What you want to track? What do you want to build and mark it all in a document? You are probably doing this outside Google tag manager anyway. So try to have a plan before you jump in and start working on your tags. 5. Naming conventions: Let's take a look at some of the naming conventions now. We've already talked about the account names, which for most part should be your company name. Or if you're doing this for your clients just create a new account for them with their company name. If you're working with multiple clients, then use different account for each client because all the users inside the same account can see other users and thus they might see who you're working with. So I suggest you just make different accounts for different clients. As for the containers, just use your Web site if you're publishing it on the Web or app name, if you're using it in the app. You can also separate it by your environments so you can have multiple different containers for each environment like development environment, staging environment, testing environment and so on. But Google tag manager gives you a better option inside one container to handle this. So I would suggest to just use one container for all the environments it's going to be much easier to handle. Next point I want to make is how to name tags, triggers and variables. Let's start with tags. The best way to name the tags, in my personal opinion, is to start with the product then go over to the tracking type and at the end which page it affects. So, for example, here in the presentation, you can see that we've got, Facebook. So this is the product. It's about the pixel. So this is the tracking type and it effects add to card. So the same goes for Google Analytics. And then it's events. And what is going on... Subscribe. And again, Google Analytics just triggering a page view. You can abbreviate all these products or you can just write them in full. I would suggest you pick something that works for you and stick with it. Don't just switch it around. If you decide to abbreviate everything then abbreviate it if you decide to go with the full name, do it this way. If you want to capitalize everything or lowercase it all that title case it as I have it here just stick with that. I suggest you a title case tags and triggers and I'll explain why I don't do that with variables a bit later. So let's check the triggers. For the triggers I would suggest you use the format where you said the event as a first part and then more details after it. . For example, you can have like an event and then a location or maybe time or maybe some sort of filter or action. And you can see here in the examples. This is a timer trigger after 30 seconds. So it explains what this trigger does when you're be doing this. Same goes for the tags. If you prefix it the same way when Google tag manager sorts it you will have all the timers in the same spot and it's easier to find them when you're looking for them. Google tag manager allows you to sort by trigger type or tag type but this way it's automatically going to be sorted. So let's go to the variables now, I use lower case in variables because Google tag manager title cases, all the tags, triggers and variables and I want to be able to distinguish between built-In variables and my created variables. As I structured the variables in this way that I set the type of the variable and then what it contains. So, for example, this is like a DIV variable which holds user ID and then you can have like an URL variable which holds query parameters. And if you want to specify specifically which query parameter, I would suggest you add at the end sort of like what it's holding like an affiliate ID or maybe an email. If you're passing an email or something like that, or for example, you can have like a cookie for referral. So the last point is folders in Google Analytics. And basically, inside the folders, you can group tags, triggers and variables together. And this will help you combine and sort and have a better overview of what you're doing. What you need to know is that tags, variables and triggers can only be in one folder. Since variables can be present in multiple triggers and in multiple tags, you have to really think through how you want to set up these folders. And it fully depends on you. I can give you just some of the suggestions. As you already see them here you can group them by tag type. So, for example, everything that's connected to Google, Google Analytics or some everything that's connected to Facebook or some other product. You can group them by functional groups, sort of like everything that's related to the checkout or everything that's related to your affiliate tracking. Or you can just simply create folders by team members so you can see who created which tags, which variables and triggers. Okay. That's it for best practices and considerations. And I'll see you in the next section. 6. Useful Chrome Plugins For Working With Google Tag Manager: First thing I want to talk about are some of the essential plugins for Google Chrome, which I use whenever I'm working with Google Tag Manager. . I made this file with all the links and short descriptions, and you can find it under the resources. You don't need to install all these plugins, but I would suggest you install the ones that we'll use throughout the course. Of course, there are many more plugins out there you can use which have advanced functionalities when working with Google Tag Manager. But we won't go into those plugins here as we are not using them during the course. So the first plugin we'll check is tag assistant by Google. And what this plugin does, it helps you track all the activity from different Google products like Google tag manager, but also from Google Analytics, Google ads. It's going to show you which of these pixels actually fired, which are working, which are not which events were triggered. And this way, you can really get into all the details of what's going on and see if everything is working as it should. As you can see here on this screenshot, if this icon is going to be turned green, then everything is working as it should. If it's blue, which is not marked here, then basically there's sort of like implementation, which isn't expected, but it should be working OK. If it's yellow or red then there are some problems with the implementation of this pixel. and you should check it out. One of the best things about this plugin is, let me just click on mine, is the record button. The record button allows you to record the whole session all the tags and all the scripts that loaded. And you can check out the logs later on and see if everything was working as it should. This is one of the four plugins we'll check which verify the social and advertising pixels. The next one is Facebook pixel and it has sort of a similar functionality as Google tag assistant. It's gonna give you more detail on triggers, for the Facebook. So if the pixel is properly loaded, if the events were triggered, which events were triggered and so on. So more details so you can debug Facebook side of the things easier. As you can see before I continue, I have most of these plugins installed here and we're gonna use them throughout the course and you'll see exactly how they work. So you don't need to bother right now what exactly each of these plugins does you can just install them as we go. So the next one is Twitter. Again, this one checks for the implementation of Twitter pixel. It's going to give you some more details on firing events and everything connected to Twitter. So if you're going to use Twitter, you can use it to check if everything works. And the last one of this section is for Bing. So if you're doing some Bing advertising, then, of course, you want to have this pixel, Sorry, you want to have this plugin, enabled so it'll be easier for you to debug. The next tool is tag explorer. And basically what this does is sort of show you all those pixels and all those scripts running on your Web site in one interface. So you can easily see, for example, here, as you can see on the screen screenshot that your Facebook pixel is running, that your Universal Analytics is running, as well as Google tag manager. But it's not going to give you more details about which events are triggered, which data is pased through that service. So it's sort of a cool plugin for Quick overview of the scripts that are currently running, but it's not going to give you more detail in some cases. You can also disable those pixels so they're not tracking you. For example, if you want to surf other Web sites. The next plugin we're going to check is GTM/GA debug . And what this plugin does, it enables you to get more details about Google Tag Manager and also Google Analytics in a cool interface. And as you can see here, you can have like different. You can check which events were fired, which values variables hold and which data was pushed to data layer et cetera. So we're going to get into these things a bit later on down the course. So you know exactly what I'm talking about. But just trust me for now this is a great tool for debugging purposes. The next one is GTM Copy Paste, which is a really useful tool if you manage or have multiple Google tag manager accounts. As it enables you to simply copy paste tags or triggers and variables from one account to another. As Google tag manager doesn't have this functionality natively in its system. It's going to spare you a bunch of time if you want to copy certain tags from one account to another. So this is really useful if you're working with multiple acounts. And the last one is Adswerve, I'm not sure exactly how to pronounce it, which is a really cool too, with lots of advanced features like injecting Google tag manager code on random sites. You can inject it on your own site without actually implementing it, which we'll talk about a bit later. You can monitor data layer in real time, you can see some hits from Google Analytics and so on. So this is a really cool plugin with lots of functionalities which you can use further down the road when you become a bit more advanced. So this is a quick overview of the plugins. As I said at the beginning you don't need to install all of them. You can install them one by one as we go along as you'll see which ones are really useful for you and which ones aren't. For the time being I would at least suggest to you to install tag assistant because in the next section will be implementing Google Tag Manager, and this will be one of the easiest ways to check if everything is working correctly. 7. Create a Google Tag Manager Account: So let's take a look now how you can access Google Tag Manager and create your first account. You can basically just type tagmanager.google.com or just Google "Tag Manager". And probably the first hit is going to be the correct one. So before you can access it, you have to have a Google account. If you don't have it, you have to create one. If you already have a Google account, you could just log in with your existing account. And this is something what I'll do right now. And you can access it, as you'll see in just a second. I already have some accounts created here. If this is your first time making it, it's going to be similar as just clicking here on create account. If you already have accounts and you want to create a new one just click here. So this is the screen you'll see for the first time when you create a new account. The first thing you need to do is do an account container setup for the account name. It's best to use your company name or if you're doing this for your client use their company name. So for now, I'll just use "GTM course". Then you can select your country. I'll just leave it as United States. Then you have to set up your container. A container is basically a collection of all your tags and scripts, which we'll see in just a moment for a particular platform. So like your Web site, if you have multiple Web sites, you can have multiple containers, each one different for a specific Web site or for mobile apps like for iOS or an Android, or even if you use Google AMP pages, you can use that as well. Best practice to name a container is to use the name of the Web site or the mobile app you're using. So for our purpose I'll just type "gtm.outtale.com". And I'll select, the Web site as we will be testing these on our Web site store. Then you have to agree to some terms of services. You have to accept them and after that, your account is all set up. The first thing you'll see when this happens is the instructions on how to set everything up on your Web site. This is probably going to be the last thing you'll needs to ask your developer to do. To insert this code on your Web site. We'll also look at how you can insert these codes on your Web site for yourself. For now, you can basically just copy it and send it to a developer if for some reason you don't see this instal Google Tag Manager screen the first time you log in. Or if you already created an account and you forgot where to find this code it's easily accessible through Google Tag manager ID. You basically click on it and you'll get right back to this screen. If you have any questions on how to implement this Google also provides a quick start guide with some additional information. Now let's check out how you can insert these codes into your Web site. 8. The Overview of 5 Instalation Methods: Now, let's look how we can install the Google tag manager code for the container we got in the previous lesson. We're going to look at five different ways and how we can put this on our store or on our website. The first will be the manual installation. This will be a little bit more technical but if you have custom website, this will help you get through this. Next, we'll check WordPress, Shopify and Squarespace, which are all platforms. And lastly, we'll take a look at tag manager injector through Adswerve, which will enable you to inject Google tag manager Container code on any website. It's not hacking it's basically just doing this in your own browser for testing purposes. You can skip to the section which interests you or you can listen to the whole lecture and learn how to implement these codes on any of these platforms. So let's get started with manual installation first. 9. Manual Installation of Google Tag Manager on Your Website: I have set up demo sites for this purpose. And as you can see currently, if we check in Google tag assistant, we can see that there are no tags running on this Web site. To install Google tag manager container on your Web site you need to have an access to the files on your Web site. You can either do this through an FTP or through your hosting provider. They usually give you some sort of file manager to manage all these files. Then you have to find the correct file to put this code in. Usually if this is like a custom built Web site, there's going to be an "index.something" file, which usually is the first found it loads and it contains the header and the footer of the page. With some platforms it's a bit different so you'll have to check that. And if they use sort of like themes, it might be different again. But the purpose is to find the file which holds the header and the beginning of the body, which will shortly see what I mean by. OK. So let's open this file and you'll see a bunch of code in here and for now, we're just going to leave it. So if we go back to Google tag manager. It says that we need to paste the first part of the codes into the head section of the page as high as possible. I'm gonna go back to my file and I see this is the head section which stretches from here to about here. I'm gonna put this Google tag manager code just below the title part for now and then I'm going to go to the second part, which says we need to put it just below the body opening tag. We have to go back to our file. And since there's a lot of same text, you can find body tag quite easily just by searching inside your browser, by typing "body". And you see, we already found it here. And I'm just going to put this script right below the opening tag. I'm going to save it. And let's wait. Let's go back to our demo site for now. Nothing happens. So we need to refresh the page. We'll wait a bit. As you see, the Google tag manager has loaded it says 1 here, it's yellow, though. As I said before, there is a problem with that. Let's check out what the problem is. And it says this could be due to empty or unpublished container. Since we have nothing in the container yet and we haven't published it yet this is all right for now. For our purpose we already know that the tag is firing and it should be working. Of course, you can check it with Tag Explorer as well and you'll see Google Tag Manager running now. But if you haven't installed these plugins you can check this by checking the source code of the page as well. In most browsers you right click on the background of the Web site and click "view page source". Again, all this code is going to be opened, as you've seen before in the file manager. And then you can just browse through it and see that Google tag manager code has been added. And this is under the title tag. And the other one is just below the body there. So everything is OK. And you can start working on your tags and scripts. 10. Wordpress Setup of Google Tag Manager: Now, let's take a look how we would implement the same code in WordPress. For that purpose I created WordPress store on the same site. So I'm just gonna check it out. As you can see, it works and it's not firing any tags for now. So let's go to our WordPress. You can just write "wp-admin". There are two ways you can do this in WordPress. The first one is, again, manually installation, which I'm just gonna breeze through because this is not the point right here. But you can do this under the appearance and under the theme editor where you'll basically have the same access to Theme files as you had prior in the hosting provider section. The theme header file is the correct one, but it's going to depend on your theme if you have like a child team or whatever. But for my a vanilla setup, you can see I have here the head section and the body section and I could just copy paste the code right here and save it. But what we're gonna do, we're gonna use a plugin. So let's go and add a new plugin for installing Google tag manager. And what you'll see is that there are many google tag manager plugins, but the one I use and I would suggest you use as well, is the Google manager for WordPress by Thomas Geiger. And you'll see in a while that it gives you so many options without the need of a developer and it just works great. So let's install it. And activate it. All right. And let's go to the settings. So the first thing you'll see, there's so many steps which will go through but for now, we need to get a Google tag manager ID first. If we go back to our Google tag manager, you'll see that this is your ID. You can copy paste it from here. Or you can copy paste it from here. So I just did that and I'll go back and I'll paste it in. Just make sure when you paste things that you don't have any special spaces at the beginning or at the end. And I had one so I'm just going to remove it. And then I have to select a container code placement. The "footer of the page", which is not recommended by Google, basically means that the second part of the code, which is meant for all the browsers that for some reason have JavaScript disabled, will be put almost at the end of the page. This is not recommended because a lot of scripts and tags that will fire might not fire correctly or they will fire correctly, but not in time. So we're gonna use the "codeless injection" that could break your Frontend. This is the warning. If this happens, then use the "footer of the page". Or if you have a possibility to ask your developer or if you want to do it yourself, you can use that custom, but then you'll need to put these codes below the body tag as we saw prior in the theme editor. Okay, so let's just save changes for now and check if everything works in the frontend. Let's go back to our shop. And let's refresh the page. As you see, the Google tag manager fired. We didn't publish the container yet or we didn't put anything inside, so it's still yellow. But as we can see, for now, it works. Later on, we'll check what all these tabs do. But I just want to go quickly over them. Basically, what it allows you to add some special options in the data layer without programming anything. So you can just check or uncheck these boxes. And especially what is useful is in the integration part for the Woocommerce site. You can basically add all that extra data that will be saved when the conversion happens just by checking those checkboxes. So this is how you can install it on WordPress. 11. Shopify Setup of Google Tag Manager: OK. Now let's check how we can integrate Google tag manager on our Shopify store. So first, go into your Shopify admin. But before we start that, I'm just gonna show you my Shopify store and we'll check if Google tag manager is already installed. As you see no Google tag manager yet. And this is just really basic store. Shopify has some good instructions on how to install Google tag manager in their help center but as you see, it mostly focuses on Shopify plus online stores. I don't have a plus online store. I just have a basic store. But we'll use some of their instructions to set a part of the script. So as it says here, we need to copy the Google tag manager code snippets into two files, "theme.liquid" and "checkout.liquid" and we can copy the first part into the liquid file by going to online store themes, selecting our theme, going under actions and into the edit code section. This first part is really similar to the manual installation and WordPress manual installation we talked before. So we can see here we have the head section and if we scroll down a bit, have the body section. But as per their instructions if we just put it into the liquid file, it's not gonna show everywhere. It's not going to be visible in the checkout process. For that, we need to put it in the "checkout.liquid" as well. But as I mentioned, as I'm on a basic plan, I don't have this, liquid file anywhere here. There's no "checkout.liquid" file for me to modify. So we'll do it a bit differently and we'll make sure that our Google tag manager is installed on the checkout page as well. The first thing we need to do is copy the second part of the Google tag manager code and we're going to put it just below the body tag. We're not going to put the first part in the head section as we're going to do it a bit differently. This means that in the store part of the shop, people with disabled JavaScript will be able to load Google tag manager. But on checkout page, unfortunately, this won't be the case. But for most other people that have JavaScript enabled this process is going to work just fine. So let's save this file. And then you need to go under the preferences. And we need to find the Google analytics section. Here it says, we need to paste Google analytics . And just a few months ago, you could basically paste the first part of the Google tag manager code here, and it would work fine. But now they upgraded it a bit and you cannot do this anymore. So what we need to do is you have to go into your Google Analytics accounts and copy paste your tracking ID code. I'm not going to go into details how to do it at this moment. You should be able to figure that out. If you don't have Google Analytics yet, you still want to install Google tag manager on your Shopify store. You can just basically fake this number by entering UA-some random number-1. . Just make sure there's nine digits and that there's "1" at the end as well. So what we'll do now is we'll save this and you'll see that this becomes our Google Analytics account code. And Google Analytics is now integrated into Shopify store. And below this, you can see we can add some custom JavaScript to Google Analytics. And that is what we'll do. We'll use this field to insert our Google tag manager code. So we're going to paste the whole code here. But now we'll have to remove some parts. We have to remove this Google tag manager comment and also, we need to remove this script part. Be careful not to remove the semicolon at the end. We have to do the same at the beginning. Remove the script part and Google tag manager comment again. Be careful not to remove the brackets. As we do this, we can click, save and everything works. Now let's go back to our store and refresh it. As you see again Google tag manager has loaded as well as Google Analytics, which we inserted there as well. To make sure that this Google tag manager also runs on the checkout page let's go to our demo product. Add it to the cart. And as you see, the Google tag manager code is still active. Now let's go to the checkout page. And again the Google tag manager, as well as Google Analytics code are present. This basically means that we have set up Google tag manager on Shopify correctly and we can move on to Squarespace. 12. Squarespace Setup Of Google Tag Manager: Setting it up in Squarespace it's quite straightforward. But I still wanted to show you so you can install it if you use Squarespace. First, let's open our Web site. As you see, we we have our Web site here. And there are actually some tags already running. There is Footlight and Google tag manager. But this is not our Google tag manager. I think this is from Squarespace. So for now, we're just gonna ignore it. Then you have to go under the settings tab. And under the advanced section and you will see the code injection section. This basically injects the code in the proper place. And we already have our header section and we'll just go into Google tag manager and copy these parts. And we'll put it into this section. I don't have Squarespace registered, so I'm seeing this notification. You probably don't see it. If you have a paid version of Squarespace you can just ignore it. The other part of the Google tag manager, we have to put it in the body tag, but you don't have that option here on Squarespace. So we have to put it in the footer section. As I've mentioned before in the Shopify part This is not the best option, but since we have no other option at this moment, this will have to do. So let's save it. As soon as we save it you already see that our tags were added. And if you check, you can see that WBF-V6SZ is exactly our tag. So we have successfully installed it on your Squarespace store. 13. Inject GTM Container to any Website: The last thing I want to show you is how to install Google tag manager via a plugin. So let's go back to our one pager case. And I've already removed the Google tag manager code. So you see it's not running. And I'm gonna inject it now on the browser side. This basically means that the script will be loaded only inside my browser. And you can do this for any page with your container, but it's going to be contained only inside your browser. You're not hacking any sites and it's not going to be permanent. So for this, we're gonna use Adswerve plugin. I still can't pronounce. It and we're gonna get go here under the advance options under the add functionality and we'll click the insert GTM container. And here It says we need the part after the GTM Dash. So basically just the numbers. And I'll go into my Google tag manager. Actually, it's not the numbers, but I'm gonna select this part and I'm gonna go back. Add functionality in GTM container. And I'm going to paste it here again. Make sure there's no white spaces in front or behind this code just in case you accidentally copy them. We're gonna match the host as well. So. And we're going to save and reload the page. As soon as this happens, you can see our Google tag manager has been loaded or basically injected into this Web site. And you can test the functionalities without impacting your visitors. These are all the different ways you can install Google tag manager. There are many more platforms that you probably can use most of them use some sort of plugins where you can do it manually as we've previously showed. And now let's move to the next lesson. 14. Google Analytics Setup & Publishing The First Version: All right. Let us install our first tag. We're gonna install Google Analytics with the help of Google tag manager as a first example. For this you should, of course, have Google Analytics already set up. We won't go into details on how to do that. I'm assuming you already have it up and running. But we'll take a look on how to set up this tag. So the first thing we have to do, we have to go over to tags and we'll create a new tag. We can name the tag. We can configure the tag. And we can set the triggers when this tag is going to fire. So what we want to achieve here is we want to load the Google Analytics script into our page, basically on all our pages. So once our visitor visits our page, Google Analytics will register that visit and will know about it. So let's start by configuring it. We click on that configuration and Google tag manager offers you some predefined configurations for Google products. You can see them featured here and you can immediately select them. There are some, of course, other tags here below. And you can see something like Crazy egg, Hotjar or even LinkedIn Insights. And if you don't find the tag you're trying to install here. You can discover them in the community template gallery. If you don't find it there, either, you can use custom HTML or custom image. And we'll come back to those two tags later on. For now, let's just choose Google Analytics, Universal Analytics as we're working with this. After we select it we can see that we can select the tracking type. As we're trying to track page views we're just going to leave it at this. But if you would want to trigger an event or maybe a transaction or anything else, then we would have to change it. One thing we have to do, before we set up the triggers is also to set it up. For now we don't know which Google Analytics account we're going to use so we have to set it up. Google tag manager enables you to set up a variable specifically for Google Analytics. And you can do this either by clicking here the new variable or if you would predefined the variables here, you could just select it now. Because we don't have it created yet, we're just going to click create new variable. Once we do that it opens a new window here and the variable type is already preselected to Google analytics settings. As this is what we're trying to do. Here you can see we can name the tag and there are some options below. So let's first get the tracking ID for Google Analytics for this. You have to go into your Google Analytics account and then go into the admin section. And under the tracking info, click on the tracking code. You can see this code here and we can just copy it. You could also see it by opening this account and typing out this number. But this way, it's a bit easier. So let's just paste it in our tracking ID window and again, make sure that there is no white spaces at the beginning or at the end. For now, this is basically it. We could set some more settings, which we'll come back to in future lessons and we could set some fields, custom dimensions, metrics or maybe some e-commerce data. And we could send all these data with the Google variable into Google Analytics and get more data into Google Analytics. So let us name the variable. As this is Google Analytics variable I'm just gonna prefix it with GA Settings. And we'll save this. As you can see now, we already have our variable preselected and the tag is configured. Then we need to set the trigger. Google tag manager already comes with a predefined all pages page view trigger so we don't have to create a new trigger for this. I'm just going to select this one. And now we're basically done. We just have to name this tag. And again, I'm going to name it GA Page View. You could also write the pages where this is firing and write here All pages. But if the tag is fired on all pages, I usually skip this part. So for now, I'm just going to leave it as GA Page View and I'm going to save this tag. OK. This is basically it. We've created a new Google Analytics page view tag and when we created the variable, we can see it under variables as well. So we can check it. And we have it here. GA settings. And if you go under overview, we can see that there have been two workspace changes and they're listed here. Now, let's create our first version. For this we'll click on the submit button and we're going to create our first version. And since we just set up Google Analytics account, I'm going to name this version Google Analytics Initial Setup. We could just create a new version, but since we want to publish it and test it. I'm just gonna click publish. All right. So our first version has been created and published and you can see the summary under the versions tab and what has changed inside it. So now let's see in action on our Web site. Immediately, you can see that tag assistant has turned blue and it says 2 now. So if we click on it, you see the Google Analytics tag has triggered and Google tag manager has turned into blue icon. Because right now, we already have published version and there's no problem with it anymore. If we click on Google Analytics, we can get some more details like which property ID we used and what has been triggered. And there's been one page view request. So. If we go back, we can also check it with tag explorer, and we'll see that Google tag manager is now firing Google Universal analytics is firing as well. If we go into Google Analytics real time report, we will also see this page view triggered. So let's refresh the page. And go into Google Analytics. And real time and into the overview. And we should see. Yes, that the page has just recently been refreshed. And there's one active user on site. So we have successfully installed and published our first tag. 15. Google Ads Remarketing Setup: OK. So in the previous lesson, we set up some basic analytics that you should have on your Web site. In this lesson, we'll talk a little bit more about setting up remarketing for Google ads. So basically remarketing is showing ads to people that already visited your Web site or did a specific action on your Web site and you want to reach just those people. Again, through advertising, remarketing is really useful because you're targeting already warmed up leads who didn't yet convert on your Web site and you want to convince them the second time to do that conversion. So for this lesson, we'll take a look at how you can achieve this with the help of Google ads and Google tag manager of course. In the previous lesson, we clicked on tags and created a new tag. But as you can see from the workspace overview, you can just click here as well and create a new tag this way. We get a familiar window and we're gonna configure our tag. Google already predefined this for us so we can just click Google ads remarketing tag type. This way we immediately see what we need to input. The first thing we need to get is our conversion ID. For this we'll have to go into Google ads account. If you don't have the account yet, you have to create it. Once you're in Google ads account, you'll go under tools and settings and under shared library, you'll see an audience manager. If you've already done this in the past, you'll probably have this already set up. But since I haven't done that before, I'll have to set it up right now. So let's set up an audience source. And you have a bunch of different sources where you can pull this data from. And we're gonna just set up Google ads tag. We're gonna select the remarketing type. And for now, we're only going to collect general Web site, visit data. Let's save and continue. Now, we need to select how we're gonna install this on our Web site. If you're using Google tag Manager, which we are. We're gonna click this. But you have a bunch of other options, as well as sending it to your developer over email or installing the tag yourself by using the source code. So let just click on the Google tag manager and immediately we are provided with conversion ID. Exactly what we've been looking for. You've also have a detailed instructions on how to install this in Google tag manager if you need them. For now, let's just copy it and go back to our Google tag manager. We could just paste this code here in the container and basically we would be done. But since we'll be using this conversion ID a bit later on for some other things, I'm going to use a variable. Again, I could go through the variables and create a new variable or Google tag manager gives me sort of an easier way to do this. I can click on this brick, which basically means add a variable and I don't have any variables for conversion ID created yet, so I can just go up here and create a new variable. And I'm gonna name it Google ads, conversion ID. I'm gonna configure this variable, and for this I'm going to use a constant. This basically means I'm going to set up a value for this variable and I'm going to paste the conversion ID I got from Google ads in here. I'm gonna save it. And of course, I have to remove the previous version. And this is the variable that will be passed into this tag. And I can reuse it whenever I need it. There's also a conversion label, which is optional. But unless you're doing tag based remarketing lists, you probably won't need this. This basically means that if you're firing specifically tags and you want to do remarketing based on those tags that fired, you would use this label. But since we're just tracking general traffic on which pages they visited, we do need to input this. Now, let's set up our trigger. And again, we want it to fire on all pages so we'll just select all pages trigger. Let's just name this tag and we are done. And let's save this tag. Basically now, we could create a new version and publish it to our Web site. But I'm not gonna do that right away. As we're gonna look how we can check if everything works before we publish it on our live server. We'll do this by using the preview button and we'll check this in the next lesson. 16. Testing & Debugging Before Publishing a New Version: All right. Let's take a look now at how we can preview the container changes and debug some problems without impacting your life site. And before you actually submit your version to your life production server. Before we start, I want to mention that this is an updated version of the original lesson. Because Google just changed the tag manager interface and some things are new. And I want to explain it in the new tag manager because you have no option of using the old one. All of the lessons from now on, use the old version. Because they're really similar you shouldn't have any problems navigating the new one as you learn on the old one. At the end of this lesson I will also show you how the old one looked like. OK, let's click the preview button and get started. Before I start explaining the debugging tool I will just point out some differences for all of you that already know the old tag manager preview mode The first difference is that now you are shown this pop up where you have to input your website that you wish to debug. I've already tried this with mine, so it's prefilled. There's also and includes debug signal checkbox, which I suggest you just live checked unless you're constantly having some debugging problems. So let's get started. OK, the second thing that it's different, as you can see, is that now you don't have an embedded debugger on your website. This looks much more cleaner and it's much easier to debug mobile pages where the real estate is smaller. You only get these small debugger connected notification, which you can simply hide. And the debugger now is in a separate tab. So if we go here, you will see that it kind of looks the same to the old one. There's much more real estate here, so it's much easier to see what's going on. You have a whole history of old page views. For example, if I refresh this page. You will see in just a second that another event will start tracking. And before you had to open links, new tabs just to not lose this data, now you have it in a separate window. So this is much, much easier. Also, if you open multiple tabs or multiple windows when you're debugging. Each one of them will get this special sign. This one has a yellow square and this one has a turtle riding a car or something similar. So if we go back to our tag assistant, you will see that, it's actually a helmet. You will see that you immediately can differentiate the events coming from one tab or the other one. All right. So these are some of the differences and some extra functionalities like tracking multiple tabs. Now, let's get down to it and let me explain the interface in more detail. This is sort of like your history of all the events grouped by different windows or different tabs. So this is one window with all the actions that occurred in that window. This is another window with all the actions occurred. Here on the right side, you have more details about what is going on. Please don't mind there's multiple tags firing because I'm recording this after I've created multiple tags. But let's focus on what's going on here. If we click on Summary, we have a summary of everything that is going on. We can also click on a specific event and see Google ads remarketing tag fired. And there's a lot of tags that didn't fire as well. So if we click on this tag, we get more details about it. We get the details about the tag itself and firing triggers. You can also see that all of the filters are OK this is why this tag fired. If we, for example, click on another tag. We will see that it didn't fire and you got details of why this didn't happen. And these are all the parameters set for this specific tag. So under the tags tab, you get all the tags that have and haven't fired. So the second tab are the variables that are currently set. And you can see we've got variable name, variable type, return type and the value of the variable. And for example, the URL. variable holds a string for the product beanie. Because this is the product we actually opened. When you're setting up the variables, you can check if the values inside them are correctly set in this tab. The third part is the data layer. I'm not going to go in more details about the data layer because it's a little bit more technical But just so you know, it's basically a JavaScript object that holds all these values and events. All right. So if we go back to tags, we'll see that in this event timeline, if we move from event to event that different tags get fired. This is a trigger which fires after 30 seconds. And you can see that one specific, tag was fired and nothing else. All right. There's a couple of things that you can do here. The first one here, you can see your Google tag manager ID. And this is useful so you can check if you're running the correct container. If you're running multiple containers, this will basically change into a drop down menu and you will be able to select which one of those you want to track in the debugger. Before I show you the old version of Google tag manager, I just want to go back to the container loaded event And I want to talk about the Google ads remarketing tag that we saw fired. And let just as we checking the Beeny, let's just verify it in the tag assistant as well. And we can see that it has fired successfully. One more thing to note about debugging tool is that if you have installed your Google tag assistant plugin this option of multiple tabs and multiple containers will actually be available to you. if you If you don't have it installed for example, when you're debugging it in Firefox or any other browser, then unfortunately you won't be able to debug multiple tabs at the same time only one. OK, so let's check the old version and you'll see that it looks super similar and you shouldn't have any problems navigating around it. This is a picture of an old version I took. As you can see, before the debugger was embedded inside the website. So you had less real estate to work with. There was, of course, a scroll bar, but still it kind of got in your way. As you see on the left side, we have our events, timeline we have tags, variables, data layer as we have in the new version. There's also the Google tag manager ID here. And if you click on a specific event, you will see all the tags that fired and all the tags that haven't. There's not much visual difference, so you should be able to navigate it just OK. Now we're going to go back to our tag manager where we will create our first version and publish it. 17. Facebook Pixel Setup: Let's take a look now how to install Facebook pixel with the help of Google tag manager. There are multiple reasons why you would want to install Facebook pixel. For once if you're doing Facebook advertising, you really should have it installed because it will allow you to track the conversions. You will be able to do remarketing and also, Facebook learns from the traffic and from the people that come to your Web site. And we will give you suggestions on how you can improve your ads. Also, Facebook has developed a powerful analytics tool that tracks user behavior, demographics and all the things that are related to their users. Which you can leverage to better understand your target audience. OK. So let's get started. First thing you'll notice, I'm still in the preview mode and we'll be using the preview mode to check and debug all the tags from now on. Let's create a Facebook tag first. Let's go into the tag configuration. And soon you'll see that there is no Facebook tag type to choose from. We can even search for it and you'll see that there is no Facebook tag type. Well, so what can we do then? Let's first check if Facebook has a solution for us. So let's go to our Facebook business manager, and I assume you already have it set up and you know So let's go to our Facebook business manager, and I assume you already know how to use it how to use it. So let's go under the events manager. And in the "add events" drop down under the "from a new website", you will be able to find different ways of setting up your pixel. You can either use a partner integration. And they have a lot of partners already. Google tag manager included. Or you can use the code which we'll check out in just a second. I wouldn't suggest using Google tag manager this way because Facebook require you to connect to your Google tag manager and they will create a tag for you automatically and also publish your container. Be aware if you're choosing this way that you have all the versions of your container saved and you don't have any tags that might be still in development. But there's also one other reason. Once you do this in this way, it's sort of like a black box you won't know what's going on. You won't have a lot of options to set up your pixel in different ways. So this is why we'll check how to set it up manually. So let's go again to "add events" from a new website and install code manually. You'll get to this page where you'll see a snippet of Facebook pixel code. You can also continue this process and enable some advanced matching attributions. And at the end, they also allow you to add a custom events. Which will talk about in a different lesson. But for now, we have copied the codes. And let's go back to the Google tag manager. At this moment, I would just like to mention that if you don't find your service or product you wish to import in Google tag manager among the tag types listed here, then you can just use custom HTML and insert the scrip this way. Let's click on it and you'll see that we are presented just with a huge form in which we can paste this Facebook pixel code. Similarly to Google tag manager code Facebook pixel code is assembled out of two parts. The script part and no script part. And again, the no script part is used for all the browsers that don't allow JavaScript to run. If we just leave it in this custom HTML container, which will be run by JavaScript. The second part will have no effect. So we can basically just remove it or we can separately install it with the help of an image tag. So we're going to do this. But first, we have to remove it from this code. So let us just copy it first. Just this part and then delete it. Or you can cut it as well. And for now, we're just going to store it somewhere in the notepad. Let's finish setting up this Facebook pixel code first and we'll get back to the image tag in just a second. I just want to shortly explain some of the details of the code you're currently looking at. What this code does it loads Facebook library and triggers a page view event. You can see triggering the events through this section and everything above it is basically loading the library and initiating it. You could remove these tracking parts and put it in a separate tag so you would have better control of when this event is triggered versus when the script is loaded. But I'm not gonna do this. I am, however, going to go into the advanced settings and I'm gonna set some more parameters because later on in the course, we'll also be triggering some special Facebook events. We want to make sure that the library is loaded first. And how we can achieve this is by setting up a tag firing priority. A tag firing priority basically defines in which order the tags will be fired. You can input a number here from zero upwards. Zero being the baseline when all the events fire. So we have to choose a number bigger than zero. So for this purpose, I'll use a number 100. This number will assure us that this code will be fired before every tag with a lower number, which currently is all the tags. So when we'll set up some other Facebook tags the only thing we'll have to make sure is that their number is lower than 100. OK, let's trigger this tag again on all pages, since we want our Facebook page view to trigger on all pages. Let's just name this tag and save it. Now, let us add the no script parts of Facebook tracking. You can basically skip this part and be done if you're satisfied with only tracking browsers with JavaScript enabled. I just want to show you how you can do it, if you want to have more detailed analytics in Facebook as well. So for this purpose, we'll need a custom image tag then we need to input the image URL. . So basically what this tag does is create a small image on your website, which will load no matter if the JavaScript is enabled or not. And since Facebook gave us no-script part, we only need to make sure that we copy the image URL. If you're not familiar with HTML at all. Just remember that this source part between the quotation marks is the image, and we have to copy everything between those quotation marks. And we're going to paste it here. Now we need to set up a trigger where this tag is going to be fired. As we already have our Facebook pixel running on all pages we cannot use all pages again for this tag because if we do so, then all the browsers that have JavaScript enabled will be firing two Facebook pixels. So for this reason, we have to create a new trigger. And let's do this right now. OK, so we have different trigger configuration options if we click on trigger configuration you can see multiple triggers we can use for our purpose. We still want this trigger to be fired on all page views, but only if JavaScript was disabled. So for this purpose, we're still going to use page view, trigger type, but we're not going to trigger it on all page views, just some page views. And here we get a sort of like a filter parameters. Currently we don't have any variables that will tell us if JavaScript is running or not so we have to create a new variable for this as well. Let's just create a new variable. Unfortunately, we have no variable types that would detect if JavaScript is enabled or not so we'll have to make a custom variable. We'll use custom JavaScript variable. I know I promise you, we won't be coding anything. But unfortunately, there is no other way around this. But this is super simple and you can find this code in the resources. This is all we need to do, setup a function that returns "true" if JavaScript is enabled. If JavaScript is not enabled, this won't be run and nothing will happen. And we're going to name this variable. Let's save this variable. And immediately we have it selected in our filter. And now what all we need to check is that this variable doesn't hold a value "true". If this variable will be run by JavaScript, it will return the value "true". . We are making sure that we're running this trigger only when this variable is NOT "true". So basically, when JavaScript is not running, we will set this trigger. Let's just name the trigger. And save it. Our trigger has been selected and this tag will be run on all the pages when JavaScript is disabled. Let's name this tag and save it. We've created a new Facebook page view tag for all the browsers that have JavaScript enabled. We've also created a Facebook custom image tracking pixel for all the browsers that have JavaScript disabled . We've also created a trigger for this tag and a special variable that tells us if JavaScript is enabled or not. So let's refresh our tag manager and check it on our Web site. Let's refresh our Web site as well. And as you can see, our Facebook page view tag was fired successfully. And we if we scroll a little bit lower, we can see that our Facebook custom image tracking pixel wasn't fired because we have JavaScript enabled. We can also verify this pixel working by checking Facebook pixel helper. We can see that our page view has been triggered and we can expand it to see some more details about this event and we can also check in our business manager that everything works correctly and refresh the page. . We can immediately see that's our tracking now works. But we can also go under the test events and we'll see that the page view event has just fired. If we go back to our Web site and refresh it again. And go back to Facebook pixel, we should see another page view registered. If you would now like to test that no script version also works you could simply disable JavaScript in your browser, refresh your Web site again and see if the page view is registered here. Basically, we're done with this and we can go back to Google tag manager, create a new version and publish it on our Web site. 18. Copy Tag and Export Container: Once you have all your essential scripts, tags and triggers set up, you could basically do sort of like the base file that you'll use for all your future projects. If you've created a tag plan like we discussed in best practices, then you probably know which of the tags, triggers and variables fall into this category. So how can you do that? You can basically go under the export container where you choose your version or workspace and select any version from the past or just the default workspace, and you can just export it to the file. Then whenever you have a new container, you can just go under the import container, choose the file imported and you will start from that baseline. Of course, you will need to modify some of the variables. For example, for Google Analytics or Facebook pixel and some others, but you'll get a good starting point from which you can then expand into more advanced tags. The other thing I want to show you is GTM copy paste browser plugin that I suggested it at the beginning of this course. It's going to help you significantly if you manage multiple accounts and you want to copy a specific tag or trigger on maybe even a variable from one container to another. Or if you have specific tags which are a bit more complex or maybe some triggers that you want to duplicate. You can do it in the same container as well. How you access this plugin is simply by rightclick then you click on the GTM copy paste plugin. Since I haven't authorized it yet, I'm going to do that now. After you authorize it you will be able to copy it and paste it wherever you want. So, for example, if I want to copy this Facebook custom image tracking pixel to another container I basically just add it to GTM copy and paste. When I do this, you can see that in the plugin it shows one. And if I click on the plugin, you can see that I have this tag listed under my tags. I can do the same for triggers. Then just copy one. And, of course, for variables as well. Let's copy "if JavaScript is enabled", so we don't have to copy that code again. Now you see, I've copied 1 tag, 1 trigger and 1 variable, and I could paste them right inside this container, which would basically duplicate them and add "-copy" at the end of the name. Or if I switch to another container I can just paste them here. And after it's done, it's going to refresh your Google tag manager. You can either choose to reset the clipboard and clear all these items inside, or you can copy them to some other container as well. As you see in this new container we have all these items pasted. So one tag, one trigger, and one variable. And I could just save this container, publish it, or maybe change this variable into something else. 19. Troubleshooting Problems You Might Encounter: For the last lesson, I just want to talk about troubleshooting some of the common problems you might encounter while setting up a Google tag manager or working with it sometime in the future. As we have seen in one of the previous lessons, you could check some of the problems, with Google tag assistant as it will give you some details about certain tags not firing. We had a problem where Google ads remarketing tag wasn't firing because we had our ad blocker turned on. You can use all these plugins to help you troubleshoot some of the problems that are going on with the triggered tags. The next thing which is really important is to use the same browser, for example. Currently I'm running Google tag manager and our shop in the same Chrome browser. But if I open the same page in, for example, Firefox, you will see that I don't see the debugger anymore. Because Google tag manager is JavaScript based and it runs only in the same browser. The same goes for private windows. If I open the same shop in Google Chrome, but in a private window, you will see that again. I don't see any debugger below. So if you have problems running the debugger or you don't see your tags executing properly, first check that you're running them in the same browser, that you're not running them one in private window and the other one in the regular one. Also, if you have in your settings disabled Third-Party cookies, then we will tag manager debugger won't work. I can show it to you by blocking them and refreshing the page. And you will see we will basically it will basically disappear. So make sure that you allow Third-Party cookies and everything that you can check is, of course that you are running the correct container ID. So check your container ID on your Web site. You can check it in the debugging window if you have it enabled or by using Google tag assistant. You can see the same container ID here. This is one of the most common problems if you're having multiple accounts, that you accidentally install the wrong container on your Web site. And this is an easy way you can check if everything is running correctly. One of the things you should also check is that you're previewing the correct container. For example, we just checked now, that the correct container is running on the Web site. But you could be in another container in the preview mode and you would think that nothing is working correctly and that you don't see the the debugging window when in fact, you're basically previewing the wrong container. One thing to note as well, which I already mention, is that if you're using some sort of a tag injector, that's when you insert the GTM container that you inserted the correct container ID and that there are no spaces or weird character in front or at the end. If you continuously have some sort of problems with the debugging window not showing correctly, something's taking too long to show or some other problems. What you could do is a hard refresh the Web site. In Chrome You you can just press "ctrl+F5" or in the Firefox "ctrl+R". This will basically clear all the cache and refresh the page from scratch. Also, disable your ad blocker, this might help or clear cookies. You could clear cookies by pressing "ctrl+shift+delete" on your keyboards and you will gets this pop up where you can clear browsing history and cached images. You can just deselect this and just clear cookies and other site data. This will clear all the cookies and site data. If you want to clear it just for your Web site, you can press "F12", go under the application and clear site data, deselect everything that you don't want to clear. And just maybe clear just the cookies and cache. Clear it. Refresh the site and you'll see if it works. If none of these steps work you can, of course, disable browser plugins. Maybe some plugins are interfering with Google tag Manager, or you can open a new private window. Log in into Google tag manager there and test your shop there. Just make sure that everything is running inside the private window. One more note here. This won't work if you're using Firefox because Firefox blocks Google tag manager in the private mode. So test this in Chrome only. Well, sometimes none of these tips will help. And it's just might because there some deeper technical problems. Your page or your Google tag manager code might be cached somewhere else in a content delivery network. . And in this case, it's best just to contact your developer and ask him to help you solve these problems. I've compiled all these steps what you should do first in a document which you will find under the resources. So you can download it and have sort of like a checklist which you can check when you have problems 20. The Wrap up: Congratulations, you made it to the end of this course! As you have seen, there are many different things you can use Google Tag Manager for. I sincerely hope these lessons will help you in your marketing activities. I set up this course as a platform upon which I will build in the future. So you can expect to see new lessons in the upcoming months. If you have any ideas about the topics you would like me to cover. Please let me know. Also if you have any comments or suggestions on how I can improve this course, I would be more than happy to hear them. Any feedback you give me helps me improve this course for other students. So don't be afraid to tell me what you liked and most importantly, on what you didn't. If you know someone that wants to learn Google Tag Manager, please share this course with them. And if you found it helpful, feel free to rate it and leave a review. Thank you again for sticking with me. And good luck in your future endeavors.