← Volver a Integraciones Integraciones · PHP

Un iframe para copiar y pegar, con seguimiento real.

Sin plugins: solo un iframe y una pequeña función auxiliar, para que Google Ads y Meta sigan atribuyendo bien las reservas.

// 01

Función auxiliar

Añádela una sola vez, en un include compartido:

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

Que el iframe se redimensione solo

Un iframe no crece cuando crece su contenido: si no se lo indicas, el formulario se corta en cuanto su contenido se expande (por ejemplo, al abrir el panel de opciones). Los dos códigos de integración de más abajo ya lo incluyen, pero el patrón siempre se compone de las mismas tres piezas, en este orden:

El script de redimensionado, antes del iframe
El propio iframe, con un id fijo
Un pequeño script que activa el redimensionado, después del iframe y apuntando a ese mismo id

Usa la copia del script alojada en FareBookings

app.farebookings.com/iframe-resizer/iframeResizer.min.js, no un CDN de terceros. Los bloqueadores de anuncios, los cortafuegos corporativos y los plugins de optimización a veces bloquean CDN externos, pero no el dominio donde ya vive el widget.

// 03

Widget compacto

<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

Formulario de reserva completo

La corrección más importante de esta página

Si un widget compacto de otra parte de la web (la página de inicio, por ejemplo) envía al visitante a esta página, todo lo que ya había escrito (origen, destino, fecha, pasajeros y también gclid/utm_*) llega en la propia URL de esta página. Si la página no lo lee y no lo reenvía al iframe, se pierde todo y el formulario se carga en blanco. Esto solo se aplica cuando el widget envía a los visitantes a una página tuya que tiene el formulario integrado; si el widget enlaza directamente con app.farebookings.com, él mismo construye esa URL y nada de esto hace falta.

La solución: reenviar al iframe la query string completa de esta página, sin listar cada parámetro a mano:

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

Sustituye YOUR_COMPANY_KEY por la clave real de la pestaña Frontend de tu panel. Al reenviar $_SERVER['QUERY_STRING'] completa ya se transmite todo lo que envió el widget, incluidos gclid/utm_*, así que en esta página concreta no hace falta volver a usar fb_tracking_query().

// 05 · Recomendado si haces campañas de pago

Seguimiento en toda la web

Añade esto al pie o plantilla compartida de todas las páginas:

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

Así se guardan los datos de la campaña en cuanto aparecen en cualquier página, y fb_tracking_query() puede recuperarlos aunque el visitante haya navegado por varias páginas antes de llegar al widget.

// Opciones comunes

Modo oscuroAñade &dark=1 a la URL del iframe.

Panel de opciones abiertoAñade &opts_open=1.

IdiomaCambia lng=gb por lng=es, lng=fr, etc.

Barra horizontalAñade &layout=inline a la URL del iframe del widget (solo el widget, no el formulario completo). Necesita unos 1000px de ancho y se apila solo por debajo de 900px, sin código aparte para móvil. Con este formato, pon el height inicial del iframe en 200 en lugar de 640; si no, se verá un hueco bajo la barra durante un instante, hasta que iframeResizer la mida.

// Comprueba que funciona

Verificar que el seguimiento funciona

Visita cualquier página con ?gclid=test123 al final de la URL.
Abre la consola del navegador (F12) → escribe document.cookie.
Ahí debería aparecer fb_gclid=test123.
Navega a otra página (sin el parámetro) y confirma que la cookie sigue ahí antes de llegar al widget o al formulario.

¿Trabajas con otra plataforma?

Tenemos guías específicas para WordPress y para webs sin backend.

← Volver a Integraciones Pregúntanos por WhatsApp