Avec Google Analytics 4, vous pouvez suivre les actions de vos clients lors de la prise de rendez-vous en ligne, en analysant la fréquence des réservations, conclues ou abandonnées et ce à chaque étapes.

L'article suivant vous permettra d'activer Google Analytics 4 (GA4) et de configurer le booking widget avec votre Google Tag ID.

Prérequis

Avant de commencer, assurez-vous d'avoir les éléments suivants :

Un compte Google valide.
Votre compte Google est connecté à Google Analytics.
Un Google Tag ID (c'est-à-dire ID de mesure)

Si vous n'avez pas de compte Google, veuillez consulter cet article. Une fois votre compte créé, veuillez suivre les instructions suivantes afin de vous connecter a Google Analytics, créer votre propriété Google Analytics 4 ainsi qu'un flux de données. Par la suite, veuillez suivre les instructions suivantes afin de localiser votre Google Tag ID "G-XXXXXXX" et en prendre note.

Configurer Google Analytics 4 avec Booxi

Booking widget v2

Lorsque vous incluez « booknow.js », n'oubliez pas de sélectionner l'URL en fonction de votre région d'hébergement.

Amérique du nord	Europe
www.booxi.com	www.booxi.eu

Tout d'abord, assurez-vous que le script suivant a été inclus dans la balise <head> de votre page web. Veillez à spécifier l'ID de la balise Google « G-XXXXXXXX ».

<head>
    <script src="https://www.booxi.com/api/booknow.js" async=""></script>
    <script src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
</head>

Ensuite, ajoutez le code ci-dessous dans le tag <body> du code de votre widget. N'oubliez pas d'ajouter votre clé API.

<body>
   <script>
      window.dataLayer = window.dataLayer || [];
      function gtag() { window.dataLayer.push(arguments); }
      gtag('js', new Date());
      gtag('config', "G-XXXXXXXX");

      var bnHandler = null;
      window.bxApiInit = function () {
        bnHandler = booxiController.configure({
          apiKey: "YOUR_API_KEY_HERE",
          googleTag: gtag
        });
      };
  </script>
</body>

Booking widget v3

Tout d'abord, assurez-vous que le script suivant a été inclus dans le tag <head> de votre page web. Veillez à spécifier l'ID de la balise Google « G-XXXXXXXX ».

<head>
<script src="https://www.booxi.com/booknow/booknow.js"></script>
<script async src="https://www.googletagmanager.com/gtag/js?id="G-XXXXXX
X"></script>
</head>

Ensuite, ajoutez le code ci-dessous dans le tag <body> du code de votre widget. N'oubliez pas d'ajouter votre clé API.

<body>
<script type="text/javascript">

// Google Tag Manager boilerplate.
window.dataLayer = window.dataLayer || [];
function gtag() {dataLayer.push(arguments); }
gtag('js', new Date());

// Configure Google Analytics property. Remember to use your own measurement ID
gtag('config', "G-XXXXXXX");

// Assign your GA property and open the widget when a button is pressed
<button onclick="BookNow.open({apiKey: 'YOUR_API_KEY_HERE',
                                googleTag: gtag,
                                googleTagEventFormat: 'GA4'})">
Book Now</button>;

</script>
</body>

Qu’est ce que Booxi envoie à Google Analytics?

Booxi envoie de manière automatisée tout événement lié aux actions de vos usagers. Veuillez prendre note que Booxi n'envoie aucune information personnelle ou privée au cours de ce processus. La confidentialité de vos usagers est préservée a tout moment.

Les données envoyées a Google Analytics sont formatées selon le modèle suivant:

Nom de l'événement (event name) :
- Paramètre 1 : valeur
- Paramètre 2 : valeur

Par conséquent, chaque action usager se verra assignée les 2 paramètres suivants:

Evénement généré par un usager :
- book_now_event_label - contient la valeur de la sélection faite par l'usager.
- booxi_app : “Book Now” - Invariable, peut etre utilisée pour filtrer les résultats.

Chaque valeur associée a "book_now_event_label" comportera un préfix correspondant au pays du marchant, par exemple CA pour le Canada. Cet préfix sera utile aux marchants ayant une présence internationale.

Voici un exemple demontrant comment la sélection d'une catégorie sera envoyée a GA4:

book_now_select_category
- book_now_event_label : “CA Massage”
- booxi_app : “Book Now”

Voici la liste de tous les événements envoyés par le booking widget et leur valeurs associées.

Event	Description and value returned in “book_now_label_event”
book_now_opened	Ouverture du booking widget. “Book Now Widget”
book_now_select_category	Nom de la catégorie sélectionnée.
book_now_select_service	Nom du service sélectionné.
book_now_select_staff	Nom du personnel sélectionné si et seulement si la configuration du service requiert la selection du personnel.
book_now_select_date	Sélection d'une date. “Open booking” (disponibilité client) “Calendar date” (date spécifique)
book_now_select_time	Sélection d'une plage horaire. “Time interval” (8:00 - 9:00)
book_now_user_form_submit	Capture des données clients “User Info Submit” (nom, prénom, etc…)
book_now_booking_requested	Indique une requête de confirmation. “New appointment” (confirmation requise)
book_now_booking_complete	Indique qu'une réservation a été soumise. “New appointment”
book_now_send_rental_request	Indique une nouvelle requête de location. “New Rental event”
book_now_select_rental_resource	Nom de ressource, applicable uniquement aux locations.
book_now_booking_request_fail	Une erreur s'est produite durant le processus de réservation.
book_now_form_validation_error	Une erreur s'est produite lors de la validation des données client. “User Info Submit” (numéro de téléphone invalide, etc...).
book_now_close_book_now	Le booking widget s'est fermé. “Booking Canceled” lorsque la fenêtre a été fermée. “Booking Complete” lorsque la réservation est complétee.

Comment accéder aux données à partir de Google Analytics

Pour visualiser les événements capturés en temps réel, à partir de Google Analytics, choisissez l'option "Reports > Realtime". Pour en savoir plus à propos des rapports en temps réel, veuillez consulter cet article.

Les événements envoyés depuis le booking widget sont des événements personnalisés. Conséquemment, vous devrez créer une dimension personnalisée afin de générer des rapports détaillés. Veuillez consulter cet article afin d'en apprendre plus à propos des dimensions personnalisées.