Adobe unleashed a brand new utility affectionately known as “CSS Selector” that will help you tag your site. It’s still in beta, but I wanted to share my thoughts on this new innovation. So what is CSS Selector? It’s a utility that’s baked into DTM rules that will help you construct selectors. In other words, it will help you target elements in Event Based Rules. The goal is to more quickly implement tags on your site. Here’s the documentation Adobe provides that will show you how it works. I’d rather not spend too much time explaining how it is done since Adobe’s guide should suffice. Let’s dive right into it.
Table of Contents
Reminiscent of Satellite’s Rover bookmarklet, CSS Selector has on-hover capabilities that wrap elements in an outline to show you which elements you’re targeting (note the orange box).
Clicking generates the element selector hierarchy which appears at the bottom. I really like how it is a no-bullshit tool. You click… it assigns. However, it doesn’t reflect the tiny text that’s at the bottom of the selector box. I’m unsure how it’s generating the selector. For instance: If you enlarge the image above you’ll notice (with a magnifying glass) that is says div div. My expectation is that the result would be something like jQuery(“div div”) which may not be the most useful. When I click on the element to generate the selector it produces .input.
One really neat feature is the number in parentheses by the Clear button. This number represents the total elements affected by the selector. This helps you understand if you set the scope too broad. This is INCREDIBLY useful and could honestly be a utility on its own. What’s odd is its positioning. I understand that you want to clear all instances of the tag but its definition isn’t intuitive. Another odd design decision is the “Toggle Position” button. It isn’t clear what that does if you haven’t fully read the documentation. The button CTA makes it feel like I’m toggling the position of my selector and not the physical frame position. I’m unsure why the frame is even inside the iframe for that matter. There might be opportunity to place it just below or above the window where it isn’t overlaying content.
The design patterns are another curiosity. It doesn’t look like it’s part of DTM. The button styles are completely different and the help icon is another button. I’m unsure why the help button doesn’t say “Help” and instead opted to use a question mark. I understand it’s a help icon but I wasn’t ready for it to open another browser tab.
It’s a beta. It’s not going to be perfect. Selecting elements does what you expect – it grabs the element selector of the highlighted area. The upshot is it takes kind of a shotgun approach. For instance, selecting the main image on tagtician.com picks out the element img. This affects 9 other elements! That’s not very helpful, especially if I’m new to tagging. This is where it gets really tricky. How do you design this? You have to have a case for each element type that asks the user to specify if they want to tag ALL or just one… or some? The user would be better served if the tool found a unique identifier for each element. Let the user select all 9 images independently. It’s a bit tedious, but think about the problem this utility is trying to solve. Its purpose is to help users target elements faster or help less-experienced users construct selectors (I think). Selecting the elements one-by-one will serve the latter but not the former. As it is, I don’t see this speeding up the process for power users in the near-term.
Despite the confusing selector behavior, power users can access the full DOM of the site in the iframe. So if you DO want to construct your unique selector you can always inspect the page element and build it yourself in the interface.
C’mon… CSS Selector? So now when I look for help for Data Element CSS Selectors in DTM I’m going to find this. I don’t think the name of this can be understated. There’s a reason the Sci Fi Channel changed their name to SyFy – people had trouble finding relevant information without sifting through irrelevant articles using the same name. Now CSS Selector is competing with another feature in DTM called CSS Selector!
The Verdict… and Wishlist
I love this idea. I want Adobe to make this utility better. I am confident they will. This is a BETA review that is being written with the hope that it will influence feature priority. Right now it isn’t quite ready for prime time. It doesn’t yet make my job easier as a power user or a novice. As a power user, it still makes more sense for me to build selectors on my own… because that takes no time whatsoever. I think the core problem this should solve is to give the novice users a utility they can trust. Here’s what I would do next:
- Change the damn name to something I can reliably search! Call it DTM Visual Tagger or something; or did Ensighten already trademark that?
- Generate a unique selector. It will make it more tedious, but since when did I need help finding the “img” element? As a novice I want something consistent.
- Make the tiny text at the bottom of the box more meaningful… maybe name it the selector?
I think the biggest challenge Adobe will face with this is that this is an entire thing they’ll have to maintain and babysit for a while.