Using CSS targets fields when creating click campaigns.
With click campaigns, you can target multiple or a single element on your page. For that we use CSS classes.
1. To access CSS classes on your page you have to be on your website on a computer and have access to the developer tools.
2. To see the element class name open "inspect element" in your browser.
Right-click on the element you want to target and select "inspect" or "inspect element" from the menu.
3. To find elements, hover over different elements inside the inspector window and they will light up on your screen.
Elements have a tree structure, each HTML element has a parent element who has a parent element, etc. We use different attributes attached to said elements to find them and use them as triggers in click campaigns.
Element parent class name
Use parent elements if you want to target all elements inside a specific element. To target a specific element in the parent element you should also fill element class name, element ID or element data attribute field on the campaign form unless the element you want to target is the only element inside the parent element.
How to find the parent class element? Do as follows.
1. Find the element you want to target in the inspector window. Move up until both the element you want to target and the element surrounding is highlighted.
Let's say we want to target the "Add to cart" button. In that case, move up in the inspector until the box around the element lights up. The highlighted element is the parent element of the element we are trying to target.
In this example, the parent element is <li class="post-716 product ...">
2. Right-click on the element and select ''Edit as HTML'' from the menu. Copy the first word from the class=''class names in here''.
3. Paste it into the "Element parent class name" field on the campaign form.
In this example, the name of the parent class element is post-716
Element class name
Use element class name if you want to target all similar elements on your page. For example, if your page has elements with the class "button" then the campaign will target all the elements with class button. To target a specific element use either "element ID" or "element data attribute".
How to find the element class name? Do as follows.
1. Find the element you want to target in the inspector window. Hover over and find the desired element.
2. Left-click the highlighted element in the inspector window and select "Edit as HTML".
3. Copy the first word between the class=" " string.
3. Paste it into the "Element class name" field on the campaign form.
In the example, the name of the element class is button.
Element ID
Use element ID if you want to target a single specific element on your page. If your element does not have an "ID" use "element data attribute" or "element parent class and element class" together.
How to find element ID? Do as follows.
1. Find the element you want to target in the inspector window. Hover over elements until the element you want to target is highlighted.
2. Right-click on the element and select "Edit as HTML" from the menu.
3. Copy everything inside the id="VALUE TO COPY".
4. Paste it into the ''Element ID'' field on the campaign form.
In this example, the element ID is add-to-card-button.
Element data attribute
Use element data attribute when your element is missing an ID. Not all elements have data attributes.
How to find the element data attribute? Do as follows.
1. Find the element you want to target in the inspector window. Hover over elements until the element you want to target is highlighted.
2. Right-click on the element and select "Edit as HTML" from the menu.
3. Copy the whole word which begins with data-NAMEHERE="VALUE"
4. Paste the value into the "Element data attribute" field on the campaign form.
In the example, the Element data attribute is data-product_id="716"
The element has multiple data attributes. When picking a data attribute, always pick the longest one which includes several numbers or is the longest, because there is a higher chance that the attribute is unique.
