# NeoAnalytics Module Integration Guide
## Changelog
|**Version**|**Date**|**Author**|**Responsible person**|**Comments**|
| :-: | :- | :- | :- | :- |
|1.0|11/05/2023|Javier Hernández, Marcos Julián|Raúl Blanco|25/05/2023|
|1.1|23/06/2023|Marcos Julián|Raúl Blanco|Code Adjustments|
|1.2|26/06/2023|Marcos Julián|Raúl Blanco|Added clarifications|
|1.3|27/06/2023|Marcos Julián|Raúl Blanco|Included complete example|
## Introduction
This document outlines the procedure for integrating with the Neobookings analytics module (NeoAnalytics) using its JavaScript API. The purpose of this module is to create a `DataLayer` that provides valuable information to Google Tag Manager, which in turn contributes to Google Analytics.
:::info
The data included in the `DataLayer` must always be in English. If this language is not available, we will use Spanish or the default language of the website if it's also not available.
:::
## Requirements
Cookie Consent Module.
In this version, Cookie Consent is managed through Google Tag Manager. Therefore, it's necessary to keep the NeoAnalytics module informed about the status of the Consent approval at all times.
There are two possible options:
* Neobookings Cookie Consent Module v.3.
* External Cookie Consent Control Module
## Initialization
:::info
**IMPORTANT!** Before implementing NeoAnalytics, remove any GTM installations, dataLayer variable initializations, gtag() functions, and event pushes to dataLayer if present in the project.
:::
Add the following GTM `<noscript>` code to the beginning of the `<body>` tag of each page, with the corresponding Tag Manager ID. It should be the first element within this tag.
```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) -->
```
### Cookie Consent
At this point, the first thing that the website should load is the Cookie Consent module (include this at the beginning of the `<head>`):
```html
<script type="text/javascript" src="https://webservices.neobookings.com/cookie-consent-v3?domain=#DOMINIO#&language=#IDIOMA#"></script>
```
### NeoAnalytics
To initialize the NeoAnalytics module, you only need to import a script within the `<head>` tag of the site. We will load it **after** loading the Cookie Consent, whether it's Neobookings' consent or any external module:
```html
<script type="text/javascript" src="https://cdn.neobookings.com/neoanalytics/main.min.js"></script>
```
#### Cookie Consent Values
The first thing we will do is obtain the cookie parameters. `consentModeObject` is an object with the necessary properties to indicate whether cookies are accepted/rejected.
##### With Neobookings Cookie Consent Module
These parameters are obtained by calling Neobookings Cookie Consent as follows:
```javascript
let consentModeObject =
typeof NeoCookieConsent !== 'undefined' ? NeoCookieConsent.getConsent() : {};
```
##### With an external module
You should generate this object and fill it with the following values based on your consent configuration:
```javascript
// Cookie Consent Values (obtained from your Cookies plugin)
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
};
```
#### Page Values
We will also need the `pageParamsObject`, an object with the necessary properties to initialize the `DataLayer`. If we don't have information for a certain parameter, it should not be added to the object.
```javascript
// Example of 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"
}
```
The parameter `page_type` can contain the following values based on the page we are on:
- “`home`”
- “`category`”
- “`hotel`”
- “`content`”
- “`corporate`”
- “`blog`”
- “`blog-category`”
- “`blog-article`”
Next, we need to initialize the DataLayer variable as close as possible to the closing `</head>` tag, once the DOM has loaded:
#### Initialization
Finally, the line to initialize the module would be as follows:
```javascript
// DataLayer Initialization
neoAnalytics.datalayer.init(consentModeObject, "web", pageParamsObject);
```
#### Closing
Next, we need to close the initial `DataLayer` using the following function. This action should be added immediately after the initialization:
```javascript
// DataLayer closure
neoAnalytics.datalayer.last();
```
With this, the first part is completed.
## Extra Visit Data
The next step is to generate an object with some extra data for measurements. Use the following example:
```javascript
// Obtain origin and/or referral
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
);
// Additional visit data
let NeobookingsAnalytics = {
baseurl: host,
hostname: host,
language: "es",
locale: "es_ES",
origin: origin,
section: "new-search"
}
// Data importation
neoAnalytics.neobookings.analytics(NeobookingsAnalytics);
```
## Google Tag Manager Initialization
Finally, we need to initialize Google Tag Manager as close as possible to the closing `</head>` tag using the following function:
```javascript
// Cargamos Google Tag Manager
neoAnalytics.gtm.init(tagManagerId);
```
Where `tagManagerId` is the code provided by Google to set up GTM.
## Complete Example
Finally, the `DataLayer` initialization should be something similar to the following example:
```html
<html>
...
<head>
<script type="text/javascript" src="https://webservices.neobookings.com/cookie-consent-v3?domain=#DOMAIN#&language=#LANGUAGE#"></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() : {};
// External Cookie Consent module (only add if Neobookings' is not being used)
let consentModeObject = {
ad_storage: "granted", // if not accepted, "denied"
analytics_storage: "granted", // if not accepted, "denied"
functionality_storage: "granted", // this is always "granted", as they are mandatory
};
// Example of 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"
}
// DataLayer Initialization
neoAnalytics.datalayer.init(consentModeObject, "web", pageParamsObject);
// DataLayer Closure
neoAnalytics.datalayer.last();
// Getting origin and/or referral
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
);
// Additional visit data
let NeobookingsAnalytics = {
baseurl: host,
hostname: host,
language: "es",
locale: "es_ES",
origin: origin,
section: "new-search"
}
// Data import
neoAnalytics.neobookings.analytics(NeobookingsAnalytics);
// We load 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>
```
## Events
These events can be triggered at any time once the `DataLayer` variable is initialized.
#### Newsletter Subscription
When the user submits a newsletter subscription form, the following function should be executed:
```javascript
neoAnalytics.event.generateLead();
```
#### Login
When a user logs in to the website, the following function should be executed:
```javascript
neoAnalytics.event.login("manual");
```
### Registration
When a user successfully completes a registration, the following function should be executed:
```javascript
neoAnalytics.event.signUp("manual");
```
### Updating Cookie Consent
When a user changes their Cookie Consent policy, this should be reported as follows:
```javascript
let consentModeObject = {
ad_storage: "granted", // If not accepted, use "denied"
analytics_storage: "granted", // If not accepted, use "denied"
functionality_storage: "granted", // This is always "granted" as they are mandatory
};
neoAnalytics.cookies.update(consentModeObject);
```
## Handled Errors
When a controlled form error appears on the page, the following function should be executed:
```javascript
neoAnalytics.event.error(error\_id);
```
The error codes can be the following:
|**error\_id**|**Description**|
| :-: | :- |
|1|Error in login form|
|2|Error in registration form|
|3|Error in password change form|
|4|Error in user profile form|
|5|Error in checkout form|
|6|Error in newsletter form|
|7|Error in contact form|
|8|Error in giveaway form|
|9|Error in "work with us" form|
|10|Error in search bar form|
|11|Error in service booking form (restaurant, spa, etc.)|
|12|Error in custom form (if any form doesn't fit the above descriptions)|
With all these instructions, it's possible to complete the implementation of our analytics module.
Sign in with Wallet
Connect another wallet