Deze handleiding bevat een lijst met triggers die u kunt gebruiken voor uw Google Tags- en Meta-pixel-trackers (Facebook) in uw webshop (in het kader van het Infomaniak-ticketsysteem).

Voorbeelden van Meta-pixels en Google Tags

Raadpleeg de externe documentatie voor de 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});
});

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

Zorg ervoor dat het formaat van de tags in Google Tag Manager correct is:

(view_item|add_cart|add_payment_info)

CSP en de gevolgen voor conversietracking

De "Content Security Policy" (CSP) is een webbeveiligingsrichtlijn die pagina's beschermt tegen bepaalde aanvallen, zoals cross-site scripting (XSS) en het injecteren van schadelijke inhoud. Het kan echter ook bepaalde legitieme scripts blokkeren, zoals Meta-trackingpixels of Google Tag Manager, waardoor de juiste werking van de conversietracking wordt belemmerd.

Waarom werken sommige pixels niet?

Als uw website een foutmelding weergeeft die verband houdt met het Content Security Policy (CSP), met name in de console of het netwerktabblad van de ontwikkelaarstools van de browser, betekent dit dat bepaalde scripts van derden – zoals Google-tags of Meta-pixels (Facebook) – worden geblokkeerd. Om de correcte werking van conversie-tracking in uw webshop te garanderen, is het noodzakelijk om een specifieke uitzondering toe te voegen aan de CSP-configuratie van uw website, zodat de bronnen die door de Infomaniak-ticketingsoplossing worden gebruikt, worden toegestaan.

Belangrijke CSP-richtlijnen die de tracking beïnvloeden

• script-src‍: Bepaalt de toegestane bronnen voor scripts.
• img-src‍: Regelt de afbeeldingen (inclusief de <img>-tags die worden gebruikt voor tracking-pixels).
• connect-src‍: Beheert de tracking-verzoeken die naar de servers van de marketingtools worden verzonden.

Als u bijvoorbeeld Google Tag Manager of Facebook Pixel gebruikt, zorg er dan voor dat uw CSP-richtlijn expliciet het laden van scripts en het verzenden van gegevens naar hun domeinen toestaat. Hieronder vindt u een voorbeeld van richtlijnen die u in uw CSP kunt opnemen, aangepast aan uw configuratie:

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 biedt een gedetailleerde handleiding voor het configureren van een CSP die compatibel is met zijn trackingtools.

Zorg er ook voor dat uw beveiligingssysteem (applicatie-firewall, CDN, CMS) deze bronnen niet blokkeert en neem de nodige aanpassingen door om de correcte uitvoering van de tracking-gebeurtenissen mogelijk te maken.

Als uw CSP te restrictief is, kan dit het laden van scripts van derden voorkomen, zoals:

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

Fouten zichtbaar in de ontwikkelaarsconsole (ontwikkelhulpmiddelen) van de 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'"

• Ontbrekende gegevens in Google Analytics of Facebook Ads Manager.
• Het activeren van gebeurtenissen die in GTM zijn gedefinieerd, mislukt.

Als de CSP deze bronnen blokkeert, kunnen er geen gegevens over bezoekers worden verzameld of conversiegebeurtenissen worden vastgelegd.

Volledige lijst van triggers

Startpagina:

Trigger: ike_home_view
Gegevens: geen

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

Evenementpagina:

Pagina van een evenement met meerdere data
Trigger: ike_event_view
Gegevens: detail.name

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

Datumpagina:

Pagina van een datum van een evenement
Trigger: ike_date_view
Gegevens: detail.name, detail.date

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

Paspagina:

Pagina van een pascategorie
Trigger: ike_abo_view
Gegevens: detail.name

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

Passelectiepagina:

Pagina voor het selecteren van pasdata
Trigger: ike_abo_selection
Gegevens: detail (winkelwageninformatie)

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

Gebruikersaanmelding:

Succesvolle aanmelding geactiveerd
Trigger: ike_user_login
Gegevens: detail (winkelwageninformatie)

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

Gebruikersafmelding:

Trigger: ike_user_logout
Gegevens: detail (winkelwageninformatie)

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

Item toevoegen aan winkelwagen:

Wordt geactiveerd wanneer een item aan de winkelwagen wordt toegevoegd

Trigger: ike_cart_add
Gegevens: detail (winkelwageninformatie)

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

Winkelwagenpagina:

Trigger: ike_cart_view
Gegevens: detail (winkelwageninformatie)

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

Winkelwagen bijwerken:

Wordt geactiveerd wanneer een item in de winkelwagen wordt bijgewerkt

Trigger: ike_cart_update
Gegevens: detail (winkelwageninformatie)

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

Winkelwagen legen:

Wordt geactiveerd wanneer de spatiebalk wordt ingedrukt

Trigger: ike_cart_empty
Gegevens: detail (winkelwageninformatie)

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

Winkelwagen bevestigen:

Wordt geactiveerd wanneer de bevestigingsknop wordt ingedrukt

Trigger: ike_cart_confirm
Gegevens: detail (winkelwageninformatie)

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

Leveringspagina van de winkelwagen:

Trigger: ike_cart_delivery_view
Gegevens: detail (winkelwageninformatie)

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

Winkelwagenformulierpagina:

Trigger: ike_cart_form_view
Gegevens: detail (winkelwageninformatie)

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

Winkelwagenbetalingspagina:

Trigger: ike_cart_payment_view
Gegevens: detail (winkelwageninformatie met paymentMethodSelected)

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

Winkelwagenbetaling gewijzigd:

Trigger: ike_cart_payment_changed
Gegevens: detail.path

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

Winkelwagenbetaling gestart:

Trigger: ike_cart_payment_launched
Gegevens: detail (winkelwageninformatie)

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

Winkelwagenbetalingsbevestigingspagina:

Trigger: ike_cart_payment_success
Gegevens: detail (winkelwageninformatie)

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

Winkelwagenartikel verwijderen:

Trigger: ike_cart_delete
Gegevens: detail (vorige winkelwagen en nieuwe winkelwagen)

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

Pagina gewijzigd:

Trigger: ike_page_changed
Gegevens: detail.path

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