Widget « Compteur de visites »

3

min

quiz

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.

Si vous ne savez pas comment ajouter un widget préformaté à un test A/B, consultez notre article sur le sujet.

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 !

Récupération du nombre 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 back-office.

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.Products.trackProductViewKameleoon(productId, {
 "name": productName,
 "category": productCategory,
 "price": productPrice
});

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.Products.trackProductViewKameleoon(productId, {
 "name": productName,
 "category": productCategory,
 "price": productPrice
});

Cliquez ensuite sur « Valider ».

Afficher pour les appareils

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 !