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?
- Which version of text on the sign-up form button gets us more registrations for our webinar?
- Before we think about click through rate, do we know how many visitors to the registration page even see the call to action in their browser?
- After submitting the lead form on the landing page, what percentage of visitors make an online purchase within six months?
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
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.
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:
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!