← Zurück zu Integrationen Integrationen · PHP

Ein Iframe zum Kopieren — mit echtem Tracking.

Kein Plugin nötig — nur eine Iframe-Einbettung und eine kleine Hilfsfunktion, damit Google Ads und Meta Buchungen weiterhin korrekt zuordnen können.

// 01

Hilfsfunktion

Fügen Sie dies einmalig in einer gemeinsam genutzten Include-Datei ein:

includes/fb-tracking.php

<?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;
}
?>

// 02

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.

// 03

Kompaktes 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>

// 04

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 — reichen Sie den gesamten Query-String dieser Seite an das Iframe weiter, ohne jeden Parameter einzeln aufzulisten:

<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>

Ersetzen Sie YOUR_COMPANY_KEY durch den echten Schlüssel aus dem Tab Frontend Ihres Admin-Bereichs. Wenn Sie $_SERVER['QUERY_STRING'] komplett weiterreichen, wird bereits alles durchgereicht, was das Widget gesendet hat — einschließlich gclid/utm_* —, daher wird fb_tracking_query() auf dieser speziellen Seite nicht noch einmal benötigt.

// 05 · Empfohlen bei bezahlten Kampagnen

Websiteweites Tracking

Fügen Sie dies in den gemeinsamen Footer bzw. das Template jeder Seite ein:

<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>

So werden die Kampagnendaten gespeichert, sobald sie auf irgendeiner Seite auftauchen. fb_tracking_query() kann sie dadurch auch dann noch abrufen, wenn der Besucher zuvor ein paar Seiten durchstöbert hat, bevor er beim Widget ankommt.

// Gängige Optionen

DunkelmodusErgänzen Sie &dark=1 in der Iframe-URL.

Options-Panel offenErgänzen Sie &opts_open=1.

SpracheErsetzen Sie lng=gb durch lng=es, lng=fr usw.

Horizontale LeisteErgänzen Sie &layout=inline in der Iframe-URL des Widgets (nur Widget, nicht 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 die anfängliche height des Iframes bei diesem Layout auf 200 statt auf 640, sonst entsteht kurz eine sichtbare Lücke unter der Leiste, bevor iframeResizer die Höhe misst.

// So prüfen Sie, ob es funktioniert

Tracking überprüfen

Rufen Sie eine beliebige Seite auf, an deren URL ?gclid=test123 angehängt ist.
Öffnen Sie die Browser-Konsole (F12) → geben Sie document.cookie ein.
fb_gclid=test123 sollte 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 Websites ganz ohne Backend gibt es eigene Anleitungen.

← Zurück zu Integrationen Fragen Sie uns per WhatsApp