Element selector

Element selector - what is it?

 

To use some of the many iPresso functionalities, you need to provide the correct selector. It points the system to the element that causes activity in iPresso.

 

We can name a few functionalities that use the selector of the monitored site’s element, for example, event-driven pop-ups or automatic data collection.

 

The most specific and reliable selector is the unique id of the element. During the development of a website, you can predict which elements (button, input, etc.) will link to the iPresso system. It should have predefine its unique id.

 

On an already published site, you may face issues with changing its content. In that case, you can use a selector composed of a unique combination of element classes, names and types. It is crucial to understand that this option is less stable - if there are any changes to the site layout, the selector can point to the wrong element.

 

On the other hand, lesser selectivity of this option can be useful: you can use a selector defining more than one element. That way the same activity in iPresso can be caused by interactions with numerous elements on site. Achieving this effect unfortunately needs some prior and conscious decisions by web developers, so it is out of the scope of this article.

 

How to find a selector on your site?

 

The easiest and quickest way to get the element selector is to open your monitored site in the web browser of your choice and use the Inspect function. Below you can find the instructions for the two most popular browsers: Google Chrome and Mozilla Firefox. Both browsers will try to provide you a unique selector - describing only one element on the site. 

 

1. Google Chrome:

 

Move the pointer to the particular element, then push the right mouse button. Select inspect from the menu.

In the open side panel, the default selected line should reference the chosen element. Hover over it with the pointer, and after pushing the right mouse button to choose Copy -> Copy selector.

2. Mozilla Firefox

 

Move the pointer to the particular element, then push the right mouse button. Select inspect from the menu.

 

In the open bottom panel, the default selected line should reference the chosen element. Hover over it with the pointer and after pushing the right mouse button, choose Copy -> Copy selector.

3. You can now paste the copied selector in the appropriate place in the iPresso panel. It should have the following structure:

 

• in the case of lack of unique id but CSS class structure:

body > div > div > main > footer > div.mdl-mini-footer__right-section > ul > li:nth-child(1)

• in the case of unique id:

   #fname