Visits counter

3

min

quiz

The visit counter widget allows you to display the number of people who have visited the page in a page.

This can be particularly useful on a particular product page, to let the customer know the popularity of the product and push it to purchase.

In this article, you will find all the necessary elements to set up a visit counter widget.

If you do not know how to add a preset widget to an A/B test, read our article on the subject.

Description text

The text entered here is the one that will appear on your page and that your visitors will see. In this sentence, [n] is the variable instead of which the number of visits will be displayed. It must therefore appear in the text box.

Counting from

The number of visits that the widget will display will be the number of visits counted since the period you entered here. The counted visits can be those of the past day, the past week or the past fortnight. You can also set a precise date from which visits will be counted.

Counting format

Kameleoon allows you to choose the display format of the number of visits (French, English, German) so that it matches your audience. You can also choose the short format. The number displayed is then rounded to the nearest hundred.

Minimum amount of visits

Specify here the minimum number of visits from which the counter will be displayed on the page.

In our exemple, we want to display the number of visits to show the popularity of items and push the visitor to purchase. It is therefore wise to put a minimum number of visits relatively high, we would otherwise risk having a counter-productive counter!

Number of visits data recovery

Code integration

Integrating the “Visits counter” widget into an A/B test or personalization first requires the integration of the registerProductPage API into your website.

The call to the registerProductPage API must be made at each visit, on the pages on which you want to set up a visits counter. Specifically, this is an extra piece of code inserted on the corresponding pages of your website, in the section <head> (it is not visible). The role of this API is to transmit to Kameleoon the information relating to the product sheet: the product ID, its name, its price …

To integrate the API with your website, go to the configuration page: click on “My websites” in the “Configuration” tab of the back-office left side menu.

Click “Configuration”.

In the “General” tab, add the JavaScript code of the registerProductPage API in the “Global custom script” block.

To be valid, the call to registerProductPage API must pass 4 parameters:

  • The product identifier or EAN (required);
  • Its name (required);
  • Its category (optional);
  • Its price (optional).

There are two ways to communicate these settings to Kameleoon:

  • By the application of custom data;
  • Either through a tag management system.

After that, you can call the API completed by the variables you just specified.

Code sample with custom data

  if (location.href.indexOf ("/ r /")! = -1) {/ * Enter here the URLs on which the API must be called * /
 var product_code = Kameleoon.API.currentVisit.customData ["productCode"];
 var product_name = Kameleoon.API.currentVisit.customData ["productName"];
 var product_category = Kameleoon.API.currentVisit.customData ["productcategory"];
 var product_pricing = Kameleoon.API.currentVisit.customData ["productPrice"];
 Kameleoon.API.registerProductPage (product_code, product_name, product_category, product_pricing);
 }

Code sample with tag management system

  Kameleoon.API.runWhenConditionTrue (function () {
 return typeof tc_vars! = "undefined" && tc_vars ["product_id"]! = "";
 }, function () {
 var productId = tc_vars ["product_id"];
 var productName = tc_vars ["product_name"];
 var productCategory = tc_vars ["product_category"];
 var productPrice = tc_vars ["product_price"];
 window.href = location.href;
 Kameleoon.API.registerProductPage (productId, productName, productCategory, productPrice);
 }

Then you can validate.

Display for devices

With a few simple clicks, you can decide on which devices you want to display your web personalization: computers, smartphones or tablets. By default, all devices are selected. Click on the icon of your choice to unselect this device.

Note: You can also include or exclude devices when you create your segment.

 

Do not forget to click on “Save” to validate the creation of your widget!