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

Esempi di pixel Meta e Google Tags

Consultate 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
  });
});

Assicuratevi che il formato per i tag sia rispettato correttamente sul Google Tag Manager:

(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 vostro sito web visualizza un errore relativo alla Content Security Policy (CSP), in particolare nella console o nella scheda rete degli strumenti di sviluppo del browser, ciò 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 vostro negozio, è necessario aggiungere un'eccezione specifica nella configurazione CSP del vostro sito per autorizzare le risorse utilizzate dalla biglietteria 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 utilizzate Google Tag Manager o Facebook Pixel, assicuratevi che la vostra politica CSP autorizzi esplicitamente il caricamento degli script e l'invio di dati ai loro domini. Ecco un esempio di direttive da includere nella vostra CSP, da adattare in base alla vostra 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 modifiche necessarie per consentire il corretto innesco degli eventi di tracciamento.

Se la vostra 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.
• Fallimento del 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

Home page:

trigger : ike_home_view
Dati : nessuno

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

Event page:

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

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

Date page:

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

Pass page:

Pagina di una categoria di 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
});

Pass selection page:

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

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

User login:

Login di successo attivato
trigger : ike_user_login
Dati : detail (dettagli del carrello)

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

User logout:

trigger : ike_user_logout
Dati : detail (dettagli del carrello)

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

Cart add:

Attivato quando un elemento viene aggiunto al carrello

trigger : ike_cart_add
Dati : detail (dettagli del carrello)

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

Cart page:

trigger : ike_cart_view
Dati : detail (dettagli del carrello)

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

Cart update:

Attivato quando un elemento del carrello viene aggiornato

trigger : ike_cart_update
Dati : detail (dettagli del carrello)

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

Cart empty:

Attivato quando viene premuto il pulsante di svuotamento

trigger : ike_cart_empty
Dati : detail (dettagli del carrello)

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

Cart confirm:

Attivato quando viene premuto il pulsante di conferma

trigger : ike_cart_confirm
Dati : detail (dettagli del carrello)

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

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);
  //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 : dettaglio.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 del pagamento del 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
});

Eliminazione di un 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 : dettaglio.path

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