Pas de backend ? Aucun problème.
Tout, de l’intégration au suivi des campagnes, s’exécute côté client en JavaScript, puisqu’aucun serveur ne traite la clé de société ni les paramètres de suivi.
Suivi sur l’ensemble du site et fonction de récupération
À ajouter dans le <head> ou juste avant </body> sur toutes les pages du site :
<script>
(function(){
var KEYS = ['gclid','gbraid','wbraid','utm_source','utm_medium','utm_campaign','utm_term','utm_content','fbclid'];
// Stores a cookie if this page has any of them in the URL
KEYS.forEach(function(k){
var m = new RegExp('[?&]'+k+'=([^&#]*)').exec(window.location.href);
if(m){
document.cookie = 'fb_' + k + '=' + m[1] + ';max-age=7776000;path=/;SameSite=Lax';
}
});
// Used by the embeds below to retrieve it
window.fbGetTrackingParams = function(){
var qs = '';
KEYS.forEach(function(k){
var m = new RegExp('[?&]'+k+'=([^&#]*)').exec(window.location.href);
var val = m ? m[1] : null;
if(!val){
var match = document.cookie.match(new RegExp('(^| )fb_' + k + '=([^;]+)'));
if(match) val = match[2];
}
if(val) qs += '&' + k + '=' + val;
});
return qs;
};
})();
</script>Laissez l’iframe se redimensionner seule
Une iframe ne s’agrandit pas toute seule quand son contenu grandit : sans consigne, le formulaire est coupé dès que son contenu s’étend (à l’ouverture du panneau Options, par exemple). Les deux intégrations ci-dessous l’incluent déjà, mais le principe reste toujours le même, en trois éléments, dans cet ordre :
- Le script de redimensionnement, placé avant l’iframe
- L’iframe elle-même, avec un
idfixe - Un petit script qui active le redimensionnement, placé après l’iframe et ciblant ce même
id
Utilisez la copie du script hébergée par FareBookings
app.farebookings.com/iframe-resizer/iframeResizer.min.js — et non un CDN tiers. Les bloqueurs de publicité, les pare-feu d’entreprise et les plugins d’optimisation de site bloquent parfois les CDN externes, mais pas le domaine sur lequel le widget est déjà hébergé.
Widget compact
<div id="fb-widget-container"></div>
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>
<script>
(function(){
var container = document.getElementById('fb-widget-container');
var params = 'k=YOUR_COMPANY_KEY&lng=gb';
var tracking = window.fbGetTrackingParams ? window.fbGetTrackingParams() : '';
var iframe = document.createElement('iframe');
iframe.id = 'fb-booking-widget';
iframe.src = 'https://app.farebookings.com/booking-widget.php?' + params + tracking;
iframe.width = '100%';
iframe.height = '640';
iframe.frameBorder = '0';
iframe.scrolling = 'no';
iframe.style.border = 'none';
container.appendChild(iframe);
if (window.iFrameResize) {
iFrameResize({checkOrigin: false, heightCalculationMethod: 'lowestElement'}, '#fb-booking-widget');
}
})();
</script>Formulaire de réservation complet
Le correctif le plus important de cette page
Si un widget compact placé ailleurs sur le site (la page d’accueil, par exemple) envoie le visiteur vers cette page, tout ce qu’il a déjà saisi (départ, destination, date, passagers, ainsi que les éventuels gclid/utm_*) arrive dans l’URL de cette page. Si la page ne les lit pas pour les transmettre à l’iframe, tout est perdu et le formulaire s’affiche vide. Cela ne concerne que les cas où le widget envoie les visiteurs vers une page de votre site contenant le formulaire intégré ; si le widget pointe directement vers app.farebookings.com, il construit lui-même cette URL et rien de tout cela n’est nécessaire.
La solution : lire la query string de cette page avec window.location.search et la transmettre en bloc à l’iframe :
<div id="fb-form-container"></div>
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>
<script>
(function(){
var container = document.getElementById('fb-form-container');
var baseParams = 'k=YOUR_COMPANY_KEY&d=pp&lng=gb';
// Forward EVERYTHING this page's own URL was given — this is what
// carries the widget's data through when it redirects here.
var ownParams = window.location.search.replace(/^\?/, '');
var finalParams = baseParams + (ownParams ? '&' + ownParams : '');
var iframe = document.createElement('iframe');
iframe.id = 'fb-booking-form';
iframe.src = 'https://app.farebookings.com/step1sslv3.php?' + finalParams;
iframe.width = '100%';
iframe.style.border = 'none';
iframe.style.minHeight = '1400px';
iframe.scrolling = 'no';
container.appendChild(iframe);
if (window.iFrameResize) {
iFrameResize({checkOrigin: false, heightCalculationMethod: 'lowestElement'}, '#fb-booking-form');
}
})();
</script>Remplacez YOUR_COMPANY_KEY par la vraie clé de l’onglet Frontend de votre panneau, dans les deux extraits ci-dessus. Transmettre window.location.search en bloc fait déjà passer tout ce que le widget a envoyé, y compris gclid/utm_* ; fbGetTrackingParams() n’est donc pas nécessaire sur cette page précise.
&dark=1 à params.&opts_open=1 à params.lng=gb par lng=es, lng=fr, etc.&layout=inline à params pour le widget (pas pour le formulaire complet). Il faut environ 1 000 px de largeur ; en dessous de 900 px, les éléments s’empilent d’eux-mêmes, sans balisage séparé pour mobile. Avec cette disposition, définissez iframe.height à '200' au lieu de '640', sinon un espace vide reste visible sous la barre pendant un instant, avant que iframeResizer ne mesure la hauteur.Vérifier que le suivi fonctionne
- Ouvrez n’importe quelle page avec
?gclid=test123à la fin de l’URL. - Ouvrez la console du navigateur (F12), puis saisissez
document.cookie. fb_gclid=test123doit apparaître.- Passez sur une autre page (sans le paramètre) et vérifiez que le cookie est toujours présent avant d’arriver sur le widget ou le formulaire.
Vous utilisez une autre plateforme ?
Des guides dédiés existent pour WordPress et pour les sites en PHP simple.