 I'll be talking about Google Tag Manager. But just to give you a quick introduction, I'm Arnav. I have been working with WordPress for over 10 years now. Started as a user of WordPress, then built plugins, themes. And now I work at Bluehost, where I lead teams which build experiences on top of WordPress. So just a quick round of questions. How many of you know what GTM is or Google Tag Manager is? And how many of you use it on your websites? And how do you use that if you just don't mind, you know, what all do you use Go Tag Manager for? Like maybe you can start. OK. So some event happens, and we want to capture some of that data in our analytics. We want to maybe see how many people have clicked a certain link, or how many people have visited a certain page. Those page visits could be maybe from within the website, or maybe they are clicking on some link on Google, Facebook, anywhere across in the web. Or maybe if someone's filling a form, or they've submitted something, you would want to capture how many people have submitted a form. And then based on this data, we want to do something else. We want to target that specific user across the web using some remarketing campaigns, and so on and so forth. So we do all of this using tags. Sorry. So tags is nothing but a set of pieces of code which helps us do all of this on our website. And please, interrupt me or raise your hand if you have any questions. I'm more than happy to answer it when I'm here, or we can take some Q&A towards the end as well. Now just to give some examples of what kind of tags there are, so for example, all of us might be using some analytics tools like Google Analytics. Maybe there's a button. So we have a list, for example, there's a button on the website which says sign up now, or maybe click here to submit something. So that's a button thing which we would want to capture. And we would do it by running a code which is nothing but an event tracking. So we would probably trigger an event on Google Analytics, and then try to compare it to certain goals we might have set. For example, some marketing teams would run a campaign saying they want 20% of the users visiting that page to submit a form. So we would track it against our goal. Or if you are doing some ad-word campaigns or you're doing some Facebook campaigns, then you would try to optimize those campaigns based on the results you see. So these are some of the examples of how we use tags today. So moving a bit forward, why it should matter to you. We all build websites. We have customers, or you might be building a website for your own use cases. And it's very important to have a good combination of tags and events to capture all the information we need. So if you see on the right, this is just an example of how we've tried to capture certain data points. Now if you see here, it says that, OK, from the direct channel, which means people searching about your website directly, we have certain number of users coming in. From those set of users, their behavior is what kind and how many users are actually converting. So all of this information across channels, like paid media channels or some social media channels, we are able to capture because of certain tags we've put on our website. This example is from Google Analytics. So we kind of use Google Analytics on this website. And we've been able to capture this information and break it down into multiple aspects to help us optimize our campaigns. So again, we use a lot of tags, right? There are Google Analytics tags. There are Facebook. Then there's a Cora pixel, which you might need to add. There's Twitter. There's Instagram. There's just so many things you can add to your website to track user behavior. And it also helps you remarket and target this customer in a unique way. But what ends up, again, I'm sorry for that. Looks like this is a bit, yeah. So what happens is if you add all of this onto your website, you'll probably edit certain files on your website, on your WordPress site, and put all these tags in. And the challenge is your code becomes too cluttered. It becomes difficult to manage all of this. We ended up adding about 200 tags for different use cases. And the code became a mess, right? We had a huge file of just adding tags and then events and everything. And that's when we realized that having it all in the code base is not the best. And we started looking at some solutions. And then bottlenecks and delays. So again, I work at Bluehost. And we are always behind, right? You always need to do something which you need yesterday. And depending on how you work and your processes, not always can you commit to the code and sort of change it on the WP admin and sort of push your code immediately, right? You might follow a certain process of doing that. And that might result into delays. And then you might have certain campaigns which your teams might need to run to actually promote the website. And again, the deadline is always yesterday. And then organization itself, right? You have multiple kinds of tags. Each tag might have different. And you'll go into triggers and so on. And organizing that, making sure it's understandable. Like Abba just took a session about how to write clean code. It's also important to have your analytics clean, have your events clean, else it just becomes a mess to understand what's happening. So again, these are some of the problems that people face today. And then debugging itself, right? Most of this is JavaScript code. You get a code snippet which you put on your website and starts generating events and start generating alerts. Figuring out where things went wrong is always a challenge. When you open it in a browser or try to look at the source code, it's all minified. So you don't really get a sense of where things are going wrong. And then if you put the code directly on your website, then chances of it impacting other JavaScript which you might be using is slightly higher. Now, these are challenges we face every day. How do we solve for that, right? And GTM is kind of one of the solutions which is kind of given by Google. It's Google Tag Manager. So it allows you to hide all the complexity from your code and put it inside Google Tag Manager. We'll go into deep about how to use it and so on. But this is just an example of how we've used it for Google Analytics. On the right, if you see, we just added Google Analytics for a page view. So the screenshot on the right actually just triggers a page view event every time you visit a page. And it's as simple as that. Not very complex. You don't need to add a lot of stuff to your code. You just need to add once more snippet and you're done. It also has a lot of management tools. So for example, you can do version controls. You can see the dashboard of Google Tag Manager. It allows you to show you what kind of changes have been done, how many tags you have, what has been added, what has been removed, has it been published or not. And we'll go into all what's tagged, triggers, variables over the course of the next few minutes. And then integrations, right? Like I said, we have a lot of pixels which you want to add to our website to track users. Generally, each of the companies like Facebook, Google, Twitter, they all give their own JavaScript snippet which you can just add. But then Google Tag Manager has some out-of-the-box integrations available, so you don't need to really worry about the full JavaScript. There's just an ID which you can use to integrate. So it makes life simple. And you don't need a developer or a team of developers to actually do this. Anyone can do it themselves. And then debugging tools, right? Like one of the challenges we had was we were not able to debug it when we put a lot of code on our website. It became a challenge. So we'll talk about some debugging tools on GTM, how you can sort of test and debug, and how it will help you achieve, take your things to production. Now, how do you get started with GTM, right? So we'll talk about that. But then the first thing which you do is you try to figure out what you want to achieve. So for example, you have a form. So maybe you want to track how many people are submitting the form. So you make an inventory of all the things you're going to do. For example, if you're doing tracking, then you might want to do a Facebook. You might want to do a Twitter or Google Analytics. If you want to do remarketing, you'll focus on maybe Google AdWords and some other tools, right? Like for example, if you're doing AB testing, Google optimizes a good solution, optimizes there. So you make an inventory of all these tools you want to use. That's how you get started. And then what do you want to do with these tools? So for example, when you're using Google Analytics, you might want to trigger a page view. You might want to do some view tracking. If you are doing some kind of a marketing campaign, then you would want to track how many people adding things to the cart and maybe dropping off. And that would result into some kind of cart tracking and remarketing campaigns for you. So there are certain characterizations of what happens. And that's the kind of granularity. So you don't figure out what kind of detailed information you need. Plan for that before you even get started on accessing the Google Tag Manager dashboard and so on. This will help you plan things a bit better. And then we get into when you open the Google Tag Manager itself, there's a lot of ton of things which you can suddenly get bombarded with information. So the moment you log into Google Tag Manager, the first thing you need to really worry about is accounts. Now talking about accounts, you might have a Google account which you access Gmail, Google Calendar, all of those. And then you want to create a GTM account. A GTM account is an account basically which can have multiple sites within it. You can give access to multiple users and so on. Generally, the nomenclature is you have one account per website and one container in that account. And then what is containers? So it's a collection of all of this what we've discussed. So we have tags. We have triggers. We have variables. We have some configurations. And all of that come together. And that is what we call as a container. The container is kind of what we put on our website. When you put this container on the website, that can load all these tags, triggers, events, and then we can integrate Google, we can integrate Facebook, all of that within our website itself. And we can replace this with all the hard-coded stuff which we might have done on our website today. And then when you launch a container, then there is something called as workspaces. Now what are workspaces? Let's say I am working on a specific container trying to maybe integrate Google Analytics. And my colleague is working on trying to integrate Twitter. There's a big chance that we might all overlap. And then making sense of who's doing what becomes a challenge. So what ends up happening is to maintain good version history, there is something called as workspaces. So you can create multiple workspaces. Each of the workspaces can be managed by a person or a team of people who are working on a similar kind of a change. They can do their changes. They can test that independently. And they can merge it into the default workspace. The default workspace is what goes live on the website after you publish it. So this allows you to sort of keep certain things in the testing phase where maybe you are integrating something and trying things out. You put it on a different workspace, which doesn't need to sort of be published immediately. Whereas your other team members who are working on, let's say, a different kind of a change or a different kind of a tag, they can publish the changes independently without waiting for you to either reverse your change or complete your change. So this also helps maintain version history so that in case something goes wrong and you put a wrong event or something, you can't roll it back pretty fast. And then again, to organize all of this, we have folders. So you can maybe make one folder for, let's say, Google. You can make one folder for Twitter. You can make one folder for all the different companies you want to target. Or if you, depending on what your organization structure is, you can do it based on events and a different type of assets which are there. So it depends on what your organization structure is, how you want to organize Google Tag Manager. But then you have options to sort of have folders and then place all these parameters within your folder. Unfortunately, right now, it doesn't allow you to have a subfolder structure. So you can't have a folder within a folder. So that's one limitation which is there today. And then we come to how do you get all of this done right? So we talked about how to organize GTM. But then the most important thing is how do we use it today? So triggers is kind of the starting piece. Now, something needs to happen to do something, right? We saw that early on. So triggers are those pieces of what we want to happen before we do something. So for example, some user would want to visit the website to trigger a page view event. That's the bare minimum, right? So the trigger would be some page visit happening. Or maybe it could be as simple as someone submitting a form and you track something. So this forms the basis of everything we want to do. And then there are different trigger types. There are trigger types which are available by default in Google Tag Manager. And then you can trigger or you can create your own custom types as well. If you see there's something like DOM ready, there's page view, there's window loaded, then you can also target specific elements like element visibility. So for example, if a person is scrolling down and he sees a specific element, you can actually trigger something based on that visibility as well. Which might be really important sometimes. Maybe we have some app to cut button loading below the fold. So we want to see if the person has actually seen that button or not. So things like that is something which is available by default. You can use these as events. And we'll talk about how you can trigger something based on these data points. And then there are firing conditions. For example, you would want to trigger something only on the success page or only on the page where the person is filling the car form information and not on every page on your website. So you can actually pick and choose what conditions you want on which these events have to be triggered. So let's take an example that we have an e-commerce website and you want certain actions to be triggered only on the success page so that we know that how many people have successfully transacted and what is the amount. So then we can put in certain conditions that the page path should contain, let's say, success on the URL and only then trigger some of this. It allows us to have very, very fine-grained and granular triggers happening. And then we can customize them based on our needs. And then if you see, there's a ton of options available. It can contain certain things. It can start with certain URL strings. It can not contain. So you have a ton of options available to allow you to choose when a certain thing should fire. Yeah, you can. So you'll have to obviously figure out different kinds of events on every page. So let's see the page where he's seeing the product catalog, right? Maybe that's one event where you fire, where you say, view this product. And then you can pass some data to the analytics event as well if you want to pass the SKU or maybe the name of the product. And then you press add to cart. You can trigger another event which says, he has added to cart. And then through his journey, you can trigger different events to actually track him through the journey. Now, all of this will be visible in your analytics tool with limitations. I think analytics doesn't allow you to do that more than like five drops in the free account. But then you can break it down and view all of that information as well. Yes. Can you just take a mic? I can't hear you. Does this scroll up, scroll down have any event triggers or just click? You can configure it. So you can do it on scroll up, scroll down as well. There are event visibility triggers and you can create your own custom triggers as well. So again, scroll up, scroll down, fire JavaScript events. So you can capture those and then you can trigger analytics events too. So options are there. Any other questions? Yeah, go ahead. When something is triggered, so will it give a feedback in like? Types of tags, right? Like I just said, there are analytics, then you want to maybe integrate Google ads. So if you see these are some of the by default tags which you can like Google gives you by default. And then there's a big marketplace where other community members have also submitted their tags which you can just inherit. Or if you want at the bottom you can add your custom HTML or custom image as well. So if you're triggering an image pixel you can just click on that or if you want to add some custom HTML you can do that as well. So it natively supports a lot of Google tools. So like Google analytics and stuff is already available by default. If you see this is just a new tag I'm trying to add and it just, I've already connected this to my Google analytics account and it's trying to basically say what kind of tracking I want to do. And then if I click advanced it will tell me what kind of rules I can add as well. If I want to exclude pages or include pages like you just asked. And then again, you know, custom HTML is just you get an HTML editor. You can put your HTML if you want to load certain pages. Like for example, a very, very recent use case which we wanted to do was we want to add a banner on certain specific pages of our website. But then we tried different tools and we said we don't want to add more JavaScript as well, right? It's always a considerable impact speed, how much data we pass to a third party vendor. So then we just used Google tag manager to actually add some of our custom code for specific pages. So you have some of those flexibilities as well. And then we come to triggering, right? So for example, like I said, we have a page view. We want to exclude certain pages or we want to include certain pages. So then there are triggers as to when this should trigger. The rules to add as to when this should happen. For example, it can be based on page parameters. It can also be based on certain data which you pass to Google tag manager. So as most of you guys might have used Google analytics there is something called as data layer using which you can pass data to these tools. So when you pass certain data, which we will cover in variables, these variables are what you can define and you can change the triggers based on that. So for example, if you don't pass a certain specific data, you can define it not to trigger, versus if you pass a specific data, then you can change your triggers as well. And then we come to variables. This is kind of really important for all of us because this will help us customize what we want to do on every page. So for example, some by default variables which we have as you know, the host name, the path, the page URL. But then you can also define some of your custom variables as well. So for example, if you talk about a e-commerce case like one of the questions which came out, how can we track the user across the whole flow, across the whole by process. So what you can end up doing is you can end up passing some of the things like which product is he adding to cart or the amount of money or the amount of certain quantities he's added to cart, pass data as variables. And these variables can be read by Google tag manager. So for example, if a person's adding two items to the cart you can show him a different, complete different message and a complete different thing versus if he's added five items to the cart. Maybe if you want to sort of show some pop-up with some additional discount code or something, you can define which one those parameters as well. And there's a lot of other built-in stuff as well. Like for example, you know, if there are errors coming in or you can define error URLs. Sorry. So again, if you just explore Google tag manager you'll see a lot of this, some of the stuff which already exists is no selector. So for example, if someone is clicking on a specific element or clicking on a specific class, so you can have some of the selectors available by default. And then you can define your own custom variables as well. So for example, you know, if you have something which you want custom, which is not available in Google tag manager, you can just define it yourself and that becomes your custom variable too. So you can pass some of that data, whatever you want, customizable to your website. And then now we come to the most important thing, right? How do we integrate it to our website? So if you see, this is how, this is what Google gives us. It's a JavaScript snippet, which we are supposed to add it to our code. If you just put it in your code base, it can be WordPress or non-WordPress, Google tag manager kind of starts working. But then again, right? We don't want to edit a lot of code. It defeats the whole purpose of using Google tag manager as well. So when we talk specifically about WordPress, there are certain options we have. We have certain plugins like GTM for WP, which allows you to sort of just install the plugin. And if you see there's a Google tag manager ID which is mentioned there, you can basically have a configuration on and off. You can just put the ID there, enable the plugin, and that kind of enables Google tag manager for you. This is again available on WordPress org. Or Google also has a plugin called Google Sidekit, which has an option for Google tag manager. So you can integrate Google tag manager pretty easily using this as well. You won't need to write any code on WordPress. But then for people who avoid using plugins, they feel plugins slow down their websites. There are other options as well, where you can actually create a child theme and modify the function.php. This is just a sample code snippet. I'm not sorry for the size of the code snippet, but basically you can copy paste this and put it on your child theme. The reason why you put it on a child theme is so that if the primary theme gets updated, you don't do this out and things stop working on your website. But this is one of the other ways to do it. And the last way but not the recommended way is actually put a block. Don't do this because then you don't know where it's going to load, but it's still an option and it does work. And then coming to your question of how can we test this out? So there are two, three options. First of all, when you install Google tag manager, it has a tag assistant plugin, which you can install and experiment it. When you go to the website and click on that plugin, it'll actually show you what kind of tags and everything. It'll actually enable you to see if the tag manager is loading correctly on your website or not. It also tracks Google analytics and some other tools but useful for tag manager. And then the last bit is testing. So you've just put all your tags, you've done all the things that you want, but you usually want to test it before you take it live, right? So there's a preview mode. So on Google tag manager, when you sort of have done all your work, you've added all your triggers, you've added all your events, you can click on the preview button. It'll emulate the whole setup but without taking it live to your customers. So you can try everything out, you can see all the data, you can see everything, but it's not visible to your customers. It is only available in this preview mode. Once you're comfortable, you know, really that's when you publish this basically. And we'll just cover some examples quickly. So if you see, this is how we've kind of integrated Google analytics. So you connect with your Google analytics account and it gives you some options. So if you can see there's a tracking ID and then we've kind of configured that it should trigger only on certain specific pages. So we have excluded analytics events on certain internal pages or certain administration pages. So that's why there's a triggering filter. They're saying all pages use on this specific site, which is a kind of filter we have created. Or the other side, so this is exactly what we have done to track clicks. So if you see it's another analytics event where we are saying that it's a type of event where it's type of a click, the action is a click and then how do, however, defining the click is based on a label, which if you see are variables. So we've defined some custom variables saying the click test, text has to be exactly this. And then below if you see, we've actually specified that yes, the click should be on the account and the profile section. So we can actually track different areas of the site as well. So for this, what we are trying to track is how many people actually visiting my profile section of the website. So you can track different areas accordingly. And I think that's about it. Any questions you guys have? Yeah, go ahead, please. So you can do that, not recommended again, but yes, that is possible. Yes. Yeah, so for example, in this case, so one of the examples, in fact, I'll just open it back and show it to you. So yeah, if you see this right, there's a specific mention saying inside. So we actually are sharing tags across bluehost.com and Bluehost India. And then this event actually triggers only for Bluehost India. So it is possible, it depends on then, again, you have a slightly management overhead that you need to make sure that you are triggering your events the right way and having the right filters. So for example, you're saying, let's say, person visits site A and... Yeah, so it depends on where you're storing your data. So Google Tag Manager doesn't store your data. Google Tag Manager enables you to manage your tags. Your end data is still being stored on Google Analytics for some other tools which you're using, right? So then you'll have to look at that tool, how that handover process happens. Maybe you can use different tag managers, like the containers can be different, but your Google Analytics account can be the same. The properties can change. So then you will be able to share your data across those properties.