📘 This article provides a high-level overview of how to use CSS Selectors to define page optimizations in PageWorkers. PageWorkers is part of Botify's Activation Suite, available as an option with all Botify plans.
Overview
CSS Selectors locate the page elements that are styled by Cascading Style Sheets (CSS). In PageWorkers, you can identify specific IDs, classes, or attributes that define:
Where to add new H1 tags or custom HTML in your pages
Where to extract variables from templates
After identifying a CSS selector, you select the CSS Selector Strategy to define where in the page the optimization will be placed or extracted from in relation to the element.
This is a guide to using CSS Selectors in PageWorkers; it is not intended to be a detailed guide to using CSS Selectors. Please refer to external sources for more in-depth information on CSS Selectors (for example, https://www.w3schools.com/cssref/css_selectors.asp).
Defining a CSS Selector
While you can copy and paste CSS Selectors from your browser, this often leads to complex CSS selectors that may change with every release of your website, which can result in unsuccessful optimizations. The steps outlined below should provide you with what you need for PageWorkers optimizations.
Use your preferred method for viewing your page source (e.g., Developer > Developer Tools in Chrome).
Locate the HTML for the element you want to change.
In the PageWorkers CSS Selector text box, define the CSS Selector, referring to the table below.
Select a strategy from the dropdown to define the location of the optimization in relation to the identified CSS selector. In the example shown in the screenshot above, the new H1 heading will be added immediately after the “.fit” class opening tag because the selected strategy is “Prepend”. Refer to the About CSS Selector Strategies section below for more information.
Test the CSS selector to confirm it is returning the desired result.
Basic CSS Selector Syntax
HTML Element | CSS Selector |
Tag | tag name |
ID | #IDname |
Class | .classname |
Attribute | [attribute='attributename'] |
Example:
Consider the following HTML:
<a id="first-link" class="superlink" attribute="megaLink">Hyperlink</a>
To construct a CSS selector for the example above, you can use any of the following. The ID is more precise than the class or attribute, and is therefore the preferred CSS Selector.
#first-link
.superlink
[attribute='megaLink']
About CSS Selector Strategies
The CSS Selector Strategy identifies the location of the optimization in relation to the identified CSS selector. There are two types of strategies in PageWorkers:
Insertion Strategies: When defining templates, the CSS Selector Strategy defines where in the page to place the optimization.
Extraction Strategies: When defining template variables, the CSS Selector Strategy defines where in the page to locate the element you are extracting.
Insertion Strategies
The red text in the examples below identifies where in the page the optimization will be added for each strategy.
Strategy | Description | Example |
Prepend | Adds the optimization immediately after the opening tag of the element identified by the selector. |  |
Append | Adds the optimization immediately before the closing tag of the element identified by the selector. |  |
Insert After | Adds the optimization after the element identified by the selector. |  |
Insert Before | Adds the optimization before the element identified by the selector. |  |
Extraction Strategies
The variable value extracted for each strategy is highlighted in red below.
Strategy | Description | Example |
Inner Text | Extracts only the text content of the element identified by your CSS Selector without any tags. | CSS Selector: h3
HTML:
 |
Inner HTML | Extracts the text content of the element identified by your CSS Selector, including HTML tags. | CSS Selector: h3
HTML:
 |
Attribute | Extracts only the value of the element attribute that is identified by your CSS Selector. | CSS Selector: #addToCartButton
Attribute Name: label
HTML:
 |
Testing CSS Selectors
To determine if your CSS Selector will define the desired location on your page when the optimization is deployed, you should test your CSS Selectors as you configure elements and define extraction rules for variables.
To test a CSS Selector:
While configuring an optimization or defining an extracted variable, click the Test it button to search for the CSS Selector on the page identified in the URL field at the top of the page:
A success message displays if the CSS Selector is found on the identified page, and a preview section displays where the optimization will be added:
or the value that will be extracted:
Content Not Found
If a "Content Not Found" message displays in the preview section, the CSS Selector and strategy did not produce a result for the identified page. If the CSS Selector is not found:
If you are optimizing an H1 tag, a new H1 tag will be added to the page at the location defined by the CSS Selector.
If you are adding custom HTML to the page, you must identify a valid CSS Selector to instruct PageWorkers where to add the custom HTML to the page.
When defining an extracted variable, you must identify a valid CSS Selector to instruct PageWorkers where to extract the variable from the page.
Multiple CSS Selectors Found
If multiple CSS Selectors are found on the identified page, PageWorkers cannot determine precisely where to add your optimization or where to extract the variable. If more than one CSS Selector is found, choose another CSS Selector that will more precisely define the desired location on the page.
