Een iframe om te kopiëren, met echte tracking.
Geen plugin nodig — alleen een iframe-embed en één kleine hulpfunctie, zodat Google Ads en Meta boekingen nog steeds correct kunnen toewijzen.
Hulpfunctie
Voeg dit één keer toe, in een gedeelde include:
<?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;
}
?>Laat de iframe zichzelf aanpassen
Een iframe groeit niet mee als de inhoud groter wordt — zonder instructie wordt het formulier afgesneden zodra de inhoud uitklapt (bijvoorbeeld bij het openen van het Options-paneel). Beide embeds hieronder bevatten dit al, maar het patroon bestaat altijd uit dezelfde drie onderdelen, in deze volgorde:
- Het resizer-script — vóór de iframe
- De iframe zelf, met een vaste
id - Een klein script dat het aanpassen van de grootte activeert — na de iframe, gericht op dezelfde
id
Gebruik de eigen kopie van het script van FareBookings
app.farebookings.com/iframe-resizer/iframeResizer.min.js — geen CDN van een derde partij. Adblockers, bedrijfsfirewalls en site-optimalisatieplugins blokkeren soms externe CDN's, maar niet het domein waar de widget al op draait.
Compacte widget
<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>Volledig boekingsformulier
De belangrijkste oplossing op deze pagina
Wordt een compacte widget elders op de site (bijvoorbeeld de homepage) verzonden en stuurt die de bezoeker naar deze pagina, dan komt alles wat de bezoeker al heeft ingevuld — vertrekpunt, bestemming, datum, passagiers, plus eventuele gclid/utm_* — terecht in de eigen URL van deze pagina. Als de pagina dat niet uitleest en niet doorgeeft aan de iframe, gaat alles verloren en laadt het formulier leeg. Dit geldt alleen als de widget bezoekers doorstuurt naar een pagina van jezelf met het formulier erin — verwijst de widget rechtstreeks naar app.farebookings.com, dan bouwt die de URL zelf op en is dit allemaal niet nodig.
De oplossing — geef de volledige querystring van deze pagina door aan de iframe, zonder elke parameter handmatig op te sommen:
<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>Vervang YOUR_COMPANY_KEY door de echte sleutel uit het tabblad Frontend van je beheerpaneel. Als je $_SERVER['QUERY_STRING'] in zijn geheel doorgeeft, komt alles mee wat de widget heeft verstuurd — inclusief gclid/utm_* — dus fb_tracking_query() is op deze specifieke pagina niet nogmaals nodig.
Tracking voor de hele site
Voeg dit toe aan de gedeelde footer of template van elke pagina:
<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>Dit slaat de campagnegegevens op zodra ze op een pagina worden gezien, zodat fb_tracking_query() ze nog kan oppakken, ook als de bezoeker eerst een paar pagina's heeft bekeken voordat hij bij de widget kwam.
&dark=1 toe aan de iframe-URL.&opts_open=1 toe.lng=gb in lng=es, lng=fr, enzovoort.&layout=inline toe aan de iframe-URL van de widget (alleen voor de widget, niet voor het volledige formulier). Heeft ca. 1000px breedte nodig en zet de onderdelen onder 900px vanzelf onder elkaar — geen aparte markup voor mobiel. Zet de beginwaarde van de iframe-height op 200 in plaats van 640 bij deze weergave, anders zie je even een lege ruimte onder de balk voordat iframeResizer de hoogte heeft gemeten.Controleren of de tracking werkt
- Open een willekeurige pagina met
?gclid=test123aan het eind van de URL. - Open de browserconsole (F12) → typ
document.cookie. fb_gclid=test123hoort daar te staan.- Ga naar een andere pagina (zonder de parameter) en controleer of de cookie er nog steeds is voordat je bij de widget of het formulier komt.
Bouw je op een ander platform?
Er zijn aparte handleidingen voor WordPress en voor sites zonder backend.