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

Esempi di pixel Meta e Google Tags

Consulta la documentazione esterna per il 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 il 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
  });
});

Su Google Tag Manager, assicurati che il formato per i tag sia rispettato correttamente:

(view_item|add_cart|add_payment_info)

CSP e il suo impatto sul tracciamento delle conversioni

La “Content Security Policy” (CSP) è una politica di sicurezza web che protegge le pagine da alcuni 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 Meta o Google Tag Manager, impedendo così il corretto funzionamento del tracciamento delle conversioni.

Perché alcuni pixel non funzionano?

Se il tuo sito web mostra un errore legato 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 Google o i pixel Meta (Facebook) - sono bloccati. Per garantire il corretto funzionamento del tracciamento delle conversioni nel tuo negozio, è necessario aggiungere un'eccezione specifica nella configurazione CSP del tuo sito per autorizzare le risorse utilizzate dalla billetteria Infomaniak.

Principali direttive CSP che influenzano il tracciamento

• script-src‍ : definisce le fonti autorizzate per gli script.
• img-src‍ : controlla le immagini (inclusi i tag <img> utilizzati 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 politica CSP consenta esplicitamente il caricamento degli script e l'invio dei 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 CSP compatibile con i suoi strumenti di tracciamento.

Verificate anche che il vostro sistema di gestione della sicurezza (firewall applicativo, CDN, CMS) non blocchi queste risorse e apportate le necessarie modifiche per permettere il corretto innesco degli eventi di tracciamento.

Se la tua CSP è troppo restrittiva, può 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 dello sviluppatore (Strumenti di sviluppo del browser) :

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'"

• Assenza di dati in Google Analytics o Facebook Ads Manager.
• Errore nel trigger degli eventi definiti in GTM.

Quando la CSP blocca queste risorse, 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) {
  //send to your tracking tool
});

Pagina evento:

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

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

Pagina della data:

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

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

Pagina Pass:

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

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

Pagina di selezione dei pass:

Pagina di selezione delle date dei pass
trigger : ike_abo_selection
Dati : dettaglio (dettagli del carrello)

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

Accesso utente:

Accesso effettuato con successo
trigger : ike_user_login
Dati : dettaglio (dettagli del carrello)

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

Disconnessione utente:

trigger : ike_user_logout
Dati : dettaglio (dettagli del carrello)

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

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

Pagina del carrello:

trigger : ike_cart_view
Dati : dettaglio (dettagli del carrello)

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

Aggiornamento carrello:

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

Carrello vuoto:

Attivato quando viene premuto il pulsante vuota

trigger : ike_cart_empty
Dati : dettaglio (dettagli del carrello)

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

Carrello confermato:

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

Pagina di consegna del carrello:

trigger : ike_cart_delivery_view
Dati : dettaglio (dettagli del carrello)

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

Pagina del modulo del carrello:

trigger : ike_cart_form_view
Dati : dettaglio (dettagli del carrello)

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

Pagina di pagamento del carrello:

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

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

Pagamento del carrello modificato:

trigger : ike_cart_payment_changed
Dati : detail.path

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

Pagamento del carrello avviato:

trigger : ike_cart_payment_launched
Dati : dettaglio (dettagli del carrello)

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

Pagina di successo pagamento carrello:

trigger : ike_cart_payment_success
Dati : dettaglio (dettagli del carrello)

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

Cancella elemento dal carrello:

trigger : ike_cart_delete
Dati : dettaglio (previosCart e newCart)

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

Pagina cambiata:

trigger : ike_page_changed
Dati : detail.path

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