Questa guida fornisce l'elenco dei trigger da utilizzare per i tracker di tipo Google Tags e pixel Meta (Facebook) del tuo negozio online (nell'ambito del sistema di biglietteria Infomaniak).

Esempi di pixel Meta e tag di Google

Consulta la documentazione esterna relativa al 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});
});

… e per 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
  });
});

Su Google Tag Manager, assicurati che il formato dei tag sia rispettato:

(view_item|add_cart|add_payment_info)

CSP e il suo impatto sul monitoraggio delle conversioni

La “Content Security Policy” (CSP) è una politica di sicurezza web che protegge le pagine da determinati attacchi, come il Cross-Site Scripting (XSS) e l’iniezione di contenuti dannosi. Tuttavia, può anche bloccare alcuni script legittimi, come i pixel di tracciamento di Meta o Google Tag Manager, impedendo così il corretto funzionamento del monitoraggio delle conversioni.

Perché alcuni pixel non funzionano?

Se il tuo sito web mostra un errore relativo alla Content Security Policy (CSP), in particolare nella console o nella scheda Rete degli strumenti di sviluppo del browser, significa che alcuni script di terze parti, come i tag di Google o i pixel di Meta (Facebook), sono bloccati. Per garantire il corretto funzionamento del monitoraggio delle conversioni nel tuo negozio online, è necessario aggiungere un'eccezione specifica nella configurazione CSP del tuo sito per consentire le risorse utilizzate dal sistema di biglietteria di Infomaniak.

Principali direttive CSP che influiscono sul monitoraggio

• script-src: definisce le origini consentite per gli script.
• img-src: controlla le immagini (incluse le tag <img> utilizzate per i pixel di tracciamento).
• connect-src: gestisce le richieste di tracciamento inviate ai server degli strumenti di marketing.

Ad esempio, se utilizzi Google Tag Manager o Facebook Pixel, assicurati che la tua policy CSP autorizzi esplicitamente il caricamento degli script e l'invio di dati ai loro domini. Ecco un esempio di direttive da includere nella tua CSP, da adattare in base alla tua configurazione:

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 fornisce una guida dettagliata sulla configurazione di CSP compatibile con i suoi strumenti di monitoraggio.

Verificare inoltre che il sistema di gestione della sicurezza (firewall applicativo, CDN, CMS) non blocchi queste risorse e apportare le modifiche necessarie per consentire il corretto avvio degli eventi di tracciamento.

Se la CSP (Content Security Policy) è troppo restrittiva, potrebbe impedire il caricamento degli script di terze parti come:

• Facebook Pixel (connect.facebook.net)
• Google Tag Manager (GTM) (www.googletagmanager.com)
• Google Analytics (www.google-analytics.com)

Errori visibili nella console per sviluppatori (Strumenti di sviluppo del browser):

Mancanza di dati in Google Analytics o Facebook Ads Manager.

• Absence de données dans Google Analytics ou Facebook Ads Manager.
• Impossibile attivare gli eventi definiti in GTM.

Quando la CSP blocca queste risorse, queste non possono raccogliere dati sui visitatori o registrare eventi di conversione.

Elenco completo dei trigger

Pagina iniziale:

trigger: ike_home_view
Dati: nessuno

document.addEventListener("ike_home_view", function(e) {
  //invia ai tuoi strumenti di monitoraggio
});

Pagina evento:

Pagina di un evento con più date
trigger: ike_event_view
Dati: detail.name

document.addEventListener("ike_event_view", function(e) {
  console.log(e.detail.name); 
  //invia i dati al tuo strumento di monitoraggio
});
```
Pagina data:

Date page:

Pagina con la data di un evento
trigger: ike_date_view
Dati: detail.name, detail.date

document.addEventListener("ike_date_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //invia ai tuoi strumenti di monitoraggio
});

Pagina di un tipo di abbonamento:

Pagina di una categoria di abbonamento
trigger: ike_abo_view
Dati: detail.name

document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  //invia i dati al tuo strumento di monitoraggio
});
```
Pagina di selezione dell'abbonamento:

Pass selection page:

Pagina di selezione delle date degli abbonamenti
trigger: ike_abo_selection
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_abo_selection", function(e) {
  console.log(e.detail.name, e.detail.date);
  //invia ai tuoi strumenti di monitoraggio
});

Accesso utente:

Attivato in caso di accesso riuscito
trigger: ike_user_login
Dati: dettagli (dettagli del carrello)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Logout utente:

User logout:

trigger: ike_user_logout
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Aggiunta al carrello:

Attivato quando un elemento viene aggiunto al carrello

trigger: ike_cart_add
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Pagina del carrello:

trigger: ike_cart_view
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Aggiornamento del carrello:

Cart update:

Attivato quando un elemento del carrello viene aggiornato

trigger: ike_cart_update
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Carrello vuoto:

Cart empty:

Attivato quando viene premuto il pulsante vuoto

trigger: ike_cart_empty
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Conferma ordine:

Cart confirm:

Attivato quando viene premuto il pulsante di conferma

trigger: ike_cart_confirm
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Pagina di conferma dell'ordine:

Cart delivery page:

trigger: ike_cart_delivery_view
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Pagina del modulo carrello:

trigger: ike_cart_form_view
Dati: dettaglio (dettagli del carrello)

```html
document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Pagina di pagamento del carrello:

Cart payment page:

trigger: ike_cart_payment_view
Dati: dettaglio (dettagli del carrello con paymentMethodSelected)

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Modifica del metodo di pagamento per il carrello:

trigger: ike_cart_payment_changed
Dati: detail.path

document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Pagamento del carrello avviato:

Cart payment launched:

trigger: ike_cart_payment_launched
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Pagina di conferma del pagamento con carta:

trigger: ike_cart_payment_success
Dati: dettaglio (dettagli del carrello)

document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});
```
Eliminazione di un articolo dal carrello:

Cart delete item:

trigger: ike_cart_delete
Dati: dettaglio (carrello precedente e nuovo carrello)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  //invia ai tuoi strumenti di monitoraggio
});

Pagina modificata:

trigger: ike_page_changed
Dati: detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  //invia i dati al tuo strumento di monitoraggio
});