-
Lesson Overview
This comprehensive course covers everything you will need to become a Manage power user - from deploying tags, data layers and event tracking to organizing your TMS strategy and properly QA and troubleshoot.
Learners should have a basic grasp of client-side web technologies.
Transcription
Welcome back to the Ensighten Manage Training series. In this video, we'll go over the methods and options for installing your Ensighten bootstrap on the page and QA'ing that installation. Before we get started with that, I want to cover a bit of foundational knowledge for terminology you'll likely hear while working with us. A TMS is a Tag Management System, similar to a CMS or Content Management System, except this is specifically focused on delivering JavaScript to pages in the form of tags. The TMS tags are always JavaScript and cannot directly deploy HTML. The TMS is not a hosting system and cannot store pages, scripts, or files on your behalf to be served to the webpage. The bootstrap is the file you're adding to your pages in order to bring tags to the page.
Installing the Ensighten bootstrap is as simple as adding a single line of HTML code to your page. This can be accomplished through your web hosting system, a CMS directly written into the page's HTML, a global header or footer, or any number of other options. The format of the URL for the bootstrap has a standard shape as shown on the screen, but can also appear in a first-party fashion using a CNAME-style setup. You'll hear more about that when we get to the UI later. Some of the fields in this URL won't look exactly the same for your account. The client ID piece will be your Ensighten account's name, not your user name, but the name of the account itself. And the publish path piece could be almost anything, but you'll see it as prod or dev in some examples. This is because the publish path represents a subcategory of tagging, in familiar terms this can be shown as dev stage and prod options. But as we'll see in the future, it could also be US prod or UK prod.
You'll also notice that in both examples here, there is no URL protocol included. This isn't mandatory, but it helps to let the bootstrap know it should load using whatever protocol your page is already using. When it comes to installing your bootstrap, the placement and manner of insertion into the page are very important. The bootstrap can function in both synchronous and asynchronous fashion, but we do strongly advise that you load the file synchronously in the head of the page. If you're unfamiliar with the terms, synchronous loading or execution is when files and their contents are loaded into the page and executed completely before the next one is allowed to do so. Synchronous files block the page from performing any other actions until they are finished. Asynchronous is just the opposite, in that any other files or tasks are allowed to continue on while asynchronous files are running. Loading synchronously in the head is the suggested path because many products and tags depend on a specific timing or rigid order of execution in order to properly perform their duties.
If you're also an Ensighten privacy customer, loading the bootstrap synchronously in the head is mandatory for consent, compliance and security implementations. We'll cover more on synchronous versus asynchronous in tagging conditions. But in the context of the bootstrap itself, loading asynchronous means that you lack control or assurance over the execution time of your tags. For some tagging, privacy, for example, this means you may find yourself non-compliant or non-functional, and others such as the analytics tools, you may miss important events or data as the user is still loading the page. Additionally, if the bootstrap is very low on the page, or in some form of footer, or perhaps if the user's browser or internet is very slow, your likelihood of losing data and increasing variance raises significantly in the asynchronous use case.
Once your bootstrap is installed, QA'ing the setup is quite simple. In all modern browsers, you will find the browser's developer tools will be able to tell you everything you need to know for this task. Start by opening your browser's developer tools. This can typically be accomplished in the browser's options menus in the upper right corner. Alternatively, they should all have keyboard shortcuts such as F12 for Windows users, or Option+J on Mac. Once the developer tools are open, navigate to the tab that shows the current HTML of the page. For example, in Chrome, this is the elements tab. Within the HTML, you should be able to locate either visually or with a search feature the bootstrap that you've placed on the page. If you can do so, that's half the task done. You can also check in the network tab for files that have loaded into the page. You may want to refresh the page once you've got the network tab open to ensure it was capturing data when the bootstrap would have been loading. In the tab search bar, type bootstrap and you should see your bootstrap file ideally with a good indicator like 200 or 204. If it's showing status 400 or 404, the bootstrap URL may not be correct or it hasn't been set up yet inside of Manage.
Another quick aside about terminology. You've heard me say both Ensighten and Manage in the videos so far. Ensighten, the company name, is sometimes used to refer to all products available to clients, while Manage is specific to the TMS. This can be an important distinction if you're a client with multiple products or you intend to take our certification exam. Other products in the platform include our privacy product or an enhancement of the normal Tag Management System called Server-Side Tagging. Privacy, sometimes referred to as MarSec, provides features like the consent and compliance setup, client-side security enhancements, and third-party, or malicious code blocking. Server-Side tagging aims to remove some of the burden of JavaScript tags from your end-users' browsers and relocate them onto a server-side instance in which you can alleviate page wait, improve performance, and improve data quality. That wraps it up for this video on the Ensighten bootstrap and its installation. Next up, we'll be diving into the UI so you can start getting familiar with all the pieces needed to create your own tags.