Esta guía le proporciona la lista de activadores que debe utilizar para sus rastreadores de tipo Google Tags y píxel de Meta (Facebook) en su tienda (en el marco del sistema de venta de entradas de Infomaniak).

Ejemplos de píxel de Meta y etiquetas de Google

Consulte la documentación externa sobre el píxel de Meta:

!function(f,b,e,v,n,t,s){
    if(f.fbq)return;
    n=f.fbq=function(){n.callMethod?
    n.callMethod.apply(n,arguments):n.queue.push(arguments)};
    if(!f._fbq)f._fbq=n;
    n.push=n;n.loaded=!0;
    n.version='2.0';
    n.queue=[];
    t=b.createElement(e);
    t.async=!0;
    t.src=v;
    s=b.getElementsByTagName(e)[0];
    s.parentNode.insertBefore(t,s)
}(window,document,'script','https://connect.facebook.net/en_US/fbevents.js');

document.addEventListener("ike_event_view", function( e ) {
  fbq('init', '14085424191xxxxx');
  fbq('track', "PageView");
  fbq('track', 'InitiateCheckout');
});

document.addEventListener("ike_cart_payment_launched", function( e ) {
  fbq('init', '14085424191xxxxx');
  fbq('track', "PageView");
  fbq('track', 'Purchase', {value: e.detail.topaid, currency: e.detail.currency.name});
});

… y para Google Tag Manager (GTM) + gtag.js:

window.dataLayer = window.dataLayer || [ ];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'UA-xxxxxxx-x');

document.addEventListener("ike_event_view", function( e ) {
  gtag('event', 'view_item', {
    'event_category' : e.detail.name,
    'event_label' : e.detail.date
  });
});

document.addEventListener("ike_cart_add", function( e ) {
  gtag('event', 'add_to_cart');
});

document.addEventListener("ike_cart_confirm", function( ) {
  gtag('event', 'checkout_progress', {
    'event_category' :'valid cart'
  });
});

document.addEventListener("ike_cart_payment_launched", function( e ) {
  gtag('event', 'add_payment_info', {
    'event_category' : 'paiement',
    'event_label' : e.detail.currency.name,
    'value': e.detail.topaid
  });
});

En Google Tag Manager, asegúrese de que el formato de las etiquetas se respete correctamente:

(view_item|add_cart|add_payment_info)

CSP y su impacto en el seguimiento de conversiones

La “Política de seguridad de contenido” (CSP) es una política de seguridad web que protege las páginas contra ciertos ataques, como el scripting entre sitios (XSS) y la inyección de contenido malicioso. Sin embargo, también puede bloquear algunos scripts legítimos, como los píxeles de seguimiento de Meta o Google Tag Manager, lo que impide el correcto funcionamiento del seguimiento de conversiones.

¿Por qué algunos píxeles no funcionan?

Si su sitio web muestra un error relacionado con la política de seguridad de contenido (CSP), especialmente en la consola o en la pestaña de red de las herramientas de desarrollo del navegador, esto significa que algunos scripts de terceros (como las etiquetas de Google o los píxeles de Meta (Facebook)) están bloqueados. Para garantizar el correcto funcionamiento del seguimiento de conversiones en su tienda, es necesario agregar una excepción específica en la configuración de CSP de su sitio para permitir los recursos utilizados por el sistema de venta de entradas de Infomaniak.

Principales directivas de CSP que afectan al seguimiento

• script-src: define las fuentes permitidas para los scripts.
• img-src: controla las imágenes (incluidas las etiquetas <img> utilizadas para los píxeles de seguimiento).
• connect-src: gestiona las solicitudes de seguimiento enviadas a los servidores de las herramientas de marketing.

Por ejemplo, si utiliza Google Tag Manager o Facebook Pixel, asegúrese de que su política CSP autorice explícitamente la carga de scripts y el envío de datos a sus dominios. Aquí tiene un ejemplo de directivas que puede incluir en su CSP, que deberá adaptar según su configuración:

script-src 'self' https://www.googletagmanager.com https://www.google-analytics.com https://connect.facebook.net;
img-src 'self' https://www.google-analytics.com https://www.facebook.com;
connect-src 'self' https://www.google-analytics.com https://www.facebook.com;

