Esta guía le proporciona la lista de disparadores para usar con sus rastreadores de tipo Google Tags y pixel Meta (Facebook) de su tienda (en el marco del sistema de billetterie Infomaniak).

Ejemplos de pixel Meta y Google Tags

Consulte la documentación externa para el pixel 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 el 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.name,
    'event_label' : e.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úrate de que el formato para las etiquetas se respete correctamente:

(view_item|add_cart|add_payment_info)

CSP y su impacto en el seguimiento de conversiones

La “Content Security Policy” (CSP) es una política de seguridad web que protege las páginas contra ciertos ataques como el Cross-Site Scripting (XSS) y la inyección de contenido malicioso. Sin embargo, también puede bloquear ciertos scripts legítimos, como los píxeles de seguimiento Meta o Google Tag Manager, impidiendo así el correcto funcionamiento del seguimiento de conversiones.

¿Por qué algunos píxeles no funcionan?

Si tu sitio web muestra un error relacionado con la Política de Seguridad de Contenidos (CSP), especialmente en la consola o 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 tu tienda, es necesario agregar una excepción específica en la configuración de CSP de tu sitio para permitir los recursos utilizados por la billetería Infomaniak.

Principales directivas CSP que afectan el seguimiento

• script-src‍ : define las fuentes permitidas para los scripts.
• img-src‍ : controla las imágenes (incluyendo 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 usa Google Tag Manager o Facebook Pixel, asegúrese de que su política CSP permita explícitamente la carga de scripts y el envío de datos a sus dominios. Aquí tiene un ejemplo de directivas para incluir en su CSP, que debe 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 CSP compatible con sus herramientas de seguimiento.

Asegúrese también de que su sistema de gestión de seguridad (firewall aplicativo, CDN, CMS) no bloque estos recursos, y aplique los ajustes necesarios para permitir el correcto desencadenamiento de los eventos de seguimiento.

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

• Facebook Pixel (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) :

Refused to load the script 'https://connect.facebook.net/en_US/fbevents.js'
because it violates the following Content Security Policy directive: "script-src 'self'"

• Falta de datos en Google Analytics o Facebook Ads Manager.
• Fallo en el disparo de los eventos definidos en GTM.

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

Lista completa de disparadores

Página de inicio:

Disparador : ike_home_view
Datos : ninguno

document.addEventListener("ike_home_view", function(e) {
  //send to your tracking tool
});

Página del evento:

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

document.addEventListener("ike_home_view", function(e) {
  console.log(e.detail.name);  
  //send to your tracking tool
});

Página de fecha:

Página de una fecha de un evento
trigger : ike_date_view
Datos : detail.name, detail.date

document.addEventListener("ike_home_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //send to your tracking tool
});

Página de pase:

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

document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  //send to your tracking tool
});

Página de selección de pases:

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);
//send to your tracking tool
});

Inicio de sesión del usuario:

Inicio de sesión exitoso
trigger : ike_user_login
Datos : detalle (detalles del carrito)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Cierre de sesión del usuario:

Disparador : ike_user_logout
Datos : detalle (detalles del carrito)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Añadir al carrito:

Se activa cuando se añade un elemento al carrito

Disparador : ike_cart_add
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página del carrito:

Disparador : ike_cart_view
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Actualización del carrito:

Se activa cuando se actualiza un elemento del carrito

Disparador : ike_cart_update
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Cesta vacía:

Se activa cuando se presiona el botón de vaciar

disparador : ike_cart_empty
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Carrito confirmado:

Se activa cuando se presiona el botón de confirmar

disparador : ike_cart_confirm
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de entrega del carrito:

disparador : ike_cart_delivery_view
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página del formulario del carrito:

disparador : ike_cart_form_view
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de pago del carrito:

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

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  //send to your tracking tool 
});

Cambio de pago del carrito:

disparador : ike_cart_payment_changed
Datos : detail.path

document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Pago del carrito iniciado:

disparador : ike_cart_payment_launched
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página de éxito del pago del carrito:

disparador : ike_cart_payment_success
Datos : detalle (detalles del carrito)

document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Eliminar artículo del carrito:

disparador : ike_cart_delete
Datos : detalle (previosCart y newCart)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});

Página Cambiada:

disparador : ike_page_changed
Datos : detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  //send to your tracking tool
});