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

Voorbeelden van Meta-pixel 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.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' : 'betaling',
    'event_label' : e.detail.currency.name,
    'value': e.detail.topaid
  });
});

Zorg er in Google Tag Manager voor dat het formaat voor de tags correct wordt nageleefd:

(view_item|add_cart|add_payment_info)

CSP en de impact ervan op conversie-tracking

Het “Content Security Policy” (CSP) is een beveiligingsbeleid voor het web dat 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 de trackingpixels van Meta of Google Tag Manager, waardoor de conversietracking niet correct functioneert.

Waarom werken sommige pixels niet?

Als uw website een foutmelding weergeeft die gerelateerd is aan het Content Security Policy (CSP), bijvoorbeeld in de console of het netwerktabblad van de ontwikkelaarstools van uw browser, betekent dit dat bepaalde scripts van derden – zoals Google-tags of Meta-pixels (Facebook) – worden geblokkeerd. Om ervoor te zorgen dat de conversie-tracking op uw webshop correct werkt, is het noodzakelijk om een specifieke uitzondering toe te voegen aan de CSP-configuratie van uw website, zodat de bronnen die door het Infomaniak-ticketsysteem worden gebruikt, zijn toegestaan.

Belangrijkste CSP-richtlijnen die de tracking beïnvloeden

• script-src: definieert de toegestane bronnen voor scripts.
• img-src: regelt de afbeeldingen (inclusief de <img>-tags die worden gebruikt voor trackingpixels).
• connect-src: beheert de trackingverzoeken die naar de servers van marketingtools worden verzonden.

Als u bijvoorbeeld Google Tag Manager of Facebook Pixel gebruikt, zorg er dan voor dat uw CSP-beleid expliciet het laden van scripts en het verzenden van gegevens naar hun domeinen toestaat. Hier is een voorbeeld van richtlijnen die u in uw CSP kunt opnemen, afhankelijk van 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 over het configureren van CSP die compatibel is met hun trackingtools.

Controleer ook of uw beveiligingssysteem (applicatie-firewall, CDN, CMS) deze bronnen niet blokkeert en pas de nodige aanpassingen toe om ervoor te zorgen dat de tracking-gebeurtenissen correct worden geactiveerd.

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 die zichtbaar zijn in de ontwikkelaarsconsole (Ontwikkelhulpmiddelen van de browser):

Het laden van het script 'https://connect.facebook.net/en_US/fbevents.js' is geweigerd,
omdat dit in strijd is met de volgende Content Security Policy-richtlijn: "script-src 'self'"

• Geen gegevens in Google Analytics of Facebook Ads Manager.
• Gebeurtenissen in GTM worden niet geactiveerd.

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

Volledige lijst met triggers

Startpagina:

trigger: ike_home_view
Data: geen

document.addEventListener("ike_home_view", function(e) {
  //stuur naar uw trackingtool
});

Evenementenpagina:

Pagina van een evenement met meerdere data
trigger: ike_event_view
Data: detail.name

document.addEventListener("ike_event_view", function(e) {
  console.log(e.detail.name); 
  //stuur de gegevens naar uw trackingtool
});

Datumpagina:

Pagina met de datum van een evenement
trigger: ike_date_view
Data: detail.name, detail.date

document.addEventListener("ike_date_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //stuur naar uw trackingtool
});

Pagina voor abonnementen:

Pagina van een abonnementcategorie
trigger: ike_abo_view
Data: detail.name

document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  // Stuur de gegevens naar uw trackingtool
});
```
Pagina voor het selecteren van een abonnement:

Pass selection page:

Pagina voor het selecteren van abonnementsdata
trigger: ike_abo_selection
Data: detail (winkelwageninformatie)

document.addEventListener("ike_abo_selection", function(e) {
  console.log(e.detail.name, e.detail.date);
  //stuur de gegevens naar uw trackingtool
});

Gebruikersaanmelding:

Geactiveerd bij een succesvolle aanmelding
trigger: ike_user_login
Gegevens: details (winkelwageninformatie)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Gebruiker uitloggen:

trigger: ike_user_logout
Data: detail (winkelwageninformatie)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  //stuur naar uw trackingtool
});

Artikel toegevoegd aan winkelwagen:

Wordt geactiveerd wanneer een artikel aan de winkelwagen is toegevoegd.

trigger: ike_cart_add
Data: detail (winkelwageninformatie)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  //stuur naar uw trackingtool
});

Winkelwagenpagina:

trigger: ike_cart_view
Data: details (winkelwageninformatie)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});
```
Winkelwagen bijwerken:

Cart update:

Wordt geactiveerd wanneer een item in de winkelwagen wordt bijgewerkt

trigger: ike_cart_update
Data: details (winkelwageninformatie)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Winkelwagen leeg:

Wordt geactiveerd wanneer op de lege knop wordt gedrukt

trigger: ike_cart_empty
Data: details (winkelwageninformatie)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Bevestiging van de winkelwagen:

Wordt geactiveerd wanneer op de bevestigingsknop wordt gedrukt

trigger: ike_cart_confirm
Data: details (winkelwageninformatie)

document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  // Stuur de gegevens naar uw trackingtool
});
```
Pagina voor het bevestigen van de bestelling:

Cart delivery page:

trigger: ike_cart_delivery_view
Data: detail (winkelwageninformatie)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Pagina met winkelwagenformulier:

trigger: ike_cart_form_view
Data: detail (winkelwageninformatie)

```html
document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  // Stuur de gegevens naar uw trackingtool
});
```
Winkelwagenpagina (betaling):

Cart payment page:

trigger: ike_cart_payment_view
Data: detail (winkelwageninformatie met geselecteerde betaalmethode)

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Betaling in winkelwagen gewijzigd:

trigger: ike_cart_payment_changed
Data: detail.path

```html
document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  // Stuur de gegevens naar uw trackingtool
});
```
Betaling voor de winkelwagen gestart:

Cart payment launched:

trigger: ike_cart_payment_launched
Data: detail (winkelwageninformatie)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  //stuur de gegevens naar uw trackingtool
});

Succespagina voor kaartbetaling:

trigger: ike_cart_payment_success
Data: detail (winkelwageninformatie)

```html
document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  // Stuur de gegevens naar uw trackingtool
});
```
Item uit winkelwagen verwijderen:

Cart delete item:

trigger: ike_cart_delete
Data: detail (previousCart en newCart)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  //stuur naar uw trackingtool
});

Pagina gewijzigd:

trigger: ike_page_changed
Data: detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  // Stuur de gegevens naar uw trackingtool
});