Installation of the “visit count” widget

The “Visit Count” widget shows visitors how many other people visited the page they’re on.

This can be particularly useful on a product page, to show visitors that a product is popular, thus potentially triggering a sale.

In this article, you will find all steps needed to implement the “visit count” widget.

Integration

To include the widget in an A/B test or a personalization, you need to integrate the RegisterProductPage API on your website first.

A call must be made to the RegisterProductPage API for each visit, on all pages the “visit count” widget will be integrated.

To do so, an additional code snippet is included in the <head> section of your website’s respective pages (meaning your visitors won’t see it). Thanks to this API, product information such as product ID, name, price… is sent to Kameleoon.

To plug the API on your website, please visit its setup page in Kameleoon. Click on “My sites” in the side menu “Setup” tab.

Choose the site you want to add the “visit count” widget to, then click on “Setup”.

In the “General” tab, add the RegisterProductPage API’s JavaScript code inside the “Global custom script“ field.

To be valid, the RegisterProductPage API call must send 4 parameters to Kameleoon:

- product ID or EAN (mandatory)
- name (mandatory)
- category (optional)
- price (optional)
You have two ways of sending these parameters to Kameleoon:

  • with a custom data application
  • via a tag management system.

Once this is done, you’ll be able to call the API enriched with the variables you added.

Example of code with custom data 

if(location.href.indexOf("/r/") != -1){  /* indicate here the URLs for which the API call should be made */
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);

Example of code with a 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 click on “Validate”

Integration of the “visit count” widget “ in an A/B test

Now that we integrated the widget’s code on your web pages, we could install the “visit count” widget on a product page, for example.

Let’s say we want to prove how popular a product is and convince hesitant visitors to buy it. Showing how many visits there were on the page would most likely influence their decision.

Open the graphic editor on the page you want to display the “visit count” widget on. In the variation’s options bar, click on “New element”.

In the pop-in that appears, click on “widgets”.

The widget library opens in a new tab of your browser. In the list of widgets, choose “visit count”.

Click on the name of the widget for additional information or on “Add” to immediately access setup.

Widget configuration

You can set up your widget in five steps.

Description text

This will be displayed on your website and seen by your visitors. Important, you must include “[n]” (as shown in the example) in your own text, because it will be replaced by the actual number of visitors when live.

Count since

You can choose to count visits over the last day, week or two weeks. You can also choose a specific date to start counting visits.

Count format

Kameleoon gives you the choice between different number formats (French, English, German) to make it easier to read for your visitors. You can also choose an abbreviated format where the number is rounded off to hundreds.

Minimum number of visits

You can specify a minimum number of visits to be reached before showing the widget on your page.

In our example, we wanted to display the number of visits to show the popularity of a product. So it makes sense to display only large numbers, showing a small number of visits wouldn’t be very enticing!

Display for the following devices

You can pick which types of devices the count should be displayed on. A black icon means the widget will be displayed on this device type, a grey icon means it won’t.

Don’t forget to click on “Save” to validate the creation of your visit count widget!

 

Position the widget within the page 

Once the parameters are saved, the graphic editor automatically opens and your widget is placed on the page. A tool bar also opens. Use its “Position” tab to place the widget wherever you want on your page.

You can also use the “Insert before” feature. Select it then click on the element you want to re-position behind the widget.

To learn more about this step, please refer to the detailed articles.

Integration of the “visit count” widget in a personalization

To add a “visit count“ widget to a personalization, go to your Personalizations dashboard.

Open the personalization you want to add a visit count on or create a new one.

In the “Type of personalization” section, click on “In the content of your pages”, then click on “Widgets”.

A list of available widgets appears in the right-hand column. Select the “visit count” widget and click on “Add”.

Note: by clicking on the widget’s name, you’ll access additional information about it.

You can either create a new visit count from scratch or add an existing one. If your visit count already exists, please select the test and variation it was used on. Otherwise, click on “Create a new visit count”.

Once the new visit count is created, you’ll need to name your visit count widget and indicate the website and page it’ll be on. 

Validate to access the widget’s setup.

Have more questions? Submit a request
Powered by Zendesk