Une iframe à copier-coller, avec un vrai suivi.
Aucun plugin nécessaire : une simple iframe et une petite fonction utilitaire suffisent pour que Google Ads et Meta continuent d’attribuer correctement les réservations.
Fonction utilitaire
À ajouter une seule fois, dans un fichier inclus partagé :
<?php
function fb_tracking_query() {
$keys = ['gclid','gbraid','wbraid','utm_source','utm_medium','utm_campaign','utm_term','utm_content','fbclid'];
$qs = '';
foreach ($keys as $k) {
$val = '';
if (!empty($_GET[$k])) {
$val = $_GET[$k]; // 1st: this page's own URL
} elseif (!empty($_COOKIE['fb_' . $k])) {
$val = $_COOKIE['fb_' . $k]; // 2nd: sitewide cookie (see below)
}
if ($val !== '') {
$qs .= '&' . $k . '=' . rawurlencode($val);
}
}
return $qs;
}
?>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
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>
<iframe
id="fb-booking-widget"
src="https://app.farebookings.com/booking-widget.php?k=YOUR_COMPANY_KEY&lng=gb<?php echo fb_tracking_query(); ?>"
width="100%" height="640" frameborder="0" scrolling="no" style="border:none">
</iframe>
<script>
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 : transmettre toute la query string de cette page à l’iframe, sans lister chaque paramètre à la main :
<script src="https://app.farebookings.com/iframe-resizer/iframeResizer.min.js"></script>
<?php
// Forward everything this page's own URL was given — this is what
// carries the widget's data through when it redirects here.
$ownParams = $_SERVER['QUERY_STRING'] ?? '';
?>
<iframe
id="fb-booking-form"
src="https://app.farebookings.com/step1sslv3.php?k=YOUR_COMPANY_KEY&d=pp&lng=gb<?php echo $ownParams ? '&' . $ownParams : ''; ?>"
width="100%" scrolling="no" style="border:none;min-height:1400px">
</iframe>
<script>
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. Transmettre $_SERVER['QUERY_STRING'] en bloc fait déjà passer tout ce que le widget a envoyé, y compris gclid/utm_* ; fb_tracking_query() n’est donc pas nécessaire sur cette page précise.
Suivi sur l’ensemble du site
À ajouter dans le pied de page ou le modèle partagé de toutes les pages :
<script>
(function(){
var keys = ['gclid','gbraid','wbraid','utm_source','utm_medium','utm_campaign','utm_term','utm_content','fbclid'];
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';
}
});
})();
</script>Ce script enregistre les données de campagne dès qu’elles apparaissent sur une page, afin que fb_tracking_query() puisse les récupérer même si le visiteur a parcouru plusieurs pages avant d’atteindre le widget.
&dark=1 à l’URL de l’iframe.&opts_open=1.lng=gb par lng=es, lng=fr, etc.&layout=inline à l’URL de l’iframe du widget (widget uniquement, pas 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, fixez la height initiale de l’iframe à 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 sans aucun backend.