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).

Requisitos previos

• Póngase en contacto con el servicio de asistencia de Infomaniak si desea activar esta función.
• Estos activadores deben insertarse en la sección “HEAD” de las opciones avanzadas de su tienda.

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','{{URL_4}}');

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, 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.

Directivas CSP principales 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. A continuación, se muestra un ejemplo de directivas que puede incluir en su CSP, que deberá adaptar según su configuración:

script-src 'self' {{URL_7}} {{URL_8}} {{URL_9}}
img-src 'self' {{URL_10}} {{URL_11}}
connect-src 'self' {{URL_12}} {{URL_13}}

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 que los eventos de seguimiento se activen correctamente.

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):

Refused to load the script '{{URL_15}}'
because it violates the following Content Security Policy directive: "script-src 'self'"

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

Cuando la CSP bloquea estos recursos, estos 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) {
  //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_event_view", function(e) {
  console.log(e.detail.name); 
  //send to your tracking tool
});

Página de fecha:

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

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

Página de acceso:

Página de una categoría de acceso
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 planes:

Página para seleccionar las fechas de los planes
disparador: ike_abo_selection
Datos: detalles (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:

Se activa al iniciar sesión correctamente.
Activador: ike_user_login
Datos: detalles (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:

Activador: ike_user_logout
Datos: detalles (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

Activador: 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:

Activador: 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

Activador: ike_cart_update
Datos: detalles (detalles del carrito)

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

Carrito vacío:

Se activa al pulsar el botón de "vaciar"

Activador: ike_cart_empty
Datos: detalle (detalles del carrito)

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

Confirmación del carrito:

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

Activador: 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:

Activador: 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:

Activador: 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 con tarjeta:

Activador: ike_cart_payment_view
Datos: detalle (detalles del carrito con el método de pago seleccionado)

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

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

Pago con tarjeta activado:

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

Eliminar artículo del carrito:

Activador: ike_cart_delete
Datos: detalle (carrito anterior y carrito nuevo)

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

Página modificada:

Activador: ike_page_changed
Datos: detail.path

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