Nessun backend? Nessun problema.
Tutto, sia l’embed sia il tracciamento delle campagne, funziona lato client in JavaScript, perché non c’è un server che elabori la chiave aziendale o i parametri di tracciamento.
Tracciamento su tutto il sito + funzione di recupero
Aggiungilo nel <head> oppure subito prima di </body> di ogni pagina del sito:
<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>Fai ridimensionare l’iframe in automatico
Un iframe non cresce da solo quando cresce il suo contenuto: se non glielo indichi, il modulo viene tagliato non appena il contenuto si espande (per esempio aprendo il pannello Options). Entrambi gli embed qui sotto lo prevedono già, ma lo schema è sempre fatto degli stessi tre elementi, in quest’ordine:
- Lo script di ridimensionamento — prima dell’iframe
- L’iframe vero e proprio, con un
idfisso - Un piccolo script che attiva il ridimensionamento — dopo l’iframe, riferito allo stesso
id
Usa la copia dello script ospitata da FareBookings
app.farebookings.com/iframe-resizer/iframeResizer.min.js — non una CDN di terze parti. Ad blocker, firewall aziendali e plugin di ottimizzazione a volte bloccano le CDN esterne, ma non il dominio su cui vive già il widget.
Widget compatto
<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>Modulo di prenotazione completo
La correzione più importante di questa pagina
Se un widget compatto in un’altra parte del sito (la home page, per esempio) viene inviato e porta il visitatore su questa pagina, tutto ciò che ha già inserito — partenza, destinazione, data, passeggeri ed eventuali gclid/utm_* — arriva nell’URL di questa pagina. Se questa pagina non lo legge e non lo inoltra all’iframe, va tutto perso e il modulo si carica vuoto. Questo vale solo quando il widget manda i visitatori a una pagina del tuo sito con il modulo incorporato: se invece il widget rimanda direttamente a app.farebookings.com, costruisce da solo quell’URL e non serve nulla di tutto questo.
La soluzione: leggi la query string di questa pagina con window.location.search e inoltrala per intero all’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>Sostituisci YOUR_COMPANY_KEY con la chiave reale che trovi nella scheda Frontend del tuo pannello, in entrambi gli snippet qui sopra. Inoltrando window.location.search per intero porti già con te tutto ciò che il widget ha inviato, compresi gclid/utm_*, quindi su questa pagina non serve usare di nuovo fbGetTrackingParams().
&dark=1 a params.&opts_open=1 a params.lng=gb con lng=es, lng=fr, ecc.&layout=inline a params per il widget (non per il modulo completo). Richiede circa 1000px di larghezza e sotto i 900px si dispone da solo in colonna, senza markup separato per il mobile. Con questo layout imposta iframe.height a '200' invece di '640', altrimenti resta un vuoto visibile sotto la barra nei primi istanti prima che iframeResizer la misuri.Verifica che il tracciamento funzioni
- Apri una qualsiasi pagina con
?gclid=test123alla fine dell’URL. - Apri la console del browser (F12) → digita
document.cookie. - Dovresti trovare
fb_gclid=test123. - Passa a un’altra pagina (senza il parametro) e controlla che il cookie sia ancora presente prima di arrivare al widget o al modulo.
Usi un’altra piattaforma?
Esistono guide dedicate a WordPress e ai siti in PHP puro.