So how do you go about finding these selectors?
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.
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:
- In a new Chrome tab / window, navigate to the page you are previewing the experience on
- In the menu click on View -> Developer -> Developer Tools to open the developer tools