Kein Backend? Kein Problem.
Alles — die Einbettung und das Kampagnen-Tracking — läuft clientseitig in JavaScript, da es keinen Server gibt, der den Firmenschlüssel oder die Tracking-Parameter verarbeitet.
Websiteweites Tracking + Abruffunktion
Fügen Sie dies im <head> oder direkt vor </body> auf jeder Seite der Website ein:
<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>Das Iframe passt seine Größe selbst an
Ein Iframe wächst nicht von selbst mit seinem Inhalt — ohne entsprechende Anweisung wird das Formular abgeschnitten, sobald sich der Inhalt vergrößert (zum Beispiel beim Öffnen des Options-Panels). Beide Einbettungen unten enthalten das bereits, das Muster besteht aber immer aus denselben drei Teilen in dieser Reihenfolge:
- Das Resizer-Skript — vor dem Iframe
- Das Iframe selbst, mit einer festen
id - Ein kleines Skript, das die Größenanpassung aktiviert — nach dem Iframe, bezogen auf dieselbe
id
Nutzen Sie die eigene Kopie des Skripts von FareBookings
app.farebookings.com/iframe-resizer/iframeResizer.min.js — kein CDN eines Drittanbieters. Werbeblocker, Firmen-Firewalls und Optimierungs-Plugins blockieren mitunter externe CDNs, nicht aber die Domain, auf der das Widget ohnehin läuft.
Kompaktes 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>Vollständiges Buchungsformular
Die wichtigste Korrektur auf dieser Seite
Wird ein kompaktes Widget an anderer Stelle der Website (etwa auf der Startseite) abgeschickt und leitet den Besucher auf diese Seite weiter, kommt alles, was er bereits eingegeben hat — Start, Ziel, Datum, Fahrgäste sowie eventuelle gclid/utm_* — in der eigenen URL dieser Seite an. Liest diese Seite das nicht aus und reicht es an das Iframe weiter, geht alles verloren und das Formular lädt leer. Das gilt nur, wenn das Widget Besucher auf eine eigene Seite mit eingebettetem Formular schickt — verlinkt das Widget stattdessen direkt auf app.farebookings.com, baut es diese URL selbst auf, und nichts davon ist nötig.
Die Lösung — lesen Sie den Query-String dieser Seite mit window.location.search aus und reichen Sie ihn komplett an das Iframe weiter:
<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>Ersetzen Sie YOUR_COMPANY_KEY in beiden Snippets oben durch den echten Schlüssel aus dem Tab Frontend Ihres Admin-Bereichs. Wenn Sie window.location.search komplett weiterreichen, wird bereits alles durchgereicht, was das Widget gesendet hat — einschließlich gclid/utm_* —, daher wird fbGetTrackingParams() auf dieser speziellen Seite nicht noch einmal benötigt.
&dark=1 in params.&opts_open=1 in params.lng=gb durch lng=es, lng=fr usw.&layout=inline in params für das Widget (nicht für das vollständige Formular). Benötigt ca. 1000px Breite und ordnet sich unter 900px selbstständig untereinander an — kein separates Markup für Mobilgeräte. Setzen Sie iframe.height bei diesem Layout auf '200' statt auf '640', sonst entsteht kurz eine sichtbare Lücke unter der Leiste, bevor iframeResizer die Höhe misst.Tracking überprüfen
- Rufen Sie eine beliebige Seite auf, an deren URL
?gclid=test123angehängt ist. - Öffnen Sie die Browser-Konsole (F12) → geben Sie
document.cookieein. fb_gclid=test123sollte dort stehen.- Wechseln Sie auf eine andere Seite (ohne den Parameter) und prüfen Sie, ob das Cookie noch vorhanden ist, bevor Sie beim Widget bzw. Formular ankommen.
Sie arbeiten mit einer anderen Plattform?
Für WordPress und für reine PHP-Websites gibt es eigene Anleitungen.