When you're adding components to your campaign experiences, you'll often need to enter the selector for the component. The notable exception here is the Custom Javascript component, which does not require a selector to execute.

So how do you go about finding these selectors?

Background

Any HTML page can be conceptually thought of as a "tree" comprised of nodes (leaves) each of which are an HTML element. Collectively this model is known as the Document Object Model or DOM. Any of these leaves at any level can be identified via a CSS Selector, which is a string of text that uniquely identifies zero or more HTML elements within the DOM.

FunnelEnvy components that take selectors affect the presentation of those HTML elements - such as changing the text within the element, changing the elements style or replacing the element entirely.

Other references:

Finding CSS Selectors

When you're adding a component to an experience you'll first want to identify the type of component that you want (Insert HTML, Replace Text, etc). Once you've done that you'll need to find the selector of the element that you are personalizing.

We'll cover two ways to find CSS selectors using the Google Chrome Browser

Method 1: Using Chrome Developer Tools

Follow the steps below to find the CSS selector for the element you are personalizing: