Scroll tracking enables you to measure the rate of visitors having scrolled to a certain level on your web page. You can create it via the graphical editor or via the Kameleoon back-office.

Just like click tracking a scroll tracking can be created from any of your variations. Once created and associated with your experiment, all its variations will be tracked. You can also use scroll tracking for all new tests.

Scroll tracking creation

Create a new scroll tracking from the graphic editor

To set a scroll tracking from the editor, launch Kameleoon in edit mode on the page and variation of your choice.

Select the element you want to associate a scroll tracking to; the tool panel appears. The third tab, “Tracking”, enables you to configure the tracking.

Name your scroll tracking to be able to identify it and in the drop-down menu, select “Scroll tracking”.

Selecting “Scroll tracking” gives access to a serie of options in the tool panel. The page is also divided in two:

• The upper part is displayed normally and delimits the part of the page the visitor must scroll for the goal to be converted.
•  The lower plart is dimmed and represents the of the page that is excluded from scroll tracking.

This delimitation between the two areas gives a precise view of how far the user has to scroll to convert. The goal is converted when all of the non-dimmed page has been displayed, i.e. when the limit has reached the bottom of the screen.

You can set the level in 3 different ways.

Based on an element

By default, the scroll tracking level is set according to the element you selected to create the tracking.

The level  is placed directly below the selected item. The goal is converted only if the visitor has scrolled down to reveal the entire element.

The definition in percentage is dimmed, you can’t change it.

Based on a specific percentage

By selecting “a precise percentage” from the drop-down list, changing the percentage becomes possible.

You can define the scroll tracking level  as a percentage of your page.

The percentage applies to the entire page, starting from the top: 0% places the level at the very top of the page, 50% places it at half of the page and 100% at the very bottom .

The page display automatically adjusts to the percentage you enter.

You can also manually move the scroll tracking level.

Note: The percentage takes into account the entire page and not just the part currently displayed on your screen.

Place your mouse pointer on the white line that delimits the area included in the tracking. A double-headed pointer appears. Hold the left click and drag the level where you want on the page. The percentage is automatically adjusted in the tool panel.

From a height in pixels

By choosing “a height in pixels” from the drop-down menu, you can set the placement of the scroll tracking level based on a height in pixels.

The position according to a height in pixels works the same way as the placement according to a percentage. The “zero” point is at the top of the page. The lower the level on your page, the higher the pixel height, the maximum height being that of the entire page.

As for the percentage, you can manually move the level on the page by clicking and dragging the white bar. The corresponding pixel height adapts automatically.

Finalize scroll tracking

Once you have defined the scroll tracking level, click on “Add the tracking”.

By adding the tracking, you associate it with an element if you defined the level according to an element. Otherwise, the tracking is associated to the page “body” . Your tracking’s name and type (scroll) are now displayed in the list of trackings.

Create a new scroll tracking from the back-office

Pour paramétrer un tracking de scroll depuis le back-office et l’associer ensuite à une expérience, déroulez le menu « KPIs » et cliquez sur « Objectifs ».

En haut à droite de la page qui s’ouvre, cliquez sur le bouton « Nouvel objectif ».

Une pop-in de création apparaît. Choisissez le site web auquel vous voulez associer le tracking et sélectionnez le type « Tracking de scroll » dans le menu déroulant.

Then name your tracking and fill in the URL of the page of your site in order to load a preview. This preview allows you to indicate the limit of the scroll tracking.

If the preview does not load, this is probably related to a security rule on your website, which does not allow loading the URL in an iframe. In this case you should change this authorization on your website.

As in the graphic editor tool panel, you can define the location of the scroll tracking from a percentage, a height in pixels or an element.

Advanced settings allow you, if necessary, to send the tracking data to one or more third party tool(s), to display the goal only for certain experiments, or to use the goal for machine learning. Then validate your advanced options to apply them to scroll tracking.

Once these elements are set up, you can create your scroll tracking and use it as a goal in your experiments!

Edit or delete a scroll tracking

From the graphic editor

On hover over the name of your tracking in the list, options appear.

With a click on the pencil symbol you can edit the tracking. A pop-up with editing options opens.

You can :

• Rename your tracking
• Modify the level
• Add a description
• Associate a category
• Associate an action

A click on the trash symbol deletes the tracking.

From the back-office

Scroll down the “KPIs” menu and click on “Goals”.

Find the map dedicated to scroll tracking. When hovering over the mouse, options appear. Click on the pencil icon to edit the tracking, or on the trash can icon to delete it.

If your tracking is used in at least one of your experiments, a pop-in will ask you to confirm your choice, as this will obviously have an impact on your results.

Define scroll tracking as a goal

Once your scroll tracking created, you just have to define it as goal to transmit its results to the Kameleoon tool.

To do this, when launching your test, select “Kameleoon” as reporting tool.

The list of existing goals appears: select the scroll tracking you have previously created.