13. Event Tracking

  • 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.


Hello. Welcome back to the Ensighten Manage training series. We're covering event tracking in this video, which is a bit of an advanced topic, so hopefully, you've come prepared. Event tracking refers to firing some tag or piece of code based on an event occurring on the page that isn't something like the page loaded. The user clicks on a button or scrolls or simply waits some designated amount of time. Most often, these events require some user interaction and you're wanting to react to that user clicking the big, green button by sending some special data off to your analytics platform. You may also find noninteractive events like the page has been open for more than 30 seconds.

To properly configure an event, you need to define two things, what you're listening for and what to do once you've heard it. Defining what the event is means choosing both where the event is going to occur, say, the big, green button for example, and what action, clicking, for example, must take place. Defining what the reaction is can be a new exercise in tagging and we'll cover that later in the video. The fundamental lessons of how events themselves work programmatically is outside of the scope of this series, but their use in relation to tagging is key to many advanced use cases.

Let's first hop back into the UI and talk about Ensighten events. This tab has the same search and sort options that you're hopefully used to by now. The details view of an event shows the event's details, any conditions it uses, and a list of tags relying on it as a condition but not custom code references.

When I select add event, you'll notice a slight change in the order of configuration from tags. Here we're selecting our conditions before we define any of the particulars. As I'm sure you've heard me say a few times by now, events can also function as conditions on tags. They define which pages a tag is served to and then, subsequently, when it's allowed to execute. Here in the event condition step, we're defining that first part. This way when an event is used in place of conditions, it still has the opportunity to take advantage of our server-side conditioning rules.

Next step. I'll move to the event type step. And we have three options here. Choosing an option sends you straight to the event settings step so let's cover each in turn. Page action is an event designed to listen for mouse events like clicks and hovers on a specific element or group of elements. It requires a selector of some kind for the element you want to listen on. This is where another important topic comes into play. Selectors can be very simple or very complex, but they all require basic knowledge of HTML, and the complex ones also depend on you understanding CSS. I'll cover the basics in this video, but for more advanced learnings, there are many free websites covering the topic of HTML and CSS selectors.

Let's walk through each of our options and cover how we might find them in the page as well. First up, we'll have two options, element ID and element class. These are both common attributes in the HTML elements and appear like this in practice. The content of these strings could be anything at all, so I'll add some sample values here for demonstration. Here's a more complete example from our demo website. IDs are typically unique on the page, but classes can be reused. Using either of these options in the how can we find the element dropdown should be straightforward. If you're targeting a single page element and it has an ID, use that. If it doesn't have an ID but does have a class, is that class unique to the element or will you be selecting multiple elements if you used it as your selector?

The class selector is great if you're trying to select multiple elements and your web developers reuse classes smartly for similar pieces of the page. But what if your element does not have an ID and the class is used too broadly for it to select a singular piece of the page? Or maybe you want to define a selector with complex requirements like ANDs and ORs involved.

The CSS selector is a powerful option for meeting your exact needs so long as you're comfortable with writing that potentially complicated piece of selection logic. The range of options available for CSS selection is huge. Much too large to be included in this video. So instead, I'm going to give you a medium-difficulty example that employs several useful concepts and you can take that as learning for your primer.

Here on the screen is a CSS selector that looks for any element with ID equal to ENS modal wrapper or any number of elements with a class containing contact info modal wrapper. This will wind up selecting four different HTML elements on my demo page and monitoring all of them for my event. We'll revisit this topic shortly when we talk about custom events, but let's keep moving for now.

After you've chosen a selector type and input what you're selecting on, you get to choose which action should trigger this event. For page action, all of your options rely on the user doing something with their mouse. Most of the time, you'll be choosing click here, but feel free to pick what meets your needs best. The other two options after page action are much simpler. Value change monitors a specific data definitions value and triggers the event when that value changes or is set for the first time. Named event is a simple setup with no selectors or triggers. Its intention is to be triggered manually by another tag or a piece of code. The name of the event trigger will be set to the name of your event up at the top, so make sure to fill that in.

Triggering these events is something you can do for yourself in a tag or, in some cases, you might have your site developers trigger it from the page under specific circumstances.

Once you've finished creating the event, you're ready to use it in a tag. You'll remember this tag from a previous video and once again on the condition selection step. We still have those conditions from last time and now I'm going to click the events button and add our new event as well. As you can see, it was added to the list here in purple along with the conditions and is set up with the same OR indicator. One very important note here is that you should under no circumstances mix regularly conditioned tags and event conditioned tags on the same page. The system treats event-driven tags as their own special file and will send them to your page separate from the normal conditioned ones. Since they share an ID, they'll collide on the page and whichever one was lucky enough to bind first will be the only one allowed to execute.

With our event added and no normal conditions apply, the tag will now only fire when the event triggers on the page. If the event would trigger more than once, so will the tag. You'll also find some more advanced apps can make use of the events in a special way. Some apps are designed to expect you'll want to fire them under event circumstances and allow you to define multiple events at once rather than having to create several duplicate tags.

Using events as conditions or in preconfigured apps isn't the only way to go about it. As you heard with named events, you can use Ensighten events in your custom JavaScript tagging as well. You can also use helper libraries like our delegation framework, the jQuery library, or native browser events. Using the alternative libraries is typically unnecessary, but perhaps you're already familiar with those methods. All of them will definitely be relying on your familiarity with selectors I mentioned a few minutes ago. Using an Ensighten event in your custom code has some powerful uses but is typically reserved for advanced cases. If you do find yourself in one of those advanced cases, I want to be sure you're familiar with how the custom code looks.

Here you can see an example of both listening and triggering an event by hand as well as examples for some of the alternative options. Ensighten events and other event frameworks are powerful tools in your tagging journey. Feel free to review this video when you find yourself wishing you could fire a tag under very specific circumstances. Next up, we'll be covering a tagging architectural topic on tag layering.