Responsive container selection

How to pick up a key container properly? What is it? What to do when I don't know?

For each website you want to have tracked by Monkey Tracker tool we need to know following two things:

  1. name of the domain
  2. main container selector

Main container is a (HTML) element (e.g. div, section and so on) which has these characteristics:

  1. is present in all pages you want to track
  2. envelopes base content of the page (i.e. clearly defines the width of the website)
  3. in case of responsive design it changes its width depending on the visitor device

If no selector is set up for the domain or is not set up properly NO MEASURING is performed on the website. So it is very important to give this action adequate attention!

Note: Clicks outside the area defined by the selector are also recorded. The selector need not point to an element that is stretched over the entire width of the page. It is crucial to select the correct container, which responds to the width of the client device.

Fluid design

In case of fluid design you'd probably choose element body. Statistics for websites with fluid design are more scattered and will be probably more difficult to interpret for less visited pages. After some time of tracking most used resolutions of visitors will start to appear because Monkey Tracker will record most actions from them. You can see most used resolutions of your website by displaying stops in analytics console. Therefore Monkey Tracker tool is suitable even for such types of websites.

Responsive / adaptive design

If you have your website built with use of breakpoints (adaptive or responsive design) there should be at least one element that clearly defines width of the website for certain resolution - i.e. currently active breakpoint. You'd need to identify such element and enter in the domain administration as a main container selector.

Selector format

You can define main container selector as:

  1. ID attribute and mark it as:
    #id_of_element - e.g. #page-container
  2. name of the CSS class and mark it as:
    .name_of_the_class -  e.g. .container,
  3. or element name itself and mark it as:
    name_of_the_element - e.g. body

In case there are multiple HTML elements matching the selector only the first one is used.

What to do when I don't know?

Never mind. If you have any of the paid plans we review your site automatically and our team that has in this respect a great experience set the selector. If your site gets redesigned, please contant our support and request a re-examination and readjustment of the responsive selector. This service is not provided for the free program because of labor intensity.