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

Prerequisiti

• Contatta l'assistenza Infomaniak se desideri attivare questa funzionalità.
• Questi script devono quindi essere inseriti nella sezione “HEAD” delle opzioni avanzate del tuo negozio online.

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

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

In Google Tag Manager, assicurati che il formato dei tag sia corretto:

(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 Infomaniak.

Principali direttive CSP che influiscono sul tracciamento

• 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 rispettivi domini. Ecco un esempio di direttive da includere nella tua CSP, da adattare in base alla tua configurazione:

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

Google fornisce una guida dettagliata sulla configurazione CSP compatibile con i suoi strumenti di tracciamento.

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

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

• Mancanza di dati in Google Analytics o Facebook Ads Manager.
• Impossibilità di 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) {
  //send to your tracking tool
});

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

Pagina data:

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

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

Pagina di selezione degli abbonamenti:

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

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

Disconnessione utente:

evento: 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 del 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 "Svuota"

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

Conferma carrello:

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 gestione delle consegne degli articoli nel carrello:

Evento: 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 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 con carta:

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

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

Avvio del pagamento tramite carta:

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

Eliminazione di un elemento dal carrello:

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

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

Pagina modificata:

trigger: ike_page_changed
Dati: detail.path

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