Getting Started with DTM: CSS Selectors

Imagine you’re in a very crowded place with lots of people. You see a $100 bill on the ground, so you look up at the crowd and yell out, “Hey! Can you pick up that 100 bucks and hand it to me please?”

What happens? Most of the crowd looks down for the money, then chaos ensues. (Please, don’t try this at home.)

Now, change it up a bit. Same place, same crowd, but this time you casually turn to one person, point down at the money and say, “Hey, Rick will you please help me out and hand me that money at your feet right there. I dropped it.”

That’s how CSS selectors work. Yeah, I know, sounds weird, but a little knowledge here can help you make a lot more than $100 with your next project.

Why should we care?

Our Web pages are built using HTML, CSS ,and JavaScript. HTML gives our pages content and structure, CSS adds the look we want, and JavaScript makes our pages interactive. For anyone involved with digital marketing, some basics can help us answer more specific and valuable business questions. For example:

In the old days, before DTM, we had to beg, barter, and bribe our contacts in IT to add the tags we need to collect the data to help us answer these questions. We don’t have to worry about most of that now, but we may occasionally need just a bit of CSS smarts to help us collect the data. The key to remember is that learning a few very simple patterns can help us deliver more value to the business through better insights. Let’s see how.

What are CSS Selectors?

In a Web page, what we see in our browsers is not what a Web server “sees” when it sends the page over the wire to our computer. When our browser is first requesting a page from a Web server, the server responds by sending code back to our browser. The browser then turns that code into the fonts, colors, images, videos, and other content and styling we see on the page.

HTML is the markup language used to structure the page into headings, paragraphs, bulleted lists, clickable links, and other elements in the content we see. For example, our blog might contain a list of articles in a certain category, and we see this:

But what the browser actually reads from the Web server is this:

This is the HTML, or markup of our articles list. What about CSS selectors? Why all this HTML? Good questions, thanks for asking. Since CSS is used to apply styling to HTML, we have to start with our HTML, then talk about the styling. For analytics, testing and optimization, we care less about the styling and more about data collection for our reports and analysis. So, how does CSS help us with data collection? Thanks again, keep the questions coming.

In CSS, selectors, or pattern matching rules determine which styles are applied to certain elements in the page. Selector patterns can be simple element names like paragraphs or headings, or they can describe a context where a certain element or group of elements exists in the document. If the pattern is true for a certain element, the selector matches the element.

We’re just looking at and pointing to Rick, specifically, instead of the crowd. You still want the money, right?

Why CSS Selectors in DTM

While CSS rules apply styling to page elements, we use the patterns of CSS selectors to identify specific page elements we want to track. If I want to track link clicks in my list of articles above, I could use a CSS selector pattern to specifically point to (match) those links in DTM.

In DTM using an Event Based Rule lets us collect data about a variety of visitor actions:

Any of the events on this list can trigger the Rule in DTM, and these events (visitor actions) can occur on any elements in our page. After we choose from this list, we need to tell DTM which element will be involved with this event. We use a CSS selector pattern to do that.

CSS Selectors Pour les Nuls

If you noticed the pattern above, we’re using div#digital a as our Selector. How do we get that? To tell DTM we’re tracking a click event that happens on any link in our list of articles, we need to say “any link in the list of articles” using a selector pattern.

First, how do we match the list of articles? If you right-click on the list heading and click Inspect Element in your browser, you should see the console pop up like this:

It may look slightly different depending on your browser, but the bottom half here shows us the HTML markup for our articles list, just like the browser sees behind the scenes. The div or “divider” element contains our h3 heading and our ul unordered list of article titles. Each li list item contains the clickable a anchor link article title.

You’ll also notice our div has an id attribute where it says id="digital". Elements in HTML can have different attributes for different things, but for CSS Selector patterns the id and class attributes are often used.

The CSS Selector pattern we’re using to match any link in the list of articles is div#digital a. Which means: match the anchor (link) elements if they are in a div with an id of digital.

A more complete list of CSS Selector patterns is here under Pattern matching and a another good reference to bookmark is the Web Platform Docs on CSS Selectors.

Event Based Rules in DTM

With some selector pattern skillz, and our Event Based rules in DTM we can now answer very specific and more valuable business questions—without asking for any “favors” from the IT department.

Here’s a list of the different built-in Event Types we can use in Event Based Rules, and how they’re defined:

click
A pointing device button has been pressed and released on an element.
mouseover
A pointing device is moved onto the element that has the listener attached or onto one of its children.
keypress
A key is pressed down and that key normally produces a character value (use input instead).
focus
An element has received focus (does not bubble).
blur
An element has lost focus (does not bubble).
submit
A form is submitted.
change
An element loses focus and its value changed since gaining focus.
ended
Playback has stopped because the end of the media was reached.
loadeddata
The first frame of the media has finished loading.
play
Playback has begun.
pause
Playback has been paused.
stalled
The user agent is trying to fetch media data, but data is unexpectedly not forthcoming.
volumechange
The volume has changed.
% complete
Emits an event given a specified percentage of total playing time. Example: entering 10% indicates this rule will only fire when 10% of the total length of the video has been played.
time complete
Emits an event given a specified duration of playing time. For example, entering 10 indicates this rule will only fire when 10 seconds of the total length of the video has been played.
orientationchange
The orientation of the device (portrait/landscape) has changed.
zoomchange
When a pinch or spread gesture is performed on a mobile device.
enters viewport
When the element first comes into the view of the visitor. If the element is in view immediately upon page load, it will be triggered right away, if it only comes in view after scrolling, it will fire then. An optional delay can be specified in the rule which determine how long the element has to be in view for before the event is triggered, of which the default value is 1 second.
element exists
When an element of a specified selector comes into existance – either because it’s in the page markup or dynamically injected later on. Each rule only fires once.

Link tracking, forms interactions, HTML5 video scenarios, mobile device events, and more are all out-of-the-box with DTM. In upcoming posts, we’ll look at some use cases for Event Based Rules using our new CSS Selector-fu.

Check out the whole Getting Started Series for more on DTM!