Mise en place du widget “compteur de visites”

Le widget compteur de visites vous permet d’afficher dans une page le nombre de personnes ayant déjà visité la page.

Cela peut s’avérer particulièrement utile sur une page produit notamment, pour faire connaître au client la popularité du produit et ainsi le pousser à l’achat.

Dans cet article, vous trouverez tous les éléments nécessaires à la mise en place d’un widget compteur de visites.

Intégration du code

L’intégration du widget « compteur de visites » dans un test A/B ou une personnalisation nécessite tout d’abord l’intégration de l’API registerProductPage dans votre site web.

l'appel à l'API registerProductPage doit être fait à chaque visite, sur les pages sur lesquelles vous souhaitez mettre en place un compteur de visite. Concrètement, il s'agit d'un bout de code supplémentaire inséré sur les pages correspondantes de votre site, dans la section <head> (ce n'est donc pas visible).Le rôle de cette API est de transmettre à Kameleoon les informations relatives à la fiche produit : l'identifiant du produit, son nom, son prix ...

 

Pour intégrer l’API à votre site, rendez-vous sur la page de configuration de celui-ci. Cliquez sur « mes sites » dans l’onglet « configuration » du menu latéral gauche du backoffice.

Sur le site auquel vous souhaitez ajouter le widget compteur de visites, cliquez sur « configuration ».

Dans l’onglet « général », ajoutez le code JavaScript de l’API registerProductPage dans la fenêtre « script personnalisé global ».

Pour être valide, l'appel à l'API registerProductPage doit transmettre 4 paramètres à Kameleoon :

- l'identifiant du produit ou EAN (obligatoire)
- son nom (obligatoire)
- sa catégorie (optionnel)
- son prix (optionnel)
Deux possibilités existent pour communiquer ces paramètres à Kameleoon :

  • soit par l’application de custom data
  • soit par le biais d’un système de management de tags.

Après cela, vous pourrez appeler l’API complétée par les variables que vous venez de préciser.

Exemple de code avec custom data

if(location.href.indexOf("/r/") != -1){  /* Indiquez ici les URLs sur lesquelles l’API doit être appelée */
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);
}

Exemple de code avec système de management de tags

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);
}

Cliquez ensuite sur « valider ».

Intégration du widget “compteur de visites” dans un test A/B

Maintenant que le code est intégré aux pages web, nous allons installer ensemble un widget compteur de visite sur une page produit.

Nous souhaitons que ce compteur apparaisse sur les pages produit afin d’inciter les clients hésitants à acheter le produit en leur montrant la popularité de celui-ci.

 

Ouvrez l’éditeur graphique sur la page dans laquelle vous souhaitez ajouter le widget « compteur de visites ». Dans la barre d’options de votre variante, cliquez sur « nouvel élément ».

Dans la popin qui s’ouvre, choisissez d’ajouter un élément « widget ».

La bibliothèque de widgets du backoffice s’ouvre dans un nouvel onglet de votre navigateur. Dans la liste des widgets, choisissez le « compteur de visites ».

Cliquez sur le nom du widget pour en avoir les informations détaillées ou cliquez sur « ajouter » pour passer directement au paramétrage.

Paramétrage du widget

Paramétrer un compteur de visites se fait en 5 étapes :

Texte du libellé

Le texte renseigné ici est celui qui apparaîtra sur votre page web et qui sera donc visible par vos visiteurs. Dans cette phrase, [n] est la variable à la place de laquelle s’affichera le nombre de visites. Elle doit donc nécessairement apparaître dans la zone de texte.

Compter depuis

Le nombre de visites que le widget affichera sera le nombre de visites comptabilisées depuis la période que vous aurez renseignée ici. Les visites comptabilisées peuvent être celles du jour passé, de la semaine passée ou des quinze jours passés. Vous pouvez également définir une date spécifique à partir de laquelle les visites seront comptabilisées.

Format du comptage

Kameleoon vous permet de choisir le format d’affichage du nombre de visites (français, anglais, allemand) afin qu’il corresponde à votre public. Vous pouvez également choisir le format abrégé. Le nombre affiché est alors arrondi à la centaine la plus proche.

Nombre minimum de visites

Spécifiez ici le nombre minimum de visites à partir duquel le compteur sera affiché sur la page.

Dans notre exemple, nous souhaitons afficher le nombre de visites afin montrer la popularité des articles et pousser le visiteur à l’achat. Il est donc judicieux de mettre un nombre minimum de visites relativement élevé, nous risquerions sinon d’avoir un compteur de visites contre-productif !

Afficher pour les appareils suivants

Choisissez ici le type d’appareils sur lesquels le widget s’affichera. Lorsque l’icône est noire, cela indique que le widget est actif sur ce type de terminal. Lorsque l’icône est grisée, le widget est inactif.

N’oubliez pas de cliquer sur « enregistrer » pour valider la création de votre widget !

Placer le widget dans la page

Une fois les paramètres enregistrés, l’éditeur s’ouvre automatiquement et votre widget est placé dans la page. Le Panneau d’outil est également ouvert et affiche l’onglet « position ». Vous pouvez désormais manipuler votre widget pour le placer dans votre page comme avec n’importe quel autre élément.

Pour déplacer votre widget, cliquez par exemple sur “placer avant” puis sur l’élément avant lequel vous souhaitez placer votre widget.

Pour apporter plus de modifications à cet élément, consultez les exemples d'édition.

Intégration du widget “compteur de visites” dans une personnalisation

Pour ajouter le widget « compteur de visites » dans une personnalisation, rendez-vous tout d’abord sur la page « vue d’ensemble » de l’onglet « personnalisation ».

Ouvrez la personnalisation à laquelle vous souhaitez ajouter le widget ou bien créez une nouvelle personnalisation en cliquant sur le bouton « nouvelle personnalisation » situé en haut à droite de la page.

Dans la section « type de personnalisation », ajoutez un élément « dans le contenu de vos pages » puis cliquez sur « widget ».

Dans la liste des widgets disponibles qui apparaît dans la colonne de droite, sélectionnez le widget « compteur de visites ». Cliquez sur le nom du widget pour en avoir les informations détaillées ou cliquez sur « ajouter » pour passer directement à la première étape du paramétrage.

 

En cliquant sur « ajouter », Kameleoon vous propose deux options : créer un nouveau compteur de visites ou ajouter un compteur de visites déjà créé. Si votre compteur de visites existe déjà, indiquez le nom du test et de la variante sur laquelle vous l’avez créé. Sinon, cliquez sur « créer un nouveau compteur de visites ».

Lorsque vous créez un nouveau compteur de visites, une popin apparaît et vous demande de nommer votre compteur, d’indiquer le site auquel il sera associé et la page sur laquelle il sera placé.

Validez pour accéder au paramétrage de votre widget.

Vous avez d’autres questions ? Envoyer une demande
Réalisé par Zendesk