Intégrer le suivi sur un site web

En bref

LEI Analytics compte, sur les sites qui affichent des fiches du LEI :

• les clics sur les coordonnées et les liens d'une fiche : site web, email, téléphone, documentation, tracé GPX ou KML, réservation ;
• les vues de fiches, c'est-à-dire l'affichage de la page de détail d'une fiche.

Ces statistiques sont transmises au SIT (Système d'Information Touristique) qui gère les fiches affichées sur le site. Il les consulte dans le tableau de bord du LEI.

L'intégration se fait en quatre étapes, sans développement côté serveur :

1. Inclure le script dans les pages.
2. Indiquer le SIT.
3. Marquer les éléments cliquables des fiches.
4. Signaler l'affichage des fiches.

Le script ne modifie pas la page et ne bloque aucun lien : le clic suit son cours normalement.

Avant de commencer

Demandez à votre SIT :

Vous aurez aussi besoin de l'identifiant de chaque fiche : c'est l'identifiant LEI de la fiche, que le site reçoit déjà avec ses données. Il peut contenir des lettres et des tirets (par exemple un UUID), sans point-virgule, dans la limite de 50 caractères. Les exemples de ce guide utilisent 12345.

Étape 1 Inclure le script

Ajoutez cette ligne dans le gabarit commun du site, de préférence dans <head> :

<script src="https://leiscope.io/leitraking.min.js" defer></script>

• Incluez-le sur toutes les pages qui affichent des fiches, ou plus simplement sur tout le site.
• defer charge le script sans retarder l'affichage de la page. N'utilisez pas async : le script pourrait alors se charger après l'appel de pitTrackView (étape 4), et la vue ne serait pas comptée.
• Si le script est inclus deux fois, il ne compte pas les clics en double.
• Il fonctionne dans les navigateurs actuels (Chrome, Edge, Firefox, Safari, sur ordinateur et sur mobile). Internet Explorer n'est pas pris en charge.

Étape 2 Indiquer le SIT

Le script doit savoir à quel SIT appartient chaque fiche. Posez l'attribut data-pit-sit sur un élément qui contient les fiches, le plus simple étant <body> :

<body data-pit-sit="mon-sit">

Si le site est une marque blanche, ajoutez son identifiant avec data-pit-mb :

<body data-pit-sit="mon-sit" data-pit-mb="mb-01">

Le script lit ces attributs sur l'élément cliqué ou, à défaut, sur le plus proche de ses parents qui les porte. Vous pouvez donc les poser sur <body>, sur le bloc d'une fiche ou sur l'élément cliquable lui-même.

Langue

Les statistiques sont aussi ventilées par langue. Le script prend la langue déclarée par la page dans l'attribut lang de <html>, que la plupart des sites renseignent déjà :

<html lang="fr">

Si une fiche est affichée dans une autre langue que la page, indiquez-la avec data-pit-lang. Comme data-pit-sit, l'attribut se lit sur l'élément cliqué ou sur le plus proche de ses parents qui le porte :

<article class="fiche" data-pit-sit="mon-sit" data-pit-lang="de">

Seules les deux premières lettres comptent : fr-FR et fr donnent la même langue.

Étape 3 Marquer les éléments cliquables

Ajoutez sur chaque élément cliquable d'une fiche l'attribut qui correspond au type de clic. Sa valeur est l'identifiant de la fiche.

Exemple d'un bloc de fiche complet :

<article class="fiche" data-pit-sit="mon-sit">
  <h2>Hôtel du Marché</h2>
  <a href="https://www.exemple.fr" target="_blank" data-pit-track-url="12345">Site web</a>
  <a href="mailto:contact@exemple.fr" data-pit-track-email="12345">Envoyer un email</a>
  <a href="tel:+33388000000" data-pit-track-tel="12345">03 88 00 00 00</a>
  <a href="/documents/brochure-12345.pdf" data-pit-track-doc="12345">Brochure (PDF)</a>
  <a href="/traces/12345.gpx" download data-pit-track-gpx="12345">Tracé GPX</a>
  <a href="/traces/12345.kml" download data-pit-track-kml="12345">Tracé KML</a>
  <a href="https://reservation.exemple.fr/12345" data-pit-track-reservation="12345">Réserver</a>
</article>

Règles à respecter :

• Un seul attribut data-pit-track-* par élément.
• Posez l'attribut sur le lien ou le bouton, pas sur la carte entière de la fiche : tout clic dans la carte serait alors compté.
• Un clic sur un élément contenu dans l'élément marqué, par exemple une icône ou un <span> dans le lien, est bien compté.
• L'élément n'a pas besoin d'être un lien : un <button> qui affiche le numéro de téléphone, par exemple, peut porter data-pit-track-tel.
• Les éléments ajoutés après le chargement de la page (chargement AJAX, carrousel, bouton « voir plus ») sont suivis sans rien faire de plus.
• Sont comptés : le clic, le clic avec Ctrl ou Cmd, le clic molette (ouverture dans un nouvel onglet), la validation au clavier et le toucher sur mobile. L'ouverture par le menu contextuel (clic droit, « Ouvrir dans un nouvel onglet ») n'est pas comptée.

Étape 4 Compter les vues de fiches

L'affichage d'une fiche n'a pas d'attribut : la page de détail d'une fiche appelle la fonction pitTrackView.

<script src="https://leiscope.io/leitraking.min.js" defer></script>
<script>
  document.addEventListener('DOMContentLoaded', function () {
    if (window.pitTrackView) {
      pitTrackView('12345', 'mon-sit', 'fr');
    }
  });
</script>

• DOMContentLoaded attend que le script, chargé avec defer, soit prêt.
• Le test if (window.pitTrackView) évite une erreur JavaScript si le script est bloqué, par un bloqueur de publicité par exemple.
• Appelez pitTrackView une fois par affichage de la page de détail, et non pour chaque fiche d'une liste de résultats.

Paramètres, dans l'ordre :

Pour omettre un paramètre suivi d'un autre, passez une chaîne vide : pitTrackView('12345', '', 'fr').

Si l'identifiant est inséré par votre CMS ou votre langage serveur, écrivez-le comme une chaîne JavaScript échappée, par exemple en PHP :

pitTrackView(<?= json_encode($fiche->id) ?>, 'mon-sit', 'fr');

Cas particuliers

Plusieurs SIT sur le même site

Un site peut afficher des fiches de plusieurs SIT. Posez alors data-pit-sit sur le bloc de chaque fiche plutôt que sur <body> : chaque clic est envoyé au SIT de sa fiche. Si plusieurs éléments parents portent l'attribut, le plus proche de l'élément cliqué l'emporte.

<article data-pit-sit="sit-a">
  <a href="tel:+33388000000" data-pit-track-tel="12345">03 88 00 00 00</a>
</article>
<article data-pit-sit="sit-b">
  <a href="tel:+33383000000" data-pit-track-tel="67890">03 83 00 00 00</a>
</article>

Sur une page qui contient plusieurs SIT, pitTrackView doit recevoir le SIT en deuxième paramètre. Sans lui, la vue n'est pas comptée.

Sites monopage (React, Vue, Angular…)

• Incluez le script une seule fois, dans la page d'entrée (index.html).
• Les clics sont suivis automatiquement, y compris sur les composants affichés après coup.
• Appelez pitTrackView à chaque affichage d'une fiche, c'est-à-dire à chaque navigation vers une page de fiche, et non à chaque nouveau rendu du composant :

// Après l'affichage d'une fiche, par exemple au changement de route
if (window.pitTrackView) {
  window.pitTrackView(fiche.id, 'mon-sit', langue);
}

En développement, le mode strict de React exécute les effets deux fois : vérifiez le comptage des vues sur la version de production.

CMS et Google Tag Manager

• Dans un CMS (WordPress, Drupal, Joomla…), ajoutez le script dans le thème ou par l'outil d'insertion de code du CMS, et posez les attributs dans les gabarits qui affichent les fiches.
• Avec Google Tag Manager, le script peut être chargé par une balise « HTML personnalisé » déclenchée sur toutes les pages. Les attributs restent à poser dans les gabarits du site : GTM ne les ajoute pas.
• Sur les pages de détail, préférez inclure le script directement dans la page : chargé par GTM, il peut arriver après l'appel de pitTrackView, et la vue ne serait pas comptée.

Politique de sécurité du contenu (CSP)

Si le site envoie un en-tête Content-Security-Policy, ajoutez à vos directives :

• https://leiscope.io dans script-src, pour charger le script ;
• https://leiscope.io dans connect-src, pour envoyer les clics et les vues, quel que soit le SIT.

Content-Security-Policy: script-src 'self' https://leiscope.io; connect-src 'self' https://leiscope.io

Le script en ligne qui appelle pitTrackView doit lui aussi être autorisé, par un nonce ou une empreinte, ou bien être placé dans un fichier JavaScript du site.

Envoyer un clic sans attribut

Si un élément ne peut pas être marqué, dans un widget tiers par exemple, le site peut envoyer le clic lui-même :

if (window.sendDataToServer) {
  sendDataToServer({ sitProductCode: '12345', sitName: 'mon-sit', idMB: 'mb-01', language: 'fr' }, 'click', 'reservation');
}

• Le premier paramètre décrit la fiche. sitProductCode et sitName sont obligatoires, idMB et language facultatifs.
• Le deuxième est le nom de l'événement, transmis pour information : gardez 'click'.
• Le troisième est le type de clic : url, email, tel, doc, gpx, kml ou reservation.

Données transmises et vie privée

• Le script ne dépose aucun cookie, n'utilise pas le stockage du navigateur et ne crée aucun identifiant d'internaute.
• À chaque clic ou vue, il envoie : le SIT, la marque blanche, l'identifiant de la fiche, le type de clic ou la vue, la langue, le domaine et l'adresse de la page (chemin, paramètres, ancre) et l'heure.
• Seuls des compteurs sont enregistrés : nombre de clics ou de vues par jour, par site, par fiche et par type. L'adresse de la page n'est pas enregistrée dans les statistiques.
• Comme pour toute requête web, l'adresse IP de l'internaute parvient au serveur de collecte. Elle n'est pas enregistrée dans les statistiques.

Ces informations permettent au responsable du site de compléter sa politique de confidentialité. La question d'un éventuel recueil du consentement relève de son analyse.

Vérifier l'intégration

Ouvrez les outils de développement du navigateur (touche F12).

1. Le script est chargé. Dans la console, tapez typeof pitTrackView : la réponse doit être "function".
2. Les clics partent. Dans l'onglet Réseau, cochez l'option qui conserve le journal d'une page à l'autre (« Conserver le journal » dans Chrome et Edge), car le clic peut quitter la page. Filtrez sur insert, puis cliquez sur un élément marqué : une requête POST vers …/insert apparaît, de type ping dans Chrome et Edge ou beacon dans Firefox, avec le statut 204.
3. Les vues partent. Rechargez une page de fiche : la même requête part au chargement.
4. Aucun avertissement. Quand un événement n'est pas envoyé, la console affiche un message qui commence par « LEI Analytics : ».

Dans les deux premiers messages, url est remplacé par le type concerné (tel, view…).

Statut de la requête …/insert :

Liste de contrôle avant mise en ligne

• Le script https://leiscope.io/leitraking.min.js est inclus avec defer sur toutes les pages qui affichent des fiches, sans copie locale.
• data-pit-sit porte la valeur fournie par le SIT, sur <body> ou sur chaque bloc de fiche.
• data-pit-mb est renseigné si le site est une marque blanche.
• La page déclare sa langue (<html lang="fr">), et data-pit-lang indique celle des fiches affichées dans une autre langue.
• Chaque lien de site web, email, téléphone, documentation, GPX, KML et réservation porte son attribut data-pit-track-* avec l'identifiant de la fiche.
• Les pages de détail appellent pitTrackView une fois par affichage.
• La CSP, s'il y en a une, autorise https://leiscope.io dans script-src et connect-src.
• Les tests dans l'onglet Réseau donnent 204, sans message « LEI Analytics : » dans la console.

Référence rapide

<!-- Script, une fois par page -->
<script src="https://leiscope.io/leitraking.min.js" defer></script>

<!-- Langue de la page -->
<html lang="fr">

<!-- SIT, marque blanche et, si elle diffère de la page, langue de la fiche (data-pit-lang),
     sur l'élément cliqué ou un de ses parents -->
<body data-pit-sit="mon-sit" data-pit-mb="mb-01">

<!-- Clic : data-pit-track-<type>="<identifiant de la fiche>" -->
<!-- type : url, email, tel, doc, gpx, kml ou reservation -->
<a href="tel:+33388000000" data-pit-track-tel="12345">03 88 00 00 00</a>

// Vue de fiche ; sit, langue et marque blanche sont facultatifs
pitTrackView(idFiche, sit, langue, idMarqueBlanche);

// Clic envoyé à la main
sendDataToServer({ sitProductCode, sitName, idMB, language }, 'click', type);

Les noms des attributs et des fonctions décrits ici restent stables : les mises à jour du script ne demandent pas de modifier les sites déjà intégrés.

Besoin d'aide ?

Contactez votre SIT en précisant l'adresse de la page, le navigateur utilisé et, s'il y en a un, le message affiché dans la console.