1000 FAQs, 500 tutorials and explanatory videos. Here, there are only solutions!
Ticketing: insert a Meta / Google tracker on the store
This guide provides the list of triggers to use for your trackers of type Google Tags and Meta pixel (Facebook) for your store (as part of the ticketing system Infomaniak).
These triggers must be inserted into the “HEAD” section of the advanced options on your store.
Examples of Meta pixel and Google Tags
Refer to the external documentation for the Meta pixel:
!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});
});
… and for the 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
});
});
On Google Tag Manager, make sure the format for the tags is strictly followed:
(view_item|add_cart|add_payment_info)
CSP and its impact on conversion tracking
The “Content Security Policy” (CSP) is a web security policy that protects pages against certain attacks such as Cross-Site Scripting (XSS) and malicious content injection. However, it can also block certain legitimate scripts, such as Meta tracking pixels or Google Tag Manager, thus preventing the proper functioning of conversion tracking.
Why don't some pixels work?
If your CSP is too restrictive, it can prevent the loading of third-party scripts such as:
- Facebook Pixel (connect.facebook.net)
- Google Tag Manager (GTM) (www.googletagmanager.com)
- Google Analytics (www.google-analytics.com)
Errors visible in the developer console (Browser development tools):
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'"
- Missing data in Google Analytics or Facebook Ads Manager.
- Failure to trigger events defined in GTM.
When the CSP blocks these resources, they cannot collect data on visitors or record conversion events.
Main CSP directives impacting tracking
script-src
: defines the allowed sources for scripts.img-src
: controls images (including the<img>
tags used for tracking pixels).connect-src
: manages tracking requests sent to the servers of marketing tools.
Full list of triggers
Home page:
trigger: ike_home_view
Data: 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
Data: 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 event
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 for selecting pass dates
trigger: ike_abo_selection
Data: 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:
Login successful
trigger: ike_user_login
Data: details (cart details)
document.addEventListener("ike_user_login", function(e) {
console.log(e.detail);
//send to your tracking tool
});
User logout:
trigger: ike_user_logout
Data: detail (cart details)
document.addEventListener("ike_user_logout", function(e) {
console.log(e.detail);
//send to your tracking tool
});
Cart add:
Triggered when an item is added to the cart
trigger: ike_cart_add
Data: 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
Data: 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 item is updated
trigger: ike_cart_update
Data: detail (cart details)
document.addEventListener("ike_cart_update", function(e) {
console.log(e.detail);
//send to your tracking tool
});
Cart empty:
Triggered when the empty button is pressed
trigger: ike_cart_empty
Data: detail (cart details)
document.addEventListener("ike_cart_empty", function(e) {
console.log(e.detail);
//send to your tracking tool
});
Cart confirm:
Triggered when the confirm button is pressed
trigger: ike_cart_confirm
Data: 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
Data: 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
Data: 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
Data: 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
Data: 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
Data: 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
Data: 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
Data: detail (previousCart and newCart)
document.addEventListener("ike_cart_delete", function(e) {
console.log(e.detail);
//send to your tracking tool
});
Page Changed:
trigger: ike_page_changed
Data: detail.path
document.addEventListener("ike_page_changed", function(e) {
console.log(e.detail);
//send to your tracking tool
});