Ce guide vous donne la liste des triggers à utiliser pour vos pisteurs de type Google Tags et pixel Meta (Facebook) de votre boutique (dans le cadre du système de billetterie Infomaniak).

Exemples de pixel Meta et Google Tags

Prenez connaissance de la documentation externe pour le 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});
});

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

Sur le Google Tag Manager, bien s’assurer que le format pour les tags soit bien respecté:

(view_item|add_cart|add_payment_info)

CSP et son impact sur le suivi des conversions

La “Content Security Policy” (CSP) est une politique de sécurité Web qui protège les pages contre certaines attaques comme le Cross-Site Scripting (XSS) et l’injection de contenu malveillant. Cependant, elle peut également bloquer certains scripts légitimes, comme les pixels de suivi Meta ou Google Tag Manager, empêchant ainsi le bon fonctionnement du suivi des conversions.

Pourquoi certains pixels ne fonctionnent pas ?

Si votre CSP est trop restrictive, elle peut empêcher le chargement des scripts tiers comme :

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

Erreurs visibles dans la console développeur (Outils de développement du navigateur) :

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

• Absence de données dans Google Analytics ou Facebook Ads Manager.
• Échec de déclenchement des événements définis dans GTM.

Lorsque la CSP bloque ces ressources, elles ne peuvent pas collecter de données sur les visiteurs ou enregistrer des événements de conversion.

Principales directives CSP impactant le tracking

• script-src : définit les sources autorisées pour les scripts.
• img-src : contrôle les images (y compris les balises <img> utilisées pour les pixels de suivi).
• connect-src : gère les requêtes de suivi envoyées aux serveurs des outils marketing.

Liste complète des triggers

Home page:

trigger : ike_home_view
Datas : none

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

Event page:

Page of an event with multiple dates
trigger : ike_event_view
Datas : detail.name

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

Date page:

Page of a date of an even
trigger : ike_date_view
Datas : 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:

Page of a pass category 
trigger : ike_abo_view
Datas : detail.name

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

Pass selection page:

Page of passes dates selection 
trigger : ike_abo_selection
Datas : detail (cart details)

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

User login:

Triggered login success 
trigger : ike_user_login
Datas : detail (cart details)

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

User logout:

trigger : ike_user_logout
Datas : detail (cart details)

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

Cart add:

Triggered when element added to cart

trigger : ike_cart_add
Datas : detail (cart details)

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

Cart page:

trigger : ike_cart_view
Datas : detail (cart details)

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

Cart update:

Triggered when a cart element is updated

trigger : ike_cart_update
Datas : detail (cart details)

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

Cart empty:

Triggered when empty button pressed

trigger : ike_cart_empty
Datas : detail (cart details)

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

Cart confirm:

Triggered when confirm button pressed

trigger : ike_cart_confirm
Datas : detail (cart details)

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

Cart delivery page:

trigger : ike_cart_delivery_view
Datas : detail (cart details)

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

Cart form page:

trigger : ike_cart_form_view
Datas : detail (cart details)

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

Cart payment page:

trigger : ike_cart_payment_view 
Datas : detail (cart details with paymentMethodSelected)

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

Cart payment changed:

trigger : ike_cart_payment_changed
Datas : detail.path

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

Cart payment launched:

trigger : ike_cart_payment_launched
Datas : detail (cart details)

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

Cart payment success page:

trigger : ike_cart_payment_success
Datas : detail (cart details)

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

Cart delete item:

trigger : ike_cart_delete
Datas : detail (previosCart and newCart)

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

Page Changed:

trigger : ike_page_changed
Datas : detail.path

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