Remarque : si vous avez intégré l’iFrame de réservation en ligne à votre site web et ajouté des liens de redirection, veuillez noter que ces liens seront intégrés de la même façon : ils ne s’ouvriront pas dans un nouvel onglet.
Dans cet article :
Intégrer l’iFrame de réservation en ligne Semble aux données analytiques de votre site
Intégrer Google Analytics 4 (GA4) à Semble
Considérations supplémentaires
Intégrer l’iFrame de réservation en ligne Semble aux données analytiques de votre site
Intégrer l’iFrame Semble aux données analytiques de votre site permet de suivre facilement vos réservations en ligne et de bénéficier d’un meilleur éclairage sur cette activité.
Grâce à cette intégration, vous saisissez les événements importants, comme la sélection d’un créneau ou la finalisation d’une prise de rendez-vous et vous vous assurez que votre plateforme d’analyse de données reçoit des mises à jour en temps réel.
1. Démarrer simplement avec un HTML : créez un fichier HTML de base et nommez-le index.html.
2. Obtenir le lien iFrame : accédez à votre compte Semble et récupérez le lien iFrame pour votre configuration de réservation en ligne.
3. Mettre à jour les balises body : remplacez le contenu des balises body dans votre fichier index.html par le lien iFrame fourni par Semble.
Exemple :
<body>
<h1>Semble iFrame</h1>
<iframe
src="https://online-booking.semble.io/?token=TOKEN"
width="100%"
height="800"
frameborder="0"
scrolling="auto"
allow="payment *">
</iframe>
</body>
4. Tester dans le navigateur : ouvrez le fichier dans votre navigateur préféré. Vous devriez voir la page de réservation intégrée.
5. Insérer le JavaScript : insérez le code JavaScript dans la section <head> de votre fichier index.html.
Exemple :
<script>
window.addEventListener("message",(event) => {
if (event.origin!=="https://online-booking.semble.io") {
return;
} else {
const {data} = event;
if (!data.bookingStatus) return;
switch (data.bookingStatus) {
case 'selecting':
console.log('The widget has loaded but the user has not yet made a selection');
return;
case 'selected':
console.log('The user selected a slot');
console.log(`Duration of selected slot is ${data.bookingDuration}`);
console.log(`Time of selected slot ${data.bookingStart}`);
console.log(`Location of selected slot ${data.location}`);
console.log(`Practitioner of selected slot ${data.practitioner}`);
console.log(`Product name of selected slot ${data.productName}`);
console.log(`Product price name of selected slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
case 'booked':
console.log('The user booked a slot');
console.log(`Duration of booked slot is ${data.bookingDuration}`);
console.log(`Time of booked slot ${data.bookingStart}`);
console.log(`Location of booked slot ${data.location}`);
console.log(`Practitioner of booked slot ${data.practitioner}`);
console.log(`Product name of booked slot ${data.productName}`);
console.log(`Product price name of booked slot ${data.productPrice}`);
//you can send these details to any analytics tool of your choice here
return;
default:
console.log('Unsupported')
}
}
})
</script>
6. Rafraichir la page : actualisez le fichier dans votre navigateur et vous devriez voir apparaitre une ligne de log dans la console dès le chargement de la page.
7. Sélectionner un créneau : choisissez un créneau et vous devriez voir apparaitre une nouvelle série de lignes de log dans la console.
8. Prendre rendez-vous : finalisez la réservation et vérifiez que vous voyez bien apparaitre une dernière série de lignes de log dans la console.
Remarques :
- il est nécessaire de savoir envoyer manuellement des événements à votre plateforme d’analyse pour transférer les événements Semble.
- il est possible de combiner les données d’événements de Semble avec vos propres données de suivi, telles que les identifiants patients.
- il est plus facile de travailler avec une configuration de réservation en ligne Semble qui ne redirige pas l’utilisateur vers une nouvelle page, mais ce n’est pas une obligation.
Intégrer Google Analytics 4 (GA4) à Semble
L’intégration de GA4 avec le widget de réservation en ligne Semble vous permet de suivre des événements spécifiques liés aux réservations, comme lorsqu’un utilisateur sélectionne un créneau ou finalise une prise de rendez-vous.
Ces données peuvent être précieuses pour comprendre le comportement des utilisateurs, optimiser votre processus de réservation et mesurer l’efficacité de vos efforts.
Étape 1 : intégrer l’iFrame de réservation en ligne Semble :
Assurez-vous d’avoir bien intégré l’iFrame de réservation en ligne Semble sur votre site web. Si ce n’est pas encore fait, suivez les étapes ci-dessous :
- Créer un fichier HTML : il peut s’agir d’une page existante ou d’une nouvelle page sur laquelle vous souhaitez intégrer le widget de réservation.
- Ajouter le code iFrame : remplacez TOKEN par votre token unique de réservation en ligne Semble.
<iframe src="https://online-booking.semble.io/?token=TOKEN" width="100%" height="800" frameborder="0" scrolling="auto" allow="payment *"></iframe>
- Prévisualiser : ouvrez ce fichier dans votre navigateur pour vous assurer que le widget de réservation s’affiche correctement.
Étape 2 (optionnelle) : intégrer Google Analytics 4 (GA4) à votre site
Si vous avez déjà configuré GA4, passez à l’étape 3.
Si vous n’avez pas encore configuré GA4, voici les étapes à suivre :
- Insérer le script GA4 : placez le code suivant dans la section <head> de votre HTML, en remplaçant GA_MEASUREMENT_ID par votre ID de mesure GA4.
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
- Configurer Google Tag Manager (optionnel) : si vous utilisez Google Tag Manager, assurez-vous qu’il est correctement configuré sur votre site. Insérez l’extrait de code suivant, en remplaçant TAG_ID_HERE par votre ID Tag Manager.
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','TAG_ID_HERE');</script>
Étape 3 : saisir les événements du widget de réservation en ligne Semble
Vous allez maintenant capter les événements de réservation du widget Semble et les envoyer à GA4 comme des événements personnalisés.
- Ajouter le script suivant : placez ce script dans la section <head> de votre fichier HTML pour guetter les événements de réservation et les transmettre à GA4.
<script>
window.addEventListener("message", (event) => {
if (event.origin !== "https://online-booking.semble.io") { return; }
else {
const { data } = event;
if (!data.bookingStatus) return;
switch (data.bookingStatus) {
case 'selected':
gtag('event', 'booking_selected', {
'event_category': 'booking',
'event_label': data.productName,
'value': data.productPrice
});
break;
case 'booked':
gtag('event', 'booking_booked', {
'event_category': 'booking',
'event_label': data.productName,
'value': data.productPrice,
'location': data.location,
'practitioner': data.practitioner,
'duration': data.bookingDuration
});
break;
default:
console.log('Unsupported booking status');
}
}
});
</script>
- Tester votre configuration
1. Ouvrez votre page web avec l’iFrame Semble intégrée.
2. Ouvrez la console de développement du navigateur (F12 ou clic droit > Inspecter > Console).
3. Interagissez avec le widget de réservation (sélectionnez un créneau ou finalisez une prise de rendez-vous).
4. Vous devriez voir des lignes de log dans la console lorsqu’un événement comme « booking_selected » ou « booking_booked » se produit.
Étape 4 : marquer les événements personnalisés comme conversions dans GA4
- Accédez à votre console GA4 et accédez à la section Événements.
- Trouvez l’événement « booking_booked » dans la liste.
- Activez le bouton à côté de « booking_booked » pour le marquer comme une conversion.
Pour des instructions plus détaillées, consultez la documentation officielle de Google.
Considérations supplémentaires
Limites du suivi des méthodes de paiement basées sur la redirection
Si un patient sélectionne Klarna comme méthode de paiement lors de la réservation, le processus de paiement déclenchera une redirection de page complète (en dehors de l’iFrame). Cela signifie que le suivi d’événements basé sur l’iFrame standard ne captera pas la confirmation finale de réservation.
Que faire ?
- Configurez une page « réservation prise en compte » personnalisée et mesurez les visites de cette page pour suivre les réservations finalisées à la place.
Cela permet la prise en charge des services de paiement tiers qui nécessitent une redirection.
- Événements personnalisés : chaque événement de réservation inclura des données telles que le nom de l’acte, le prix, le lieu et le praticien. Ces informations sont essentielles pour une analyse détaillée et peuvent être liées à d’autres données de suivi GA4.
- Google Tag Manager : si vous utilisez Google Tag Manager, vous pouvez créer des déclencheurs basés sur ces événements personnalisés pour déclencher des balises et suivre des actions spécifiques.
- Intégration données analytiques : cette intégration fonctionne bien quelle que soit votre configuration analytique existante et vous permet de combiner les données Semble avec d’autres données patient pour affiner vos analyses.
Pour découvrir un exemple complet et des options de personnalisation supplémentaires, dont le suivi des conversions et l’intégration avec Google Ads, consultez cet extrait de code Bitbucket.