3. Manage UI Tour

  • Description
  • Resources
  • Lessons

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.


Welcome back to the Ensighten Manage Training Series. In this video, I'll be walking you through a guided tour of the Manage UI. We'll cover high-level information on all sections of the UI in order to give you a basic level of understanding so that when we deep dive into parts, you'll have already heard the terminology and be able to connect the dots.

Here, we see the login screen, which you may remember from our introductory video. If you're following along yourself, go ahead and log in to your account. The first time you log in to an account, or if you clear your cache and cookies, you'll land on the dashboard screen. When you return later, the system attempts to remember where you left off. Looking at the dashboard screen, you'll find several useful things at a glance. On the left side, you'll be able to quickly determine if any tasks have been assigned to you. And if your user has permissions to review account activity, you'll see both yours and potentially account-wide activity displayed.

On the right, you can find a quick start, create a tag button that will send you to the apps UI, which we'll get to later. And perhaps the most important on this screen are several easy-to-find links to the Ensighten developer tools plugins. In case you didn't download this back in the intro video, you should certainly do so now.

Next up we have the tags UI. In case you weren't aware or have forgotten, a tag is the term we use to denote a piece of JavaScript designed to serve some purpose and be delivered via Manage to your pages. That could be as simple as firing off a pixel on all of your landing pages or as complex as gathering data from the page and using a vendor's library to send off a major analytics beacon.

The tags tab is where all existing tags live and can be interacted with. The columns provide sorting options, and we'll cover their details in a later video. This will be the screen where you modify those existing tags, check the details on tags or change their state through the publish and delete flows. You'll find export and search options in the upper right area, a button for the publish step, and another for creating a new tag that will send you over to the app UI. We'll revisit this screen in much greater detail shortly, but for now let's move to conditions.

The conditions tab is where you'll define the means to tell a tag where it is allowed to be served and executed. A condition is typically defined by an expression matching parts of a URL, but can also cover things like page data, browser data, date and time, and more. Conditions are used by tags, data definitions, and events, the latter two of which will be coming up shortly. When applied to any of these, it tells our servers whether or not to serve a tag to some page on your website.

Next up we have the spaces UI. In this tab, you'll define some of the major architectural pieces of your account. A space is similar to a directory folder path if you're more comfortable with those terms. Space acts as a directory for tags and a bootstrap will only bring tags from the space that is requested. You may recall from earlier, I spoke about prod in the URL and dev stage prod, or even UK prod as options. All of these are examples of spaces. A default account is set up with the basic dev stage and prod spaces. In a future video, we'll talk in-depth about the reasons why you might decide to split or combine spaces as well as advanced-use cases like space hierarchy.

The publish paths UI is typically only used for certain advanced cases. Most accounts have no need to make changes here, but I do want you to know what it's for just in case those needs do apply to you. This UI is for modifying the basic construction of a bootstrap file. The files are tied to their space names and hold certain major defaults such as what we see here in the columns. It's also the screen you'll use to update a bootstrap's designated certificate if you're updating a CNAME-based bootstrap setup.

Aside from CNAMEs, you might make modifications here if you need to deploy multiple bootstraps to a single page, or you need to use a very new JavaScript keyword that may not have become supported until a later bootstrap version. In the certificates UI you'll find the means of creating and deploying certificates for a CNAME-style setup. This isn't necessary at all for a completely functional and successful bootstrap. But if you're concerned about things like ad blockers, privacy browsers, or other external tools that might prevent our bootstrap from loading on the standard nexus.ensighten.com domain, you could employ a CNAME set-up to modify its appearance on your pages. Perhaps you'll change it to tms.yourcompany.com instead.

The tasks UI is set up so that you can do some minor project management work here inside the UI. Here, you'll be able to define and assign a task to your fellow users or yourself. For more complex project management tasks, it's advised you use a more robust platform designed for that sort of thing.

You'll recall, I've mentioned apps a few times now. In the apps UI, you'll find a library of hundreds of helpful applets that will assist you in creating new tags. The new tag buttons on the dashboard and tags UIs both lead here. This library contains more than a thousand helpful templates to help you create a new tag by yourself without regard for your skill at JavaScript or HTML. Inside of any given app, you'll find helpful options for creating the tag. Typically, you can find the required information within the details your vendor provided to you, or you can ask for them, if not. Apps can vary in complexity depending on the intended use, but all are designed with the intention of making it as simple as possible to create tags while still being flexible for complex and custom scenarios.

Soon, we'll return here and walk through the entire tag creation process. The data tab is where data definitions are created and managed. These data definitions are set up with the intention of either retrieving, computing or modifying data from the page and providing that result to tags, conditions and events. While data definitions may function similarly to the concept of a page data layer, they are not an actual storage medium. More accurately, they're a data-intake process.

Creating data definitions is usually defined by what needs them. Are you setting them up to provide easy access to a complex data structure for your less JavaScript-capable users? Perhaps creating a condition that fires on the homepage, but only if the user is logged in and has the gold reward status. You'll see these again when we walk through the tagging example.

In the events tab, you'll be able to set up something that functions similarly to the purpose of conditions. Events are normally used for defining not only where, but also when a tag can fire. So a tag may be served to the cart page, but only get fired when the user clicks on the checkout button. We'll cover later how they function both as conditions and how they can be used in advanced scenarios.

That wraps up all the tabs that are used for tagging and delivering tags. The remaining tabs are for reporting and account administration, both of which we'll cover in a later video.