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

Vereisten

• Neem contact op met de Infomaniak-ondersteuning als u deze functie wilt activeren.
• Deze triggers moeten vervolgens worden ingevoegd in het gedeelte “HEAD” van de geavanceerde instellingen van uw webshop.

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

… 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' : 'paiement',
    '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 toegepast:

(view_item|add_cart|add_payment_info)

CSP en de impact ervan op conversie-tracking

De “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 Meta-trackingpixels of Google Tag Manager, waardoor de conversie-tracking niet goed functioneert.

Waarom werken sommige pixels niet?

Als uw website een foutmelding weergeeft die verband houdt met 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 het volgen van conversies 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 de Infomaniak-ticketingservice worden gebruikt, zijn toegestaan.

Belangrijkste CSP-richtlijnen die van invloed zijn op tracking

• 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. Hieronder vindt u een voorbeeld van richtlijnen die u in uw CSP kunt opnemen, afhankelijk van uw configuratie:

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

Google biedt een gedetailleerde handleiding over het configureren van een 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):

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

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

Wanneer de CSP deze bronnen blokkeert, kunnen ze geen gegevens over bezoekers verzamelen of conversiegebeurtenissen registreren.

Volledige lijst met triggers

Startpagina:

trigger: ike_home_view
Data: geen

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

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

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

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

Pagina voor het selecteren van abonnementen:

Pagina waarop de data van de abonnementen kunnen worden geselecteerd
trigger: ike_abo_selection
Data: details (winkelwageninformatie)

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

Gebruikersaanmelding:

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

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

Gebruiker uitloggen:

trigger: ike_user_logout
Data: detail (winkelwageninformatie)

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

Item toegevoegd aan winkelwagen:

Wordt geactiveerd wanneer een item aan de winkelwagen is toegevoegd.

trigger: ike_cart_add
Data: detail (winkelwageninformatie)

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

Winkelwagenpagina:

trigger: ike_cart_view
Data: 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
Data: details (winkelwageninformatie)

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

Winkelwagen is leeg:

Wordt geactiveerd wanneer op de knop 'Leegmaken' wordt gedrukt.

trigger: ike_cart_empty
Data: details (winkelwageninformatie)

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

Winkelwagen bevestigen:

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

Pagina voor het afleveren van de winkelwagen:

trigger: ike_cart_delivery_view
Data: detail (winkelwagengegevens)

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

Pagina met winkelwagenformulier:

trigger: ike_cart_form_view
Data: detail (winkelwagengegevens)

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

Betaalpagina voor winkelwagen:

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

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

Betaling in winkelwagen gewijzigd:

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

Betaling via creditcard gestart:

trigger: ike_cart_payment_launched
Data: details (winkelwageninformatie)

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

Succespagina voor kaartbetaling:

trigger: ike_cart_payment_success
Data: detail (winkelwageninformatie)

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

Winkelwagen: item verwijderen:

trigger: ike_cart_delete
Data: 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
Data: detail.path

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