Dieser Leitfaden enthält eine Liste der Trigger, die Sie für Ihre Google Tags- und Meta-Pixel-Tracker (Facebook) in Ihrem Shop (im Rahmen des Infomaniak-Ticketingsystems) verwenden können.

Beispiele für Meta-Pixel und Google Tags

Nehmen Sie die externe Dokumentation für das Meta-Pixel zur Kenntnis:

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

… und für den 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
  });
});

Stellen Sie sicher, dass das Format für die Tags im Google Tag Manager korrekt ist:

(view_item|add_cart|add_payment_info)

CSP und seine Auswirkungen auf die Conversion-Tracking

Die „Content Security Policy“ (CSP) ist eine Websicherheitsrichtlinie, die Seiten vor bestimmten Angriffen wie Cross-Site Scripting (XSS) und der Injektion schädlicher Inhalte schützt. Sie kann jedoch auch bestimmte legitime Skripte blockieren, wie z.B. Meta-Tracking-Pixel oder Google Tag Manager, wodurch die ordnungsgemäße Funktion des Conversion-Trackings beeinträchtigt wird.

Warum funktionieren einige Pixel nicht?

Wenn Ihre Website einen Fehler im Zusammenhang mit der Content Security Policy (CSP) anzeigt, insbesondere in der Konsole oder im Netzwerk-Tab der Entwicklertools des Browsers, bedeutet dies, dass bestimmte Drittanbieter-Skripte – wie Google-Tags oder Meta-Pixel (Facebook) – blockiert werden. Um die ordnungsgemäße Funktion des Conversion-Trackings in Ihrem Shop zu gewährleisten, ist es notwendig, eine spezifische Ausnahme in der CSP-Konfiguration Ihrer Website hinzuzufügen, um die von der Infomaniak-Ticketing-Lösung verwendeten Ressourcen zuzulassen.

Wichtige CSP-Richtlinien, die das Tracking beeinflussen

• script-src‍: Legt die zulässigen Quellen für Skripte fest.
• img-src‍: Steuert die Bilder (einschließlich der <img>-Tags, die für Tracking-Pixel verwendet werden).
• connect-src‍: Verwalten Sie die Tracking-Anfragen, die an die Server der Marketing-Tools gesendet werden.

Wenn Sie beispielsweise Google Tag Manager oder Facebook Pixel verwenden, stellen Sie sicher, dass Ihre CSP-Richtlinie das Laden von Skripten und das Senden von Daten an deren Domänen ausdrücklich zulässt. Hier ist ein Beispiel für Richtlinien, die Sie in Ihre CSP aufnehmen können, angepasst an Ihre Konfiguration:

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 bietet einen detaillierten Leitfaden zur Konfiguration einer CSP, die mit seinen Tracking-Tools kompatibel ist.

Stellen Sie auch sicher, dass Ihr Sicherheitssystem (Anwendung-Firewall, CDN, CMS) diese Ressourcen nicht blockiert, und nehmen Sie die notwendigen Anpassungen vor, um die ordnungsgemäße Auslösung der Tracking-Ereignisse zu ermöglichen.

Wenn Ihre CSP zu restriktiv ist, kann sie das Laden von Drittanbieter-Skripten verhindern, wie z.B.:

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

Fehler in der Entwicklerkonsole sichtbar (Entwicklertools) des Browsers:

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

• Fehlende Daten in Google Analytics oder Facebook Ads Manager.
• Fehlgeschlagene Auslösung der in GTM definierten Ereignisse.

Wenn die CSP diese Ressourcen blockiert, können sie keine Daten über Besucher sammeln oder Konversionsereignisse aufzeichnen.

Vollständige Liste der Auslöser

Startseite:

Auslöser: ike_home_view
Daten: keine

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

Event-Seite:

Seite eines Events mit mehreren Terminen
Auslöser: ike_event_view
Daten: detail.name

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

Terminseite:

Seite eines Termins eines Events
Auslöser: ike_date_view
Daten: 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-Seite:

Seite einer Pass-Kategorie
Auslöser: ike_abo_view
Daten: detail.name

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

Pass-Auswahlseite:

Seite zur Auswahl der Pass-Termine
Auslöser: ike_abo_selection
Daten: detail (Wagen-Details)

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

Benutzeranmeldung:

Erfolgreiche Anmeldung ausgelöst
Auslöser: ike_user_login
Daten: detail (Wagen-Details)

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

Benutzerabmeldung:

Auslöser: ike_user_logout
Daten: detail (Wagen-Details)

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

Warenkorb hinzufügen:

Wird ausgelöst, wenn ein Element zum Warenkorb hinzugefügt wird

Auslöser: ike_cart_add
Daten: detail (Wagen-Details)

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

Warenkorbseite:

Auslöser: ike_cart_view
Daten: detail (Wagen-Details)

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

Warenkorb aktualisieren:

Wird ausgelöst, wenn ein Warenkorb-Element aktualisiert wird

Auslöser: ike_cart_update
Daten: detail (Wagen-Details)

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

Warenkorb leeren:

Wird ausgelöst, wenn die Leertaste gedrückt wird

Auslöser: ike_cart_empty
Daten: detail (Wagen-Details)

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

Warenkorb bestätigen:

Wird ausgelöst, wenn die Bestätigungstaste gedrückt wird

Auslöser: ike_cart_confirm
Daten: detail (Wagen-Details)

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

Lieferseite des Warenkorbs:

Auslöser: ike_cart_delivery_view
Daten: detail (Wagen Details)

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

Warenkorbformularseite:

Auslöser: ike_cart_form_view
Daten: detail (Wagen Details)

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

Warenkorbzahlungsseite:

Auslöser: ike_cart_payment_view
Daten: detail (Wagen Details mit paymentMethodSelected)

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

Warenkorbzahlung geändert:

Auslöser: ike_cart_payment_changed
Daten: detail.path

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

Warenkorbzahlung gestartet:

Auslöser: ike_cart_payment_launched
Daten: detail (Wagen Details)

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

Warenkorbzahlungserfolgsseite:

Auslöser: ike_cart_payment_success
Daten: detail (Wagen Details)

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

Warenkorbartikel löschen:

Auslöser: ike_cart_delete
Daten: detail (previosCart und newCart)

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

Seite geändert:

Auslöser: ike_page_changed
Daten: detail.path

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