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

Voraussetzungen

• Kontaktieren Sie den Infomaniak-Support, wenn Sie diese Funktion aktivieren möchten.
• Diese Trigger müssen dann in den Abschnitt „HEAD“ der erweiterten Einstellungen Ihres Shops eingefügt werden.

Beispiele für Meta-Pixel und Google-Tags

Weitere Informationen finden Sie in der externen Dokumentation zum 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});
});

… 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 Funktion 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 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.

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: Verwaltet die Tracking-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' {{URL_7}} {{URL_8}} {{URL_9}}
img-src 'self' {{URL_10}} {{URL_11}}
connect-src 'self' {{URL_12}} {{URL_13}}

Google bietet eine ausführliche Anleitung zur Konfiguration einer CSP, 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):

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

• Keine Daten in Google Analytics oder Facebook Ads Manager.
• Auslösen der definierten Ereignisse in GTM schlägt fehl.

Wenn die CSP diese Ressourcen blockiert, können keine Daten über Besucher erfasst oder Conversion-Ereignisse aufgezeichnet werden.

Vollständige Liste der Trigger

Startseite:

Trigger: ike_home_view
Daten: keine

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

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

Datumsseite:

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

Seite zur Auswahl der Abonnements:

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

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

Benutzerabmeldung:

Auslöser: ike_user_logout
Daten: Details (Warenkorbinformationen)

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

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

Warenkorbseite:

Auslöser: ike_cart_view
Daten: Details (Warenkorbinformationen)

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

Warenkorb-Aktualisierung:

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

Auslöser: ike_cart_update
Daten: Details (Warenkorbdetails)

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

Warenkorb ist leer:

Wird ausgelöst, wenn die Schaltfläche „Leeren“ gedrückt wird.

Auslöser: ike_cart_empty
Daten: Details (Warenkorbdetails)

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

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

Seite für die Warenkorb-Lieferung:

Auslöser: ike_cart_delivery_view
Daten: Details (Warenkorbdetails)

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

Seite mit dem Warenkorbformular:

Auslöser: ike_cart_form_view
Daten: Details (Warenkorbdetails)

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

Seite für die Zahlungsabwicklung per Kreditkarte:

Auslöser: ike_cart_payment_view
Daten: Details (Warenkorbdetails mit der ausgewählten Zahlungsmethode)

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

Änderung der Zahlungsart im Warenkorb:

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

Zahlung per Kreditkarte gestartet:

Auslöser: ike_cart_payment_launched
Daten: Details (Warenkorbdetails)

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

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

Artikel aus dem Warenkorb löschen:

Auslöser: ike_cart_delete
Daten: Details (vorheriger Warenkorb und neuer Warenkorb)

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