Google proporciona una guía detallada sobre la configuración de CSP compatible con sus herramientas de seguimiento.

Verifique también que su sistema de gestión de seguridad (firewall de aplicaciones, CDN, CMS) no bloquee estos recursos y aplique los ajustes necesarios para permitir el correcto funcionamiento de los eventos de seguimiento.

Si su CSP es demasiado restrictiva, puede impedir la carga de scripts de terceros como:

• Píxel de Facebook (connect.facebook.net)
• Google Tag Manager (GTM) (www.googletagmanager.com)
• Google Analytics (www.google-analytics.com)

Errores visibles en la consola del desarrollador (Herramientas de desarrollo del navegador):

Se denegó la carga del script 'https://connect.facebook.net/en_US/fbevents.js'
porque viola la siguiente directiva de la política de seguridad de contenido: "script-src 'self'"

• Ausencia de datos en Google Analytics o Facebook Ads Manager.
• Error al activar los eventos definidos en GTM.

Cuando la CSP bloquea estos recursos, no pueden recopilar datos sobre los visitantes ni registrar eventos de conversión.

Lista completa de los activadores

Página de inicio:

activador: ike_home_view
Datos: ninguno

document.addEventListener("ike_home_view", function(e) {
  //enviar a su herramienta de seguimiento
});

Página de evento:

Página de un evento con múltiples fechas
disparador: ike_event_view
Datos: detail.name

document.addEventListener("ike_event_view", function(e) {
  console.log(e.detail.name); 
  //enviar a su herramienta de seguimiento
});
```
Página de fecha:

Date page:

Página con la fecha de un evento
disparador: ike_date_view
Datos: detail.name, detail.date

document.addEventListener("ike_date_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //enviar a su herramienta de seguimiento
});

Página de acceso:

Página de una categoría de acceso
disparador: ike_abo_view
Datos: detail.name

```html
document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  //enviar a su herramienta de seguimiento
});
```
Página de selección de plan:

Pass selection page:

Página de selección de fechas de los pases
disparador: ike_abo_selection
Datos: detalle (detalles del carrito)

document.addEventListener("ike_abo_selection", function(e) {
  console.log(e.detail.name, e.detail.date);
  //enviar a su herramienta de seguimiento
});

Inicio de sesión del usuario:

Se activa tras un inicio de sesión exitoso.
Activador: ike_user_login
Datos: detalles (detalles del carrito)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Cierre de sesión del usuario:

User logout:

activador: ike_user_logout
Datos: detalle (detalles del carrito)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Añadir al carrito:

Se activa cuando se añade un elemento al carrito

Activador: ike_cart_add
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Página del carrito:

Activador: ike_cart_view
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Actualización del carrito:

Cart update:

Se activa cuando se actualiza un elemento del carrito

Activador: ike_cart_update
Datos: detalles (detalles del carrito)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Carrito vacío:

Cart empty:

Se activa al pulsar el botón vacío

Activador: ike_cart_empty
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Confirmación del carrito:

Cart confirm:

Se activa al pulsar el botón de confirmación

Activador: ike_cart_confirm
Datos: detalle (detalles del carrito)

```html
document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Página de confirmación del carrito:

Cart delivery page:

activador: ike_cart_delivery_view
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Página del formulario del carrito:

Activador: ike_cart_form_view
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Página de pago del carrito:

activador: ike_cart_payment_view
Datos: detalle (detalles del carrito con paymentMethodSelected)

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Cambio en el método de pago del carrito:

Activador: ike_cart_payment_changed
Datos: detail.path

document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Pago del carrito lanzado:

Cart payment launched:

activador: ike_cart_payment_launched
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Página de confirmación del pago con tarjeta:

Activador: ike_cart_payment_success
Datos: detalle (detalles del carrito)

document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});
```
Eliminar artículo del carrito:

Cart delete item:

activador: ike_cart_delete
Datos: detalle (previousCart y newCart)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  //enviar a su herramienta de seguimiento
});

Página modificada:

Activador: ike_page_changed
Datos: detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  //envíe los datos a su herramienta de seguimiento
});