Diese Anleitung enthält eine Liste der Triggers, die für Ihre Tracker vom Typ Google Tags und Meta-Pixel (Facebook) Ihres Shops (im Rahmen des Ticketing-Systems von Infomaniak) verwendet werden sollen.

Beispiele für Meta-Pixel und Google Tags

Nehmen Sie die externe Dokumentation für den 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
  });
});

Im Google Tag Manager stellen Sie sicher, dass das Format für die Tags korrekt eingehalten wird:

(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 legitime Skripte blockieren, wie die Meta-Verfolgungs-Pixel oder den Google Tag Manager, wodurch die ordnungsgemäße Funktion der Konversionsverfolgung 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 der Konversionsverfolgung in Ihrem Shop zu gewährleisten, ist es erforderlich, eine spezifische Ausnahme in der CSP-Konfiguration Ihrer Website hinzuzufügen, um die von der Infomaniak-Ticketing-Lösung verwendeten Ressourcen zuzulassen.

Wichtigste CSP-Richtlinien, die das Tracking beeinflussen

• script-src‍ : definiert die autorisierten Quellen für Skripte.
• img-src‍ : steuert die Bilder (einschließlich der <img> Tags, die für die Tracking-Pixel verwendet werden).
• connect-src‍ : verwaltet die Tracking-Anfragen, die an die Server der Marketing-Tools gesendet werden.

Zum Beispiel, wenn Sie 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 eine detaillierte Anleitung zur Konfiguration der CSP, die mit seinen Tracking-Tools kompatibel ist.

Stellen Sie auch sicher, dass Ihr Sicherheitsmanagementsystem (Anwendungs-Firewall, CDN, CMS) diese Ressourcen nicht blockiert, und nehmen Sie die erforderlichen Anpassungen vor, um die ordnungsgemäße Auslösung der Verfolgungsereignisse zu ermöglichen.

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

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

Fehler, die in der Entwicklerkonsole sichtbar sind (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.
• Fehler beim Auslösen der in GTM definierten Ereignisse.

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

Vollständige Liste der Auslöser

Startseite:

Trigger: ike_home_view
Daten: keine

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

Veranstaltungsseite:

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

Datumsseite:

Seite eines Datums eines Events
Trigger: 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:

Seitenauswahl für Pass-Daten
Auslöser: ike_abo_selection
Daten: detail (Wagenkorbdetails)

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

Benutzeranmeldung:

Erfolgreich angemeldet
Auslöser : ike_user_login
Daten : detail (Warenkorbdetails)

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

Benutzer abmelden:

Auslöser : ike_user_logout
Daten : detail (Warenkorbdetails)

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 (Warenkorbdetails)

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

Warenkorb-Seite:

Auslöser : ike_cart_view
Daten : detail (Warenkorbdetails)

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 (Warenkorbdetails)

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

Warenkorb leer:

Wird ausgelöst, wenn die Leeren-Taste 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
});

Warenkorb Lieferseite:

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

Warenkorb Formularseite:

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

Warenkorb Zahlungsseite:

Auslöser: ike_cart_payment_view
Daten: detail (Warenkorbdetails mit ausgewählter Zahlungsmethode)

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

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

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

Warenkorb-Zahlungsbestätigungsseite:

Auslöser : ike_cart_payment_success
Daten : detail (Warenkorbdetails)

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

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