Modificado en: Vie, 17 Ene, 2025 a 9:31 A. M.
Permitirá navegar por el proceso de reserva, es decir, desde realizar disponibilidades, hasta confirmar una reserva.
Normalmente habrá que pasar los mismos parámetros que el componente del Motor de búsqueda.
IMPORTANTE: En el flujo normal de un cliente, es decir, cuando venga del Motor de búsqueda, todos los parámetros necesarios para un funcionamiento correcto vendrán en la URL. Pero si se llega a la página de disponibilidad desde un enlace de presupuesto o de meta buscadores, además de pasar los parámetros de la URL, también hay que generar una sesión de usuario (webSessionId) y pasarla al Motor de búsqueda. Por último, objetos como navigation o tracking se deberían tener en cuenta también. Ya que ninguno de estos parámetros vendrán en los parámetros de la URL en estos casos.
Parámetros*
Principales
Parámetro | Descripción | Ejemplo |
webSessionId* | Identificador único de sesión web. Se usará para mantener la sesión del usuario entre componentes y páginas. | 01CDA38719E74937A2F275757ABA34EE |
view | Valor fijo “Engine” | Engine |
bookingEngine | Código de motor | 2 |
system* | Código de sistema (HPH o MPH) | HPH |
homeUrl | Página “home” de la web | https://zafiro.new.hotetec.com |
availabilityUrl | Página del proceso de reserva | /bet0.html |
container | Id de la etiqueta HTML que será el contenedor del componente | app-container |
tracking* | Objeto con información de tracking | (Igual que el del componente Motor de búsqueda) |
navigation* | Objeto con información de navegación | (Igual que el del componente Motor de búsqueda) |
searcherBehaviour* | Objeto opcional con el comportamiento del buscador al cargar en la disponibilidad.
IMPORTANTE: para que funcionen correctamente las redirecciones este parámetro debe utilizarse | name == 'searcherBehaviour'
|
Objeto searcherBehaviour
Parámetro | Descripción | Ejemplo |
addUtmsToUrl* | Añade a la URL del navegador todos los elementos que se mandan en el ‘utm’ del objeto ‘navigation’
Por ejemplo:
/bet0.html?utm_campaign=blogpost | true |
* Será necesario sustituir los parámetros que no son fijos por los valores necesarios en cada momento en función del tipo de búsqueda a realizar.
Ejemplo del HTML comentado con información necesaria
<script>
// Parámetros componente
const queryString = window.location.search;
if (queryString !== '' && queryString.indexOf('=') == -1) {
queryString = decodeURIComponent(queryString);
}
const urlParams = new URLSearchParams(queryString);
const bookingEngineParameters = {};
for (const param of urlParams) {
const name = param[0];
let value = decodeURIComponent(param[1]);
if (name == 'availability' || name == 'tracking' || name == 'navigation' || name == 'searcherBehaviour') {
value = JSON.parse(value);
// Metemos el código promocional en el objeto 'availability', por si la URL de dispo se genera con un promocode
if (name == 'availability' && urlParams.get("promoCode")) {
if (value.promotionalCode === undefined || value.promotionalCode == "") {
value.promotionalCode = urlParams.get("promoCode");
}
}
}
bookingEngineParameters[name] = value;
}
for (const [key, value] of urlParams) {
if (key.startsWith("utm")) { // Añadir otros parámetros de servicios externos como Wihp (wh_token), Triptease(tt_*), Quicktext (qt_tracking_id), etc.
navigation.utm.push({ code: key, value: [value] });
}
}
if (urlParams.get("budgetReference")) {
bookingEngineParameters["currency"] = "EUR";
bookingEngineParameters["language"] = "es";
}
var searcherSystemCode = localStorage.getItem('systemCode');
var system = "HPH"; // HPH - Escritorio/Tablet o MPH - Móvil
if (searcherSystemCode != null && searcherSystemCode != "") {
system = searcherSystemCode;
}
// Por si se quiere cambiar el código de motor por parámetro de URL o por localStorage desde otro componente
var bookingEngine = urlParams.get("bookingEngine") || localStorage.getItem('bookingEngine');
if (bookingEngine == undefined) bookingEngine = "2"; // Código de motor por defecto
window.parameters = window.parameters || {};
window.parameters.bookingEngine = {
webSessionId: "01CDA38719E74937A2F275757ABA34EE",
view: "Engine",
bookingEngine: bookingEngine,
system: system,
homeUrl: "https://zafiro.new.hotetec.com",
availabilityUrl: "disponibilidad-proceso-completo.html", // IMPORTANTE! En entorno productivo debería ser una ruta absoluta o relativa, como "/disponibilidad-proceso-completo.html". Ahora está así para que funcione correctamente en estos ejemplos
container: "app-container",
tracking: {
gtm: "GTM-TEST"
},
navigation: {
ipAddress: "172.21.34.74",
countryCode: "ES",
domain: "zafiro.new.hotetec.com",
referrer: "https://www.otraweb.com",
landingPage: "https://zafiro.new.hotetec.com",
userAgent: "Mozilla/5.0 (Windows NT 10.0; Win64; x64) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/102.0.5005.124 Safari/537.36 Edg/102.0.1245.44",
device: "desktop",
metaSearcherCode: "TVG",
utm: [
{"code": "utm_campaign", "value": ["blogpost"]},
{"code": "utm_medium", "value": ["social"]},
{"code": "utm_source", "value": ["facebook"]}
]
},
searcherBehaviour: {
addUtmsToUrl: true
},
};
Object.assign(window.parameters.bookingEngine, bookingEngineParameters);
if(typeof gethTtScript != 'function'){
window.gethTtScript = function(source){
var script = document.createElement('script');
var prior = document.getElementsByTagName('script')[0];
script.async = 1;
script.src = source;
prior.parentNode.insertBefore(script, prior);
};
}
var genericManifestAndVendorsLoaded = genericManifestAndVendorsLoaded || false;
if (!genericManifestAndVendorsLoaded) {
window.gethTtScript("https://hotel.new.hotetec.com/components/js/vendors.js");
window.gethTtScript("https://hotel.new.hotetec.com/components/js/manifest.js");
genericManifestAndVendorsLoaded = true;
}
</script>
<div id="app-container">
<script> window.gethTtScript("https://hotel.new.hotetec.com/components/booking-engine/js/main.js"); </script>
</div> |
|
