Esta guía le proporciona la lista de triggers a utilizar para 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 el Google Tag Manager, asegúrese 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 su sitio web muestra un error relacionado con la Content Security Policy (CSP), especialmente en la consola o la pestaña de red de las herramientas de desarrollo del navegador, esto significa que ciertos 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 CSP de su sitio para permitir los recursos utilizados por la billetterie Infomaniak.

Principales directivas CSP que afectan el seguimiento

• script-src‍ : define las fuentes autorizadas 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 permita explícitamente la carga de scripts y el envío de datos a sus dominios. A continuación, se muestra un ejemplo de directivas a 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.

También verifique 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 desencadenamiento de los eventos de seguimiento.

Si su 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 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 disparadores

Página de inicio:

disparador : ike_home_view
Datos : none

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

Página de evento:

Página de un evento con múltiples fechas
disparador : 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
disparador : 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 suscripción:

Página de una categoría de suscripción
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 suscripción:

Página de selección de fechas de suscripción
disparador : ike_abo_selection
Datos : detail (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
disparador : ike_user_login
Datos : detail (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 : detail (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 : detail (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 : detail (detalles del carrito)

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

Actualizar carrito:

Se activa cuando se actualiza un elemento del carrito

disparador : ike_cart_update
Datos : detail (detalles del carrito)

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

Vaciar carrito:

Se activa cuando se presiona el botón de vaciar

disparador : ike_cart_empty
Datos : detail (detalles del carrito)

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

Confirmar carrito:

Se activa cuando se presiona el botón de confirmar

disparador : ike_cart_confirm
Datos : detail (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:

disparador : 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 
});

Pago del carrito cambiado:

disparador : ike_cart_payment_changed
Datos : detalle.path

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

Pago del carrito lanzado:

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 de 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 : detalle.path

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