/
UX Rules

UX Rules

Owned by Hadas Makovsky (Unlicensed)
Last updated: Aug 11, 2024 by Yahel Galili
6 min read

💡 UX Rules help you set restrictions to the Browsi engine serving ads policy on the page. Limitations may differ between setting a distance between ads and other elements or even avoiding inserting an ad on an element.
Please note, these rules apply for dynamic placements by the Browsi Engine and will not effect API elements.

Before starting..

It's important that we go over a few basics in order to carefully and intelligently optimize our rules. In this section we will walk through the following:

 

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:

  1. A line containing HTML version information,

  2. A declarative header section (delimited by the <head> element),

  3. 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 will focus 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 used 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:

Default Rules

  1. Login to your account and select the UX Rules to your left side of your dashboard.

2. Select Desktop or Mobile

 

You can setup rules based on content type (Ads, Images & Videos, Content Recommendation Widgets) that are pre defined in the System. 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 in pixels from which ads can be placed based on the elements we inserted.

Stay away rules can be set to create distance below, above or both below and above the inserted selectors. This gives you great flexibility in creating new ad placements while maintaining page structure.

To apply a rule to only below or above a certain selector, use the toggle under selector types.

image-20240811-123322.png

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.


3. Once expanded, you'll find:

  • Sites drop down - where you can choose the sites you want to apply the rule on. Default selection is “All Sites”, means that the rule will be applied in publisher level (on all publisher’s sites).

  • Two buttons ("Custom" and "+Create") that will help you add your elements to your rules.

4. If you don't have any technical background, the +Create button is a perfect choice to add your elements in your UX Rules:

  • Click on the +Create button.

  • 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.

  • 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.

  • You can also select the "Custom" button and insert the element's selector:

  • Click "Save" and the element will be saved inside the container and will have the applied rule.

     

Custom Rules

You can add your own rules by 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

  • Add selectors for the rules to apply

 

When done, click on the "Save" button and your Custom Rule will be successfully created and added to the rules list.

 

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 Futbol Sites Increases its Ad Inventory RPM by 43% | Browsi as an example and show you how to properly chose your elements.

  1. First, open the webpage.

  2. Click on three vertical dots on the sidebar, a drop-down will appear

  3. 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.

image__1_.png

4. 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.

5. 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.

 

Related content