UX Rules – Browsi

💡 UX Rules help you set limitations to the Browsi engine in serving ads on the page such as setting a distance between ads and other elements or even avoiding inserting an ad on an element. Please note that these rules apply for dynamic placements by the Browsi Engine. Those rules won't effect API elements.

Before we begin

It's important that we go over a few basics in order to carefully and intelligently optimize our rules. We're going to go over the following:

(feel free to skip what you already know)

Website Structure (HTML)
Element Ids and Selectors (CSS)
Rule Terms
Account Setup
Custom Rules
Finding my elements

Website Structure (HTML)

An HTML document is a plaintext document structured with elements. Elements are surrounded by matching opening and closing tags. Each tag begins and ends with angle brackets (<>).

Ex: <p>Hello, World </p>

An element can be extended with attributes, which provide an additional information how the browser interprets the element.

Ex: <div id="first-paragraph" class="paragraph"><p>Hello, World</p></div>

An HTML document is composed of 3 parts:

A line containing HTML version information,
A declarative header section (delimited by the <head> element),
A body, which contains the document's actual content (delimited by the <body> element)

Don't worry, you don't need to know how to code. We're just going over a few basics on how a website is structured.

Element Ids and Selectors

As mentioned above elements can have many attributes. However, the main ones we're focusing on are element ids and classes.

id: The id attribute specifies a unique id for an HTML element. (the value of an element's id attribute).

<div id="first-paragraph"<p>Hello, World</p></div>

class: The class attribute is often used to point to a class name in a style sheet. It is often use to manipulate the style of multiple elements containing the same class name.

<div class="paragraph"<p>Hello, World</p></div>

Rule Terms

Before going over the UX Tools dashboard let's go over a few terms:

Avoid > In this context, "Avoid" limits the Browsi AI in placing ads inside the selected element.

Stay Away > In this context, "Stay Away" conditions the Browsi AI to set a minimum distance between the selected element and the placed ad from top to bottom. You can set a "Stay Away" distance of 150 pixels which conditions the AI to place ads above and below the selected element of at least 150px.

Setup

UX Rules help you add custom rules to your configuration in addition its default setup on your website. This helps Browsi optimize better ads tailored to your needs.

Here's a detailed guideline to your UX Rules optimization process.

Login to your account and select the UX Rules to your left side of your dashboard.
Select Desktop or Mobile

You can setup rules based on content type (Ads, Images & Videos, Content Recommendation Widgets). Each section represent an element type to which you want to apply the rule.

To start setting your UX Rules:

Click on "Edit" located on your section type.
When expanded, select the condition type : "Avoid" or "Stay Away".

The "Avoid" type ignores ads to be pushed inside those elements we just inserted.

The "Stay Away" type sets a distance from which ads can be placed based on the elements we inserted. You can set the level of density to your choosing.

You can see a clear view of the expected result by looking to the diagram on your right side of the screen under "Preview - Ads". This helps you scale the distance of ads being placed to your content.
Once expanded, you'll find two buttons ("Custom" and "+Create") that will help you add your elements to your rules.
If you don't have any technical background, the +Create button is a perfect choice to add your elements in your UX Rules:
1. Click on the +Create button.
2. Select the element type.
  The element type is a list of elements such that <p> stands for paragraph, <li> stands for list item, <div> is the syntax for an element or element container, etc.. You can find all the elements tags and their definition by clicking on the link here.
3. Select what attribute is more unique to it in order to specify the element precisely. Element ids are best know to give a unique identifier to the element chosen whereas class names groups multiple elements.
4. You can also select the "Custom" button and insert the element's selector:
5. Click "Save" and the element will be saved inside the container and will have the applied rule.

Custom Rules

You can add your own custom rule but clicking on the "Add Custom Rule" button on the top right side of the screen.

By adding a Custom Rule, you can name your Content Type, set your Rule Type and add your selectors for the rules to apply.

When you're done, click on the "Save" button and your Custom Rule will be successfully created.

Finding my elements

Now that you've got the hand of the UX Rules let's quickly dive into where and how to find the right elements to add to your applied rules.

For this purpose we'll take the https://gobrowsi.com/case-study/futbol-sites-increases-its-ad-inventory-rpm-with-browsi-inventory-os/ as an example and show you how to properly chose your elements.

First, open the webpage.
Click on three vertical dots on the sidebar, a drop-down will appear
S More tools > Developer tools. Alternatively, you can also use these shortcuts: command+option+c on Mac OS, and control+shift+c on Windows or Linux to do it.
The element box will pop up and you can make changes as needed. There are many tabs on the dev tools but we're going to concentrate on the "Elements" panel, where all of your sites elements are located.
Using the icon will let you select highlight and select the element on the page. You can also hover over the elements in your "Elements" panel and your site elements will be highlighted to help you see what you're selecting.