owned this note
owned this note
Published
Linked with GitHub
## Changelog
|Versión|Fecha|Autor|Responsable|Comentarios|
| :-: | :- | :- | :- | :- |
|1.0|11/05/2023|Javier Hernández, Marcos Julián|Raúl Blanco|25/05/2023|Versión inicial|
|1.1|23/06/2023|Marcos Julián|Raúl Blanco|Ajustes de código|
|1.2|26/06/2023|Marcos Julián|Raúl Blanco|Añadidas aclaraciones|
|1.3|27/06/2023|Marcos Julián|Raúl Blanco|Añadido ejemplo completo|
## Introducción
Este documento recoge el procedimiento para realizar una integración utilizando el módulo de analítica de Neobookings (NeoAnalytics), con su API en Javascript. La finalidad de éste módulo es generar un `DataLayer` que aportará información de valor a Google Tag Manager y este a su vez a Google Analytics.
:::info
Los datos que se incluyen en el `DataLayer` tienen que ser siempre en inglés. Si no tenemos disponible este idioma, utilizaremos el español o el predeterminado de la web si éste tampoco está disponible.
:::
## Requisitos
Módulo de consentimiento de Cookies.
En esta versión, el Consentimiento de Cookies está controlado por Google Tag Manager. De esta forma, hay que informar al módulo de NeoAnalytics en todo momento del estado de la aprobación del Consentimiento.
Existen dos opciones posibles:
* Módulo Neobookings Cookie Consent v.3
* Módulo externo de control de Consentimiento de Cookies
## Inicialización
:::info
**¡IMPORTANTE!** Antes de implementar NeoAnalytics elimina cualquier instalación de GTM, la inicialización de la variable dataLayer, las funciones gtag() y los pushes de eventos en dataLayer si los hubiera en el proyecto.
:::
Añade el siguiente código `<noscript>` de GTM al inicio del `<body>` de cada página, con el **ID de Tag Manager correspondiente**. Debe ser el primer elemento de esta etiqueta.
```html
// Tag Manager noscript
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=#TAG_MANAGER_ID#>" height="0" width="0" style="display:none;visibility:hidden"/>
</noscript>
<!-- End Google Tag Manager (noscript) -->
```
### Consentimiento de Cookies
En este punto, lo primero que debe cargar la Web es el módulo de Consentimiento de Cookies (incluir esto al inicio del `<head>`):
```html
<script type="text/javascript" src="https://webservices.neobookings.com/cookie-consent-v3?domain=#DOMINIO#&language=#IDIOMA#"></script>
```
### NeoAnalytics
Para inicializar el módulo NeoAnalytics solamente se necesita importar un script dentro de la etiqueta `<head>` del sitio. Lo cargaremos **despúes** de cargar el Consentimiento de Cookies, ya sea el de Neobookings o cualquier módulo externo:
```html
<script type="text/javascript" src="https://cdn.neobookings.com/neoanalytics/main.min.js"></script>
```
#### Valores Cookie Consent
Lo primero que haremos será obtener los parámetros de cookies. `consentModeObject` es un objeto con las propiedades necesarias para informar si las cookies están aceptadas/denegadas.
##### Con módulo Neobookings Cookie Consent
Estos parámetros se obtienen llamando a Neobookings Cookie Consent de la siguiente manera:
```javascript
let consentModeObject =
typeof NeoCookieConsent !== 'undefined' ? NeoCookieConsent.getConsent() : {};
```
##### Con módulo externo
Se deberá de generar este objeto y rellenarlo con los siguientes valores en base a su configuración de consentimiento:
```javascript
// Valores de Cookie Consent (obtenidos de su plugin de Cookies)
let consentModeObject = {
ad_storage: "granted", // si no se acepta, "denied"
analytics_storage: "granted", // si no se acepta, "denied"
functionality_storage: "granted", // este siempre "granted", al ser obligatorias
};
```
#### Valores de página
También necesitaremos el objeto `pageParamsObject`, un objeto con las propiedades necesarias para inicializar el `DataLayer`. Si no contamos con la información de algún parámetro, no se debe añadir al objeto.
```javascript
// Ejemplo de pageParamsObject
let pageParamsObject = {
system_http_status: "200",
language: "es",
category_id: 1,
category_name: "Ibiza",
subcategory_id: 34,
subcategory_name: "Playa d’en Bossa",
page_type: "category"
}
```
El parámetro `page_type` puede contener los siguientes valores según en la página que nos encontremos:
- "`home`"
- "`category`"
- "`hotel`"
- "`content`"
- "`corporate`"
- "`blog`"
- "`blog-category`"
- "`blog-article`"
Acontinuación, debemos inicializar la variable `DataLayer` lo más cerca posible del cierre de la etiqueta `</head>` una vez el DOM haya cargado:
### Inicialización
Finalmente, la línea para inicializar el módulo sería la siguiente
```javascript
// Inicialización de DataLayer
neoAnalytics.datalayer.init(consentModeObject, "web", pageParamsObject);
```
### Cierre
A continuación, debemos cerrar el `DataLayer` inicial mediante la siguiente función. Esta acción se debe de añadir justo después de la inicialización:
```javascript
// Cierre de DataLayer
neoAnalytics.datalayer.last();
```
Con esto queda finalizada la primera parte.
## Datos de visita extra
El siguiente paso, es generar un objeto con algunos datos extra para mediciones. Utilizar el siguiente ejemplo:
```javascript
// Obtener origen y/o referal
let host = "bookings.vibrahotels.com";
let urlParams = new URLSearchParams(window.location.search);
let origin = urlParams.get('origin') ? urlParams.get('origin') : (
urlParams.get('utm_source') ? urlParams.get('utm_source') : host
);
// Datos de visita extra
let NeobookingsAnalytics = {
baseurl: host,
hostname: host,
language: "es",
locale: "es_ES",
origin: origin,
section: "new-search"
}
// Importación de datos
neoAnalytics.neobookings.analytics(NeobookingsAnalytics);
```
## Inicialización de Google Tag Manager
Finalmente, debemos inicializar Google Tag Manager lo más cerca posible del cierre de la etiqueta `</head>` mediante la siguiente función:
```javascript
// Cargamos Google Tag Manager
neoAnalytics.gtm.init(tagManagerId);
```
Dónde `tagManagerId` es el código proporcionado por Google para configurar GTM.
## Ejemplo completo
Finalmente, la inicialización del `DataLayer` debería ser algo parecido al siguiente ejemplo:
```javascript
<html>
...
<head>
<script type="text/javascript" src="https://webservices.neobookings.com/cookie-consent-v3?domain=#DOMINIO#&language=#IDIOMA#"></script>
<script type="text/javascript" src="https://cdn.neobookings.com/neoanalytics/main.min.js"></script>
...
<script>
document.addEventListener("DOMContentLoaded", function(event) {
// Neobookings Cookie Consent
let consentModeObject =
typeof NeoCookieConsent !== 'undefined' ? NeoCookieConsent.getConsent() : {};
// Módulo de Cookie Consent externo (solo añadir si no se utiliza el de Neobookings)
let consentModeObject = {
ad_storage: "granted", // si no se acepta, "denied"
analytics_storage: "granted", // si no se acepta, "denied"
functionality_storage: "granted", // este siempre "granted", al ser obligatorias
};
// Ejemplo de pageParamsObject
let pageParamsObject = {
system_http_status: "200",
language: "es",
category_id: 1,
category_name: "Ibiza",
subcategory_id: 34,
subcategory_name: "Playa d’en Bossa",
page_type: "category"
}
// Inicialización de DataLayer
neoAnalytics.datalayer.init(consentModeObject, "web", pageParamsObject);
// Cierre de DataLayer
neoAnalytics.datalayer.last();
// Obtener origen y/o referal
let host = "bookings.vibrahotels.com";
let urlParams = new URLSearchParams(window.location.search);
let origin = urlParams.get('origin') ? urlParams.get('origin') : (
urlParams.get('utm_source') ? urlParams.get('utm_source') : host
);
// Datos de visita extra
let NeobookingsAnalytics = {
baseurl: host,
hostname: host,
language: "es",
locale: "es_ES",
origin: origin,
section: "new-search"
}
// Importación de datos
neoAnalytics.neobookings.analytics(NeobookingsAnalytics);
// Cargamos Google Tag Manager
neoAnalytics.gtm.init(tagManagerId);
});
</script>
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript>
<iframe src="https://www.googletagmanager.com/ns.html?id=#TAG_MANAGER_ID#>" height="0" width="0" style="display:none;visibility:hidden"/>
</noscript>
<!-- End Google Tag Manager (noscript) -->
...
</body>
</html>
```
## Eventos
Estos eventos, se pueden lanzar en cualquier momento una vez inicializada la variable `DataLayer`.
#### Suscripción a Newsletter
Cuando el usuario haga submit en un formulario de newsletter, se debe ejecutar la siguiente función:
```javascript
neoAnalytics.event.generateLead();
```
#### Login
Cuando un usuario haga login en la web, se deberá ejecutar la siguiente función:
```javascript
neoAnalytics.event.login("manual");
```
### Registro
Cuando un usuario complete un registro correctamente, se deberá ejecutar la siguiente función:
```javascript
neoAnalytics.event.signUp("manual");
```
### Actualización de Consentimiento de Cookies
Cuando un usuario cambie su política de Consentimiento de Cookies, esto se de informar de la siguiente manera:
```javascript
let consentModeObject = {
ad_storage: "granted", // si no se acepta, "denied"
analytics_storage: "granted", // si no se acepta, "denied"
functionality_storage: "granted", // este siempre "granted", al ser obligatorias
};
neoAnalytics.cookies.update(consentModeObject);
```
## Errores controlados
Cuando en la página aparezca un error de formulario controlado se debe ejecutar la siguiente función:
```javascript
neoAnalytics.event.error(error_id);
```
Los códigos de error pueden ser los siguientes:
| error_id | Descripción |
|:--------:| ----------- |
| 1 | Error en formulario de login |
| 2 | Error en formulario de registro |
| 3 | Error en formulario de cambio de contraseña |
| 4 | Error en formulario de perfil de usuario |
| 5 | Error en formulario de checkout |
| 6 | Error en formulario de newsletter |
| 7 | Error en formulario de contacto |
| 8 | Error en formulario de sorteo |
| 9 | Error en formulario de trabaja con nosotros |
| 10 | Error en formulario de máscara de búsqueda |
| 11 | Error en formulario de reserva de servicio (restaurante, spa, etc.)|
| 12 | Error en un formulario personalizado (si algún formulario no encaja con las descripciones anteriores) |
Con todas estas instrucciones, es posible completar la implementación de nuestro módulo de analítica.
Google Drive
Gist
Clipboard
Sign in with Wallet
