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

Beispiele für Meta- und Google-Pixel-Tags

Weitere Informationen zum Meta-Pixel finden Sie in der externen Dokumentation:

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

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

(view_item|add_cart|add_payment_info)

CSP und dessen Auswirkungen auf die Conversion-Verfolgung

Die „Content Security Policy“ (CSP) ist eine Websicherheitsrichtlinie, die Webseiten vor bestimmten Angriffen wie Cross-Site Scripting (XSS) und der Injektion von bösartigem Inhalt schützt. Sie kann jedoch auch bestimmte legitime Skripte blockieren, wie z. B. Meta-Tracking-Pixel oder Google Tag Manager, wodurch die korrekte Funktionsweise der Conversion-Verfolgung verhindert wird.

Warum funktionieren einige Pixel nicht?

Wenn Ihre Website eine Fehlermeldung im Zusammenhang mit der Content Security Policy (CSP) anzeigt, insbesondere in der Konsole oder im Netzwerk-Tab der Entwicklertools Ihres Browsers, bedeutet dies, dass bestimmte Skripte von Drittanbietern – wie z. B. Google-Tags oder Meta-Pixel (Facebook) – blockiert werden. Um die korrekte Funktionsweise der Conversion-Tracking-Funktion 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-Ticketplattform verwendeten Ressourcen zuzulassen.

Wichtige CSP-Richtlinien, die das Tracking beeinflussen

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

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

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 stellt eine ausführliche Anleitung zur Konfiguration einer CSP bereit, die mit seinen Tracking-Tools kompatibel ist.

Überprüfen Sie außerdem, ob Ihr Sicherheitsmanagementsystem (Web Application Firewall, CDN, CMS) diese Ressourcen nicht blockiert, und nehmen Sie die erforderlichen Anpassungen vor, um die korrekte Auslösung der Tracking-Ereignisse zu ermöglichen.

Wenn Ihre CSP zu restriktiv ist, kann dies das Laden von Skripten von Drittanbietern verhindern:

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

In der Entwicklerkonsole sichtbare Fehler (Entwicklertools des Browsers):

Das Laden des Skripts „https://connect.facebook.net/en_US/fbevents.js“ wurde abgelehnt,
da es gegen die folgende Content Security Policy-Anweisung verstößt: „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 keine Daten über Besucher erfasst oder Konversionsereignisse aufgezeichnet werden.

Vollständige Liste der Trigger

Startseite:

Auslöser: ike_home_view
Daten: keine

document.addEventListener("ike_home_view", function(e) {
  // an Ihr Tracking-Tool senden
});

Ereignis-Seite:

Seite für ein Ereignis mit mehreren Terminen
Auslöser: ike_event_view
Daten: detail.name

document.addEventListener("ike_event_view", function(e) {
  console.log(e.detail.name); 
  //an Ihr Tracking-Tool senden
});

Datenseite:

Seite mit dem Datum eines Ereignisses
Auslöser: ike_date_view
Daten: detail.name, detail.date

document.addEventListener("ike_date_view", function(e) {
  console.log(e.detail.name, e.detail.date);
  //an Ihr Tracking-Tool senden
});

Pass-Seite:

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

```html
document.addEventListener("ike_abo_view", function(e) {
  console.log(e.detail.name);
  // An Ihr Tracking-Tool senden
});
```
Seite zur Auswahl des Abonnements:

Pass selection page:

Seite zur Auswahl der Abonnementzeiträume
Auslöser: ike_abo_selection
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_abo_selection", function(e) {
  console.log(e.detail.name, e.detail.date);
  //an Ihr Tracking-Tool senden
});

Benutzeranmeldung:

Wird bei erfolgreicher Anmeldung ausgelöst
Trigger: ike_user_login
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_user_login", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});

Benutzerabmeldung:

Auslöser: ike_user_logout
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_user_logout", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Artikel zum Warenkorb hinzugefügt:

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

Auslöser: ike_cart_add
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_add", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Warenkorbseite:

Auslöser: ike_cart_view
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_view", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});

Warenkorb-Aktualisierung:

Wird ausgelöst, wenn ein Artikel im Warenkorb aktualisiert wird

Auslöser: ike_cart_update
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_update", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Warenkorb leer:

Wird ausgelöst, wenn die leere Schaltfläche gedrückt wird

Auslöser: ike_cart_empty
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_empty", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});

Warenkorbbestätigung:

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

Auslöser: ike_cart_confirm
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_confirm", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});

Seite zur Bestätigung des Warenkorbs:

Auslöser: ike_cart_delivery_view
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_delivery_view", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Seite für das Warenkorbformular:

Auslöser: ike_cart_form_view
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_form_view", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});

Warenkorb-Zahlungsseite:

Trigger: ike_cart_payment_view
Daten: Detail (Warenkorbdetails mit der ausgewählten Zahlungsmethode)

document.addEventListener("ike_cart_payment_view", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Änderung der Zahlungsart im Warenkorb:

Auslöser: ike_cart_payment_changed
Daten: detail.path

```html
document.addEventListener("ike_cart_payment_changed", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});
```
Warenkorb-Zahlung gestartet:

Cart payment launched:

Auslöser: ike_cart_payment_launched
Daten: Details (Warenkorbdetails)

document.addEventListener("ike_cart_payment_launched", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Erfolgsseite für Kreditkartenzahlung:

Auslöser: ike_cart_payment_success
Daten: Detail (Warenkorbdetails)

document.addEventListener("ike_cart_payment_success", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});
```
Artikel aus dem Warenkorb löschen:

Cart delete item:

Auslöser: ike_cart_delete
Daten: Details (previousCart und newCart)

document.addEventListener("ike_cart_delete", function(e) {
  console.log(e.detail);
  // an Ihr Tracking-Tool senden
});

Seite geändert:

Auslöser: ike_page_changed
Daten: detail.path

document.addEventListener("ike_page_changed", function(e) {
  console.log(e.detail);
  // An Ihr Tracking-Tool senden
});