Geen backend? Geen probleem.
Alles — de embed én de campagnetracking — draait client-side in JavaScript, want er is geen server die de bedrijfssleutel of de trackingparameters kan verwerken.
Tracking voor de hele site + ophaalfunctie
Voeg dit toe aan de <head> of vlak vóór </body> op elke pagina van de 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>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
<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>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 — lees de eigen querystring van deze pagina uit met window.location.search en geef die in zijn geheel door aan de 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>Vervang YOUR_COMPANY_KEY door de echte sleutel uit het tabblad Frontend van je beheerpaneel, in beide codefragmenten hierboven. Als je window.location.search in zijn geheel doorgeeft, komt alles mee wat de widget heeft verstuurd — inclusief gclid/utm_* — dus fbGetTrackingParams() is op deze specifieke pagina niet nogmaals nodig.
&dark=1 toe aan params.&opts_open=1 toe aan params.lng=gb in lng=es, lng=fr, enzovoort.&layout=inline toe aan params 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 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 gewone PHP-sites.