Kit d'immersion de la réservation au sein d'un site d'information
←
→
Transcription du contenu de la page
Si votre navigateur ne rend pas la page correctement, lisez s'il vous plaît le contenu de la page ci-dessous
Kit d’immersion de la réservation
au sein d’un site d’information
Documentation à destination des agences web
Alliance Réseaux 2019 – v07012019
1
©Alliance Réseaux 2019
TABLE DES MATIERES
1. Présentation ........................................................................................................................................................................................ 3
2. Exemple de parcours client en image .................................................................................................................................... 4
Etape 1 : recherche via le moteur du site d’information .......................................................................................................... 4
Etape 2 : affichage du Widget Direct dans la fiche de détail.................................................................................................. 5
Etape 3 : ajout au panier ....................................................................................................................................................................... 6
Etape 4 : conversion de la vente avec le tunnel de réservation ............................................................................................ 7
3. Eléments à fournir............................................................................................................................................................................ 8
4. Contenu du kit ................................................................................................................................................................................... 9
A. Service d’interrogation des disponibilités temps réel (API DISPO) ............................................................................ 9
B. Widget de réservation (ou Widget Direct) ......................................................................................................................... 11
C. Widget Panier ................................................................................................................................................................................ 13
D. Tunnel de réservation................................................................................................................................................................. 16
5. Spécificités techniques ................................................................................................................................................................ 18
6. Documentations détaillées ........................................................................................................................................................ 18
2
©Alliance Réseaux 2019
1. Présentation
Le kit d’immersion constitue une solution complète d’intégration des données temps réel de réservation :
➢ Recherche de disponibilités Open System
➢ Réservation en ligne Open System
Ce kit est à destination de l’agence web en charge de la réalisation du site informatif de la destination.
La solution s'inscrit dans une logique d'apport de nouveaux services pour les utilisateurs du site informatif :
➢ Disponibilités temps réel des offres
➢ Immersion de la réservation en ligne au sein du site d’information pour les internautes
Ce kit technique comprend tous les outils nécessaires pour que l’agence web en charge de la réalisation du site
informatif puisse enrichir le niveau de service proposé aux internautes et proposer une expérience de réservation
optimale. Grâce à l'intégration du kit dans le site informatif, l’internaute trouvera ses modules de réservation au
cœur de son parcours de consultation.
3
©Alliance Réseaux 2019
2. Exemple de parcours client en image
Etape 1 : recherche via le moteur du site d’information
Recherche depuis le moteur en page d’accueil du site puis
affichage des résultats disponibles aux dates sélectionnées après appel de l’API DISPO :
4
©Alliance Réseaux 2019
Etape 2 : affichage du Widget Direct dans la fiche de détail
Après avoir cliqué sur un des résultats de la recherche, l’internaute est redirigé vers la fiche de détail sur laquelle
on retrouve le Widget Direct. Le widget est paramétré automatiquement avec les données renseignées par l’inter-
naute lors sa précédente recherche de dispo sur le site.
Le contenu du module de réservation affiché à l’internaute peut différer d’un produit à un autre. C’est le Widget
Direct qui gère les spécificités sans intervention de l’agence web.
5
©Alliance Réseaux 2019
Etape 3 : ajout au panier
Au clic sur le bouton “Réserver” du Widget Direct, on propose le choix des options (si existantes).
On affiche ensuite un message de confirmation d’ajout au panier.
Une brique de « suggestion de produit » peut être paramétrée à cette étape.
6
©Alliance Réseaux 2019
Etape 4 : conversion de la vente avec le tunnel de réservation
Si l’internaute clique sur « passer ma commande » ou s’il valide son panier, il est alors redirigé vers le tunnel de
réservation et passe par ces 3 étapes :
1. Saisie de ses coordonnées
2. Page de récapitulatif avant paiement / ou confirmation de pré-réservation
3. Page de paiement
7
©Alliance Réseaux 2019
3. Eléments à fournir
En vue de la préparation des différents éléments personnalisés côté Alliance Réseaux, l’agence web doit nous
communiquer dès le début du projet :
➢ Si le site est en cours de refonte : un accès à l’environnement de préproduction / ou le cas échéant les
maquettes psd + nom des typos utilisées. Si les typos ne sont pas des fonts Google, merci de nous joindre
les fichiers de polices.
➢ Le(s) sous-domaine(s) de réservation qui ont été choisis pour le tunnel de réservation
ex : https://reservation.mondomaine.com / https://booking.mondomaine.com
➢ Le code de tracking Google Analytics (code UA) qui permettra la remontée du suivi statistique des pages
de réservation
➢ 3 URLs d’inclusions contenant le header, footer et head du site informatif que nous appellerons dans notre
tunnel de réservation (voir point 4.D de cette documentation pour plus d’infos)
En retour, Alliance Réseaux fournira les éléments suivants :
➢ Login et mot de passe d’accès à l’API DISPO
➢ Les références IdPanier et idIntegration à utiliser pour l’instanciation de nos widgets
➢ Nom de domaine technique « for-system » pour la création du CNAME sur le sous-domaine de réservation
➢ Page de visualisation des Widgets Directs et Panier personnalisés (contenu HTML)
8
©Alliance Réseaux 2019
4. Contenu du kit
Dans le cadre d’un projet d’immersion et pour permettre la réservation de produits (hébergements, activités, bil-
letterie, location de matériel, séjours, forfaits, etc…), Alliance Réseaux fournit plusieurs modules qui permettent
d’assurer la bonne intégration dans votre site d’information.
Pour assurer une intégration optimale, nous personnalisons le Widget Panier, les Widgets Directs et le tunnel selon
la charte graphique du site informatif. Si le site est en cours de refonte, merci de nous remettre un accès au site
en préproduction (ou maquettes psd) afin que la personnalisation des widgets soit réalisée sur la base de la nou-
velle charte graphique.
A. Service d’interrogation des disponibilités temps réel (API DISPO)
L’API DISPO permet d'interroger les disponibilités temps réel depuis le site d’information.
Grâce à ce service, l’agence web peut rajouter des critères de recherche de dates de disponibilité aux moteurs de
recherche informatifs existants sur le site d’information.
Note : L’API d’interrogation des disponibilités peut renvoyer une réponse soit en XML soit en JSON. Pour l’interro-
ger, il est nécessaire de disposer du login et mot de passe fourni par le chef de projet en charge du dossier chez
Alliance Réseaux. Lors des appels, vous passez les critères de recherche ainsi que la liste des Codes UI pour lesquels
vous souhaitez faire la recherche.
Attention, l’utilisation de ce service implique la mise en place d’un système de pagination. Le nombre maximal de
réponse par page est de 50.
Exemple d’appel :
2018-12-24
7
2
3,8
9
©Alliance Réseaux 2019Exemple de réponse :
e2091865-dd9c-47a1-8d78-0df4c164bf7b
0
Vous pouvez filtrer les hébergements disponibles dans vos listes de résultats. Nous préconisons de mettre en avant
les hébergements réservables en ligne à l’aide d’un bandeau de couleur intégré aux vignettes produits de la liste
de résultats et de remonter ces résultats en début de liste lors des recherches datées.
Nous fournissons une interface permettant de tester facilement le service : http://service-api-visu.open-system.fr
Retrouvez la documentation complète de l’API DISPO : http://documentation.open-system.fr/api/apidispo/Allian-
ceReseaux_OpenSystem_WSAvail.pdf
10
©Alliance Réseaux 2019B. Widget de réservation (ou Widget Direct)
Le Widget Direct permet d’afficher un moteur de recherche des disponibilités d’un fournisseur ou d’un produit
pour un date, une durée et une capacité donnée. Ce moteur va interroger en temps réel les disponibilités de celui-
ci, afficher ses résultats et permettre l’ajout au panier.
Exemple d’instanciation simple d’un Widget Direct :
( function() {
var widgetProduit = AllianceReseaux.Widget.Instance( "Produit", { idPanier:"YYYYYY", idIntegration:XXXX,
langue:"fr", ui:"OSMB-00000" } );
widgetProduit.Initialise();
})();
- idPanier : YYYYYY est à remplacer par l’ID Panier fourni par Alliance Réseaux (différent pour chaque pro-
jet) ;
- idintegration : XXXX est à remplacer par l’ID Intégration fourni par Alliance Réseaux (différent pour
chaque projet) ;
- ui : Code UI du fournisseur ou du produit à récupérer dans le SIT (système d’information touristique) ou
directement dans le flux de métadonnées pour les utilisateurs Apidae.
Structure de code UI fournisseur : METIER-FOURNISSEUR (OSMB-00000)
Structure de code UI produit : METIER-FOURNISSEUR-PRODUIT (OSMB-00000-1)
ATTENTION : l’appel du fichier “noyau-1.0.min.js” n’est à faire qu’une seule fois dans une même page.
Préconisations :
1) Position du widget dans la page :
Nous conseillons de placer le widget le plus haut possible dans la fiche de détail afin qu’il soit bien visible et que
l’internaute n’ait pas à scroller pour le trouver. De préférence, on placera le widget dans une colonne large pour
permettre d’afficher la liste des produits et leurs disponibilités de manière convenable sur tous les supports.
A défaut, nous conseillons d’intégrer une ancre « Réservation » en haut de la page de détail pour faciliter l’accès.
ATTENTION : l’affichage du widget dans un overlay ou dans un onglet en jquery est déconseillé.
11
©Alliance Réseaux 20192) Interactions avec le widget :
L’agence peut intervenir sur le comportement du widget en passant des PreApp. Cela permet notamment à l’in-
ternaute de ne pas avoir à ressaisir les informations de recherche dans les Widgets Directs.
Pré-renseigner un widget avec des données :
➢ Date de début (attention format date anglaise)
widgetProduit.PreApp("dispo.debut", “2018-07-24”);
➢ Durée
widgetProduit.PreApp("dispo.duree", 7);
➢ Nombre d’adultes
widgetProduit.PreApp("dispo.nbAdultes", 2);
➢ Nombre et âge des enfants (âges des enfants séparés par une virgule)
widgetProduit.PreApp("dispo.enfants", [2,5]);
Lancer la recherche automatiquement aux dates pré-renseignées
widgetProduit.PreApp("dispo.recherche", 1);
Modifier le nombre d’enfants sélectionnables :
widgetProduit.PreApp("produit.hebe.nbEnfantsMax", 5 );
Documentation complète à retrouver à l’adresse :
http://documentation.open-system.fr/api/widgetdirect/AllianceReseaux_OpenSystem_WidgetDirect.pdf
12
©Alliance Réseaux 2019C. Widget Panier
Le Widget Panier permet de faire afficher un module de panier d’achat sur le site d’information.
Le Widget Panier permet à l'internaute acheteur de rester dans le site d’information lors de son ajout au panier et
de poursuivre sa navigation sur le site d’information avec un panier d'achat accessible en permanence dans l’en-
tête du site. À tout moment, l’internaute pourra valider son panier et basculer dans le tunnel de réservation pour
finaliser sa commande.
Note : Lorsque l’internaute ajoute une prestation réservable au panier depuis un Widget Direct, cette prestation
s’ajoute automatiquement au panier.
Exemple d’instanciation du Widget Panier :
( function() {
var widgetPanier = AllianceReseaux.Widget.Instance( "Panier", { idPanier:"YYYYYYY", idIntegration:XXXX, langue:"fr" } );
widgetPanier.Initialise();
})();
Préconisations d’intégration :
Il est important que le panier soit visible sur toutes les pages du site pour optimiser les transformations de com-
mande. Nous préconisons l’intégration du Widget Panier dans l’en-tête avec un pictogramme panier bien recon-
naissable. Il faut également veiller à ce qu’il soit bien visible dans tous les modes d’affichage et résolutions (res-
ponsive design). ATTENTION le panier ne peut être instancié qu’une seule fois par page. Si vous prévoyez de
basculer le panier dans un menu burger en format mobile, nous préconisons l’utilisation d’un script de déplace-
ment javascript que nous pouvons fournir sur demande.
Fonctionnalités supplémentaires :
➢ Afficher une brique de « cross-selling » dans la pop-in de confirmation d’ajout au panier
Le principe est de faire de la vente suggestive en proposant des produits complémentaires à l’internaute lorsqu’il
ajoute un produit au panier. On peut imaginer 2 modes de fonctionnement :
• Affichage d’une liste statique de liens vers d’autres rubriques du site d’information
• Affichage calculé en fonction du dernier produit ajouté et proposition de produits complémentaires
(ex : activités à proximité, forfaits de ski adaptés en fonction du lieu de l’hébergement, etc.)
13
©Alliance Réseaux 2019La fonctionnalité peut être décomposée en 2 étapes :
1) L’agence web récupère les informations du produit qui vient d’être ajouté au panier et identifie dans sa
base les produits à suggérer :
Lors de l'ajout d'un produit au panier, un événement est généré et il peut être intercepté pour :
• Récupérer le Code UI ajouté au panier
• Calculer ses propres règles d'affichage de contenu
( function() {
// Instanciation du Widget Direct
var widgetProduit = AllianceReseaux.Widget.Instance( "Produit", { idPanier:"XXXXXX", idIntegration:XXXX, langue:"fr", ui:"XXX-XXXX"} );
widgetProduit.Initialise();
// Récupération de l'instance Widget Panier pour accéder à l'événement d'affichage du pop-in panier
var widgetPanier = AllianceReseaux.InstancePanier( { id:"XXXXXX", idIntegration:XXXX, langue:"fr" } );
widgetPanier.Evt("panier.popIn.surAffichage", function(evt,data,opts) {
// data.domInclusion : cible du cross-selling
// data.ui : code UI du produit ajouté au panier
AllianceReseaux.jQuery( data.domInclusion ).append( "ICI INCLUSION DE CROSS SELLING, Code UI ajouté au panier:
"+data.ui+" ]" ).show();
} );
} )();
class="WidgetDirect">
14
©Alliance Réseaux 20192) L’agence transmet un contenu html à afficher dans la pop-in de confirmation d’ajout au panier
Pour cela, un PreApp doit être ajouté lors de l’instanciation du Widget Panier. Ce PreApp permet de communiquer
l’url du fichier web à afficher comme cross-selling au panier.
( function() {
var widgetPanier = AllianceReseaux.Widget.Instance( "Panier", { idPanier:"YYYYYYY", idIntegration:XXXX, langue:"fr" } );
widgetProduit.PreApp("inclusions.panierAjout.url.fr", "http://www.domaine.fr/crossselling.html" );
widgetPanier.Initialise();
})();
15
©Alliance Réseaux 2019D. Tunnel de réservation
Le tunnel de réservation (en cohérence graphique avec le site) prend le relais lors de la conversion de la commande
afin de guider le client jusqu’au paiement. Pour la création du tunnel, nous créons un domaine technique
nomdusite.for-system.com sur lequel nous hébergeons le tunnel de réservation.
Il est nécessaire de nous fournir 3 URL d’inclusions pour sa mise en place. Les inclusions dynamiques permettent
à l’agence web de garder la main sur le contenu de l’en-tête, du footer et du head présents dans le tunnel.
Ainsi l’internaute retrouvera toujours le même header (en-tête) et le même footer (pied de page) que sur le site.
L’appel des inclusions est mis à jour automatiquement de manière quotidienne.
Les inclusions doivent être composées de trois fichiers :
• Un fichier contenant les scripts de la balise head du site (appels des feuilles de styles ccs, des fichiers
javascript) ;
• Un fichier contenant le code HTML du header du site ;
• Un fichier contenant le code HTML du footer du site.
Ces fichiers sont hébergés sur votre site, il faudra donc nous fournir les 3 URL de ces fichiers. Il est conseillé de
donner un nom explicite à vos fichiers (ex : head.aspx, header.aspx et footer.aspx).
16
©Alliance Réseaux 2019Points techniques importants sur la construction des fichiers d’inclusion :
Les fichiers doivent respecter les conditions suivantes :
➢ Être des fichiers .php, .html ou .aspx
➢ Être accessibles depuis le web sans accès protégé par mot de passe
➢ Être encodés en UTF-8
➢ Contenir des liens href qui pointent uniquement vers des URL absolues (commençant par
https://www.votredomaine.fr/... )
➢ Contenir des balises images () utilisant uniquement des URL absolues (ex : https://www.votredo-
maine.fr/monimage.jpg)
➢ Les propriétés action de vos formulaires doivent utiliser des URL absolues
➢ Le code HTML doit être “propre” (balises bien fermées et de préférence ne pas ouvrir une balise dans le
header et la fermer dans le footer)
➢ Le design doit être responsive, s'adapter aux différentes résolutions et principaux navigateurs du marché
(Firefox, Internet Explorer, Chrome, Safari, Opera, navigateurs mobiles)
➢ Le head doit contenir votre balise viewport
➢ Le head ne doit pas contenir :
- de balises meta title, description, keywords, encodage, etc...
- les balises
- la balise
- d’appel à la librairie Jquery
- de styles génériques pour les balises HTML.
➢ Le header et footer ne doivent pas contenir les balises ;
➢ Ne pas pas intégrer des tags de suivi Google Analytics ou Google Tag Manager ;
➢ Dans les feuilles de styles CSS, les URL des images mises en background, doivent être en URL absolue ainsi
que dans le code de la page ;
➢ Si le site inclut des fonts spécifiques qui ne sont pas des Google Fonts nous les fournir.
ATTENTION : si le site est en HTTPS, veiller à ce que les appels des feuilles de styles et fichiers javascript, soient
appelés en HTTPS.
17
©Alliance Réseaux 20195. Spécificités techniques
Nous devrons par la suite attribuer un sous-domaine de réservation au tunnel de vente, pour ce faire le respon-
sable du nom de domaine de la destination doit :
● Créer l’URL du sous-domaine de réservation (exemple : http://reservation.mondomaine.fr ou
http://booking.mondomaine.fr) puis la paramétrer avec un CNAME vers le domaine technique que nous
vous communiquerons
Nous pourrons câbler 1 URL par domaine technique (tunnel d’achat) correspondant à une version langue
si le souhait de la destination est de différencier les ventes par version langue.
● Si besoin, nous transmettre la clé de tracking Google Analytics (Code UA) que nous devrons nous mêmes
déclarer dans le tunnel d’achat; éventuellement 1 clé par version de langue.
6. Documentations détaillées
Retrouvez l’ensemble des documentations complètes de nos modules et services :
➢ API DISPO :
http://documentation.open-system.fr/api/apidispo/AllianceReseaux_OpenSystem_WSAvail.pdf
➢ WIDGETS DIRECT :
http://documentation.open-system.fr/api/widgetdirect/AllianceReseaux_OpenSystem_WidgetDirect.pdf
➢ LES PREAPP :
http://documentation.open-system.fr/support/outils/Documentation_OpenSystem_PreAppWidgets.pdf
➢ LES CODES DE PROVENANCE :
http://documentation.open-system.fr/support/outils/Documentation_OpenSystem_CodesDeProve-
nance.pdf
18
©Alliance Réseaux 2019Vous pouvez aussi lire
