CSS Selector

7 min

CSS Selectors

While working with Data Collection Tag Properties, you will eventually have to connect a Data Element or click action to a specific element on a website. To do so, you must provide a CSS Selector to the DOM Object. Usually, there are two ways to do it:

Copy selector from browser's inspector or
Write the selector yourself

The first option doesn't require specific knowledge, but it results in a terribly-looking selector (if you mean to show that to the customer) that may be too detailed and could stop working when the page is updated.

Copy selector from the browser's inspector

Just follow the steps below:

Open your web page in any internet browser (Chrome, Firefox, Safari, etc.)
Right-click the element you want to select, usually a textfield or a button
From a context menu select the option "Inspect" or similar (will differ slightly by the browser)
This will open a built-in inspector on the tab containing the website structure (DOM) and your element selected.
Right-click your selected element (usually and <input ...> or <button ...>) and select Copy > Copy Selector from the context menu.
Paste this copied value to the Selector field in the Data Element or Rule action configuration.

Write the selector yourself

Writing custom selectors is pretty simple, even for less technical users. It requires you to know the syntax and consider how it may behave on other pages.

Selector can be as simple as #email or more complex, like form. login-form .fieldset input[name="email"]. It depends on how the page (and its siblings) are written.

To begin, check the page structure surrounding your element by right-clicking the element in a browser and selecting "Inspect".

The selector consists of one or more text strings separated by a white space. Each string represents a different element. Since the website structure is tree-like, each selector element is used to gradually narrow the searched structure. This is useful if we are unable to produce a unique selector for our element itself, but we can identify its parent element, eg. a form.

The sample structure could look like this:

<body> <section class="wide-section"> <form class="registration"> <input class="text email" id="email" name="email" type="email"/> <input class="text password" name="password" type="password"/> <button class="primary">Register</button> </form> <form class="login"> <input class="text email" id="email" name="email" type="email"/> <input class="text password" name="password" type="password"/> <button class="secondary">Remind password"</button> <button class="primary">Login</button> </form> </section> <section class="wide-section"> ... </section></body>

There are 4 primary identifiers that we can use, written in capital letters below: <TAG class="CLASS1 CLASS2 ..." id="ID" ATTRIBUTE1=VALUE1 ...>

In CSS Selector tag is written with no extra syntax, each class starts with a . , id starts with #, and other attributes and values are written as [attribute="value"]

Let's use the login email field to present selector types that we can use: <input class="text email" id="email" name="email" type="email"/>

Identifier	Value	Selector
tag	input	input
class	text	.text
class	email	.email
id	email	#email
attribute	name = email	[name="email"]
attribute	type = email	[type="email"]

These are pretty much all the basic options. If you want to use more than one selector to identify an element, just combine them with no spaces in between like so: input#email

You can notice, though, that this selector matches two email fields in the structure above (one for the registration form and one for the login form. Usually, this means, that only the first one will be targeted by Data Element or Rule action. To distinguish between them, we would need to specify that we mean the email field in the login form. To do that we will include the form tag and its .login class in our selector so that it will become: form. login input#email

id - it should be unique on a given page, though it often isn't. This is the best identifier but needs to be checked if it's not duplicated on a page, like in our example above, or if it doesn't have a random-looking value.
attribute name - it should be unique at least in a nearest parent <form> element
class - sometimes classes can be unique, like login-email and these are great to use. Avoid classes that look like a means to apply to style, eg. primary secondary btn text Even if they work correctly on a particular page, they can unintentionally match elements on other pages. However, in our example above, this .primary class selector could be used to target the Login button instead of the one to remind password.
tag - this is a type of element, that will repeat all over the page. It can be used to help identify the element when we have, for example, an input and a button with id login then we could use the tag to differentiate them: input#login vs. button#login
Other attributes - usually they serve some other, technical purposes and even if they contain something resembling an id, it could change over time, usually right before the demo ;)

Testing

You can use your browser's inspector (console to be precise) to test your selector before saving it to Data Element / Rule action and rebuilding the whole property. To run them, open Inspector on your page (eg. by clicking anywhere and selecting inspect ) and either find the console in the same area or switch to the `Console` tab. Then type your command and hit enter to see the result.

document.querySelector('form.login input#email') - text in quotes is the selector. Returns the FIRST matching element. Use single quotes on the outside and double quotes inside, eg. for attribute values 'input[name="value"]'. In most browsers, if an element is returned, you can hover on the returned row in the console and it will highlight the element on the page. Use it to test your selector before writing it to launch.
document.querySelectorAll('button.primary') - similar to the above, but returns all elements matching the selector. Use it to check if your selector doesn't match too many elements.
_satellite.getVar('Profile - Email') - text in quotes is the exact name of a Data Element. Returns the current value of that Data Element or a specified default value. Use to check Data Element configuration after updating and building Tag Property