Votre moteur de réservation est une page Internet, et cet écran vous permet d' accéder à son code source. Vous pouvez ajouter des balises méta dans l'en-tête, exécuter un script lorsqu'une réservation est finalisée, insérer une bannière au-dessus de la liste des chambres, remplacer le pied de page et connecter les trois produits de suivi que la plupart des hôtels utilisent déjà sur leur site principal . Ce que vous collez ici s'affiche pour les clients exactement tel quel.
À qui s’adresse cet écran ?
C’est la seule partie de Prostay qui suppose que vous sachiez écrire du code HTML. Rien ici n’est validé, rien n’est testé en environnement isolé, et il n’y a pas d’aperçu : le contenu de chaque champ est injecté dans la page en ligne destinée aux clients dès que vous enregistrez. Une guillemet de fermeture manquante dans une balise meta rendra invalides les balises qui suivent, et un script qui génère une exception au chargement peut empêcher l’affichage de la page. Si cette phrase vous inquiète, confiez cet écran à la personne chargée de la maintenance de votre site web et utilisez plutôt l’assistant de style , qui ne peut rien endommager.
Où se trouve le code
Tout se trouve dans la deuxième carte sur Booking Engine › Customizations , sous l’assistant de style.Custom Codes contient les sept emplacements que vous remplissez vous-même.Google Analytics et Facebook Pixel acceptent des identifiants plutôt que des extraits de code : vous fournissez à Prostay l’identifiant de mesure et il génère la balise pour vous.
Le bouton radio situé en haut de l’onglet « Codes personnalisés », qui vous demande si vous souhaitez afficher les photos de votre Établissement, est un paramètre de mise en page qui se trouve ici par hasard. Il est abordé dans la section consacrée à la personnalisation de l’apparence de votre Moteur de réservation .
Le bouton et le lien « Modifier »
Chaque emplacement fonctionne de la même manière. Le bouton active ou désactive l’emplacement ; le lien « Edit » ouvre un panneau latéral contenant ce qui y est actuellement enregistré. Les deux éléments sont indépendants, et c’est la chose la plus utile à savoir concernant cet écran : le contenu enregistré lorsque le bouton est désactivé n’a absolument aucun effet . Vous pouvez conserver le tag de campagne de la saison dernière dans la zone de texte, prêt à être réactivé, et il restera inactif jusqu’à ce que vous le fassiez.
Le panneau est une zone de texte simple. Il n’indentera pas votre code, ne vous signalera pas qu’une balise n’est pas fermée et ne vous avertira pas que vous avez collé un script dans un emplacement destiné aux balises méta. La commande «Save» dans le panneau recopie le texte à l’écran ; elle ne l’enregistre pas sur le serveur. Rien sur cet écran n’est visible par un visiteur tant que vous n’avez pas cliqué sur « Save » (Publier) sur la page elle-même.
Fonctionnalités des sept emplacements
| Emplacement | Où il s’affiche et quand il s’exécute |
|---|---|
| Custom Meta Tags | Inséré dans l’en-tête de chaque page du Moteur de réservation : la liste des chambres, les options supplémentaires, le paiement et la confirmation. Destiné à <meta> et <link> balises. Utilisez-le pour une description, une URL canonique, des balises Open Graph et la vérification du site. |
| Custom Meta Tags (Confirmation page Only) | Idem, mais uniquement sur la page à laquelle un client accède après avoir effectué sa réservation. Utilisez-le pour empêcher la page de confirmation d’apparaître dans les résultats de recherche à l’aide d’une noindex balise, ce qui vaut la peine d’être fait, que vous ajoutiez ou non d’autres éléments. |
| JavaScript Code (Confirmation page Only) | S'exécute une seule fois, sur la page de confirmation, une fois la réservation terminée. C'est là que doivent figurer les balises de conversion. Collez le bloc <script> bloc, et non le simple code JavaScript qu’il contient. |
| Custom header for your hotel booking page | Affiché sous forme de bannière en haut de la page de réservation, au-dessus de l’image d’en-tête. Il s’agit d’un balisage, ce qui permet d’appliquer un style <div> fonctionne. Idéal pour une promotion, un numéro de téléphone ou une notice concernant des travaux de construction. |
| Custom footer for your hotel booking page | Remplace la ligne par défaut « Prostay. All Rights Reserved. » au bas de chaque page du Moteur de réservation. Il s’agit également d’un balisage. C’est là que l’hôtel indique généralement son numéro d’enregistrement, son adresse et des liens vers ses propres conditions générales. |
| Embed Custom Code - With Custom Meta Tags | Un deuxième emplacement dans l’en-tête, inséré aux côtés des balises méta sur chaque page. La distinction est d’ordre organisationnel plutôt que fonctionnel : conservez les balises dans la zone dédiée aux balises et les scripts ici, afin que la désactivation de l’un n’entraîne pas la suppression de l’autre. |
| Customize the text that appears … if there is no availability | Ce n’est pas du code. Il s’agit de texte brut, affiché à un client dont la recherche n’a donné aucun résultat. |
Les balises méta en pratique
Le moteur génère déjà un <title> à partir du nom de votre établissement
et une description issue de la fiche de votre établissement. En ajoutant votre propre
balise de description, vous en proposez deux, et les moteurs de recherche en choisiront une. Si vous souhaitez
contrôler la description, rédigez-la ici et acceptez de devoir désormais
la mettre à jour à deux endroits.
Les balises qu’il vaut la peine d’ajouter sont celles que Prostay ne peut pas connaître : une URL canonique pointant vers l’adresse que vous souhaitez voir indexée, les balises Open Graph et Twitter afin qu’un lien vers votre page de réservation partagé sur les réseaux sociaux s’affiche avec votre photo plutôt qu’une fiche vide, ainsi que les balises de vérification que Google Search Console, Bing et Pinterest vous demandent de placer dans l’en-tête.
<meta name="description" content="Book direct at The Marlowe Hotel, Santa Monica. Best rate guaranteed.">
<link rel="canonical" href="https://www.marlowehotel.example/book">
<meta property="og:title" content="The Marlowe Hotel, Santa Monica">
<meta property="og:image" content="https://www.marlowehotel.example/og.jpg">
Une balise par ligne, chacune étant fermée. Il n’y a pas d’élément d’encadrement : ce que vous
écrivez est ce qui est inséré ; ne collez donc pas un élément <head>
élément entier ou un <html> document autour.
Les deux emplacements réservés à la confirmation
Une conversion correspond à une réservation finalisée, et la page de confirmation est la seule page qui prouve qu’une conversion a bien eu lieu. C’est pourquoi deux des sept emplacements lui sont réservés. Un code de suivi qui se déclenche ailleurs comptabilise les visiteurs qui ont navigué puis quitté le site, ce qui gonfle le nombre de conversions déclarées et, si vous enchérissez sur ce chiffre, entraîne des dépenses réelles.
Placez vos balises de conversion Google Ads, Bing, d’affiliation et de métarecherche dans JavaScript Code (Confirmation page Only) . La référence de la réservation, le type de chambre et le montant total figurent sur la page contenant votre script, mais ils ne lui sont pas transmis sous forme de variables : si votre balise a besoin de la valeur de la réservation, extrayez-la de la page ou demandez au fournisseur une version qui la fournit.
L’en-tête, le pied de page et le message « complet »
Trois de ces emplacements ne servent pas vraiment au suivi. La bannière d’en-tête et le pied de page sont destinés à communiquer un message au client, et tous deux acceptent le balisage : utilisez des styles en ligne plutôt qu’une feuille de style, car il n’y a nulle part où en placer une. Veillez à ce que l’en-tête soit concis. Il fait descendre votre photo principale plus bas sur la page, et sur un téléphone, une bannière de trois lignes peut occuper la majeure partie du premier écran.
Le texte « complet » est le seul champ de cet onglet qu’un responsable, plutôt qu’ un webmaster, devrait rédiger, et cela en vaut la peine. Un client qui recherche des dates pour lesquelles vous êtes complet est un client qui souhaitait séjourner chez vous. Le message par défaut lui indique qu’il n’y a rien de disponible ; une phrase comportant votre numéro de téléphone ou une suggestion d’essayer une nuit avant ou après ces dates permet de transformer certaines de ces recherches en réservations. Il s’agit de texte brut, donc un numéro de téléphone ne deviendra pas un lien cliquable.
Google Analytics et Google Ads
Cet onglet utilise des identifiants, et non des extraits de code. Prostay génère lui-même la balise, ce qui explique qu’il n’y ait rien à coller ni à mettre à jour lorsque Google modifie son chargeur.
| Champ | Que faut-il y indiquer ? |
|---|---|
| Google Analytics ID | Un identifiant de mesure GA4, sous la forme G-XXXXXXXXXX. Pour alimenter plusieurs établissements, séparez les identifiants par des virgules et Prostay configurera chacune d’entre elles. |
| Primary Domain | Le domaine sur lequel votre site web principal est hébergé. Définissez-le lorsque vous souhaitez que le parcours d’un visiteur depuis votre site web vers le Moteur de réservation soit comptabilisé comme une seule session plutôt que deux, ce qui garantit la fiabilité de votre rapport de référencement. |
| Google Adwords Conversion ID | L’identifiant au niveau du compte provenant de Google Ads, sous la forme AW-000000000. Prostay déclenche la conversion uniquement sur la page de confirmation. |
| Google Adwords Conversion Label | Le libellé de l’action de conversion spécifique que vous souhaitez voir prise en compte. Sans ce libellé, l’événement est tout de même déclenché, mais Ads ne peut pas déterminer à quelle action il correspond. |
Le pixel Facebook
Un seul champ, et la remarque qui figure au-dessus est essentielle : il faut indiquer l’identifiant numérique, c’est-à-dire la longue suite de chiffres fournie par Meta Events Manager, et non le bloc de code JavaScript que Meta propose de copier. Si vous collez l’extrait de code, aucun pixel ne se chargera. Prostay insère le pixel standard et envoie une PageView depuis chaque page du Moteur de réservation.
Les champs « Analytics » du menu correspondent à ces mêmes champs
Le menu « Moteur de réservation » comporte sa propre entrée «Analytics», située sous «Customization». Cela ouvre un écran comportant les cinq mêmes champs que les deux onglets ci-dessus ; il lit et écrit le même enregistrement. Il n’y a donc rien que vous ne puissiez faire ici et rien ici qui ne sera écrasé. Quel que soit celui que vous ouvrez, vous modifiez un seul ensemble d’identifiants de suivi.
Deux points à retenir si vous vous retrouvez sur cette page. Elle ne vous donne aucune confirmation lorsque vous enregistrez ; veillez donc à actualiser la page et à vérifier les champs plutôt que de vous fier à l’ absence d’erreur. De plus, son bouton «Close» (Enregistrer les modifications) ne fait absolument rien ; quittez donc la page via le menu.
Vérifiez ce que vous avez collé
Enregistrez, puis ouvrez votre page de réservation et vérifiez-la plutôt que de faire des suppositions. Tout ce qui figure sur cet écran, à l’exception de l’en-tête, du pied de page et du message « complet », est invisible sur la page elle-même ; le seul moyen de confirmer que les données ont bien été transmises est donc de vérifier le code source.
- Ouvrez votre page de réservation et affichez la source, ou ouvrez les outils de développement du navigateur et examinez le
<head>. Tout ce que Prostay a inséré à partir de cet écran est marqué d’undata-prostay-injectedattribut, ce qui vous permet de le repérer rapidement. - Pour les balises méta, vérifiez que chacune d’entre elles constitue une balise distincte. Si vous voyez votre balisage à l’intérieur d’un seul attribut, cela signifie qu’un élément a été échappé et que les balises ne seront pas lues.
- Pour Analytics, ouvrez le rapport en temps réel et chargez votre page de réservation. Une visite devrait apparaître en quelques secondes.
- Pour les créneaux réservés à la confirmation, effectuez une réservation test. Il n’existe aucun moyen de charger la page de confirmation sans en effectuer une, ce qui est gênant, mais c’est également le seul test fiable pour une balise de conversion.
Les deux boutons «Save» de cet écran enregistrent toutes les données : l’ assistant de style ci-dessus, les sept champs de code, ainsi que les identifiants figurant sur les deux onglets de suivi. Passer d’un onglet à l’autre ne fait pas perdre ce que vous avez saisi sur les autres, vous pouvez donc configurer les trois onglets et enregistrer en une seule fois.