Shopify Pixel Integration

Verbinden Sie usertrax mit Ihrem Shopify-Shop, um Conversions automatisch zu verfolgen.

1. Pixel in Shopify Admin erstellen

   Öffnen Sie Shopify Admin und navigieren Sie zu “Einstellungen” → “Kundenereignisse”. Klicken Sie auf “Benutzerdefinierten Pixel hinzufügen”

2. Pixel konfigurieren

   Setzen Sie den Namen auf “usertrax Conversion Tracking”

3. Pixel-Code einfügen

   Kopieren Sie den folgenden Code in das Pixel-Code-Feld in Shopify:

   /**
    * Shopify Pixel für usertrax
    * Lädt usertrax und sendet Ereignisse.
    * Kompatibel mit Shopify's Custom Pixel Anforderungen
    */
   
   (function () {
     "use strict";
   
     // usertrax Konfiguration
     const USERTRAX_CONFIG = {
       scriptUrl: "https://usertrax.io/cvs.js", // Ersetzen Sie mit Ihrer usertrax API URL
       publicKey: "YOUR_API_KEY", // Ersetzen Sie mit Ihrem usertrax Public Key
       // Shopify-spezifische Konfiguration
       shopifyEvents: [
         // "page_viewed",
         // "clicked",
         // "form_submitted",
         "product_viewed",
         "product_added_to_cart",
         "cart_viewed",
         "checkout_started",
         "checkout_completed",
       ],
     };
   
     // usertrax Tracker laden
     function loadUsertrax() {
       return new Promise((resolve, reject) => {
         // Prüfen ob usertrax bereits geladen ist
         if (window.usertrax) {
           resolve();
           return;
         }
   
         const script = document.createElement("script");
         script.src = USERTRAX_CONFIG.scriptUrl;
         script.setAttribute("data-key", USERTRAX_CONFIG.publicKey);
         script.onload = () => resolve();
         script.onerror = () => reject(new Error("Failed to load usertrax"));
         document.head.appendChild(script);
       });
     }
   
     // Ereignis an usertrax senden
     async function sendConversion(conversionData) {
       try {
         window.usertrax.push(conversionData);
         return true;
       } catch (error) {
         console.error("Error sending conversion to usertrax:", error);
         return false;
       }
     }
   
     // Shopify Ereignis-Handler
     function handleShopifyEvent(eventName, event) {
       console.log(`Shopify Event: ${eventName}`, event);
   
       let conversionData = {
         event: eventName,
         meta_data: {
           shopify: {
             shop: window.Shopify?.shop || window.location.hostname,
             currency: window.Shopify?.currency || "EUR",
             locale: window.Shopify?.locale || "en",
           },
         },
       };
   
       // Ereignis-spezifische Daten verarbeiten
       switch (eventName) {
         case "checkout_completed":
           conversionData = {
             ...conversionData,
             id: event.checkout?.order_id || event.order_id,
             total: parseFloat(
               event.checkout?.total_price || event.total_price || 0,
             ),
             currency: event.checkout?.currency || event.currency || "EUR",
             user_data: {
               email: event.checkout?.email || event.email,
               id: event.checkout?.customer_id || event.customer_id,
               token: event.checkout?.token,
               firstname:
                 event.checkout?.customer_first_name || event.first_name,
               lastname: event.checkout?.customer_last_name || event.last_name,
               phone: event.checkout?.customer_phone || event.phone,
               address: event.checkout?.customer_address || event.address,
               city: event.checkout?.customer_city || event.city,
               state: event.checkout?.customer_state || event.state,
               zip: event.checkout?.customer_zip || event.zip,
               country: event.checkout?.customer_country || event.country,
             },
           };
   
           conversionData.meta_data.shopify = {
             ...conversionData.meta_data.shopify,
             order_id: event.checkout?.order_id || event.order_id,
             checkout_id: event.checkout?.id || event.checkout_id,
             line_items: event.checkout?.line_items || event.line_items,
           };
           break;
   
         case "product_viewed":
           conversionData = {
             ...conversionData,
             id: event.product?.id || event.product_id,
             label: event.product?.title || event.product_title,
             total: parseFloat(
               event.product?.price || event.product_price || 0,
             ),
           };
   
           conversionData.meta_data.shopify = {
             ...conversionData.meta_data.shopify,
             product_id: event.product?.id || event.product_id,
             product_title: event.product?.title || event.product_title,
             product_price: parseFloat(
               event.product?.price || event.product_price || 0,
             ),
             product_variant_id:
               event.product?.variant_id || event.product_variant_id,
             product_category:
               event.product?.category || event.product_category,
           };
           break;
   
         case "product_added_to_cart":
           conversionData = {
             ...conversionData,
             id: event.product?.id || event.product_id,
             label: event.product?.title || event.product_title,
             total: parseFloat(
               event.product?.price || event.product_price || 0,
             ),
           };
   
           conversionData.meta_data.shopify = {
             ...conversionData.meta_data.shopify,
             cart_id: event.cart?.id || event.cart_id,
             cart_token: event.cart?.token || event.cart_token,
             product_id: event.product?.id || event.product_id,
             product_title: event.product?.title || event.product_title,
             product_price: parseFloat(
               event.product?.price || event.product_price || 0,
             ),
             product_variant_id:
               event.product?.variant_id || event.product_variant_id,
             product_category:
               event.product?.category || event.product_category,
           };
           break;
   
         case "checkout_started":
           conversionData = {
             ...conversionData,
             total: parseFloat(
               event.cart?.total_price || event.cart_total || 0,
             ),
             currency: event.cart?.currency || event.currency || "EUR",
           };
           break;
       }
   
       sendConversion(conversionData);
     }
   
     // Auf Shopify Analytics Ereignisse hören
     function listenToShopifyAnalytics() {
       // Warten bis Shopify Analytics verfügbar ist
       console.log("Shopify Analytics gefunden, abonniere Ereignisse...");
   
       // Alle konfigurierten Ereignisse abonnieren
       USERTRAX_CONFIG.shopifyEvents.forEach((eventName) => {
         try {
           analytics.subscribe(eventName, (event) => {
             handleShopifyEvent(eventName, event);
           });
           console.log(`Ereignis abonniert: ${eventName}`);
         } catch (error) {
           console.warn(
             `Konnte Ereignis ${eventName} nicht abonnieren:`,
             error,
           );
         }
       });
     }
   
     // Initialisierung
     async function init() {
       try {
         console.log("Initialisiere usertrax Shopify Pixel...");
   
         // usertrax laden
         await loadUsertrax();
         console.log("Usertrax erfolgreich geladen");
   
         // Auf Shopify Analytics Ereignisse hören
         listenToShopifyAnalytics();
   
         // Pixel erfolgreich geladen
         console.log("Usertrax Shopify Pixel erfolgreich initialisiert");
   
         // Ereignis für andere Skripte
         window.dispatchEvent(
           new CustomEvent("usertrax:ready", {
             detail: { config: USERTRAX_CONFIG },
           }),
         );
       } catch (error) {
         console.error(
           "Fehler beim Initialisieren des usertrax Shopify Pixels:",
           error,
         );
   
         // Ereignis für Fehler
         window.dispatchEvent(
           new CustomEvent("usertrax:error", {
             detail: { error: error.message },
           }),
         );
       }
     }
   
     init();
   
     // Für externen Zugriff verfügbar machen
     window.UsertraxPixel = {
       config: USERTRAX_CONFIG,
       sendConversion,
       init,
     };
   })();

4. API-Schlüssel konfigurieren

   Ersetzen Sie YOUR_API_KEY im Code mit Ihrem tatsächlichen usertrax API-Schlüssel aus Ihrem Dashboard.

5. Pixel aktivieren

   1. Speichern: Klicken Sie auf “Speichern”
   2. Aktivieren: Stellen Sie sicher, dass der Pixel aktiviert ist

Der usertrax Shopify Pixel verfolgt automatisch die folgenden Ereignisse:

• product_viewed: Produktansichten
• product_added_to_cart: Produkte zum Warenkorb hinzugefügt
• cart_viewed: Warenkorb angesehen
• checkout_started: Checkout-Prozess gestartet
• checkout_completed: Bestellung abgeschlossen (Conversion)

• Ereignisse werden nicht gesendet: Überprüfen Sie die Browser-Konsole auf Fehler
• Falscher API-Schlüssel: Stellen Sie sicher, dass der richtige API-Schlüssel verwendet wird
• Pixel nicht aktiv: Überprüfen Sie im Shopify Admin, ob der Pixel aktiviert ist