Shopify Pixel Integration

Connect usertrax with your Shopify store to automatically track conversions.

1. Create Pixel in Shopify Admin

   Open Shopify Admin and navigate to “Settings” → “Customer Events”. Click on “Add Custom Pixel”

2. Configure Pixel

   Set the Name to “usertrax Conversion Tracking”

3. Insert Pixel Code

   Copy the following code into the Pixel Code field in Shopify:

   /**
    * Shopify Pixel for usertrax
    * Loads usertrax and pushes events.
    * Compatible with Shopify's Custom Pixel requirements
    */
   
   (function () {
     "use strict";
   
     // usertrax Configuration
     const USERTRAX_CONFIG = {
       scriptUrl: "https://usertrax.io/cvs.js", // Replace with your usertrax API URL
       publicKey: "YOUR_API_KEY", // Replace with your usertrax Public Key
       // Shopify-specific Configuration
       shopifyEvents: [
         // "page_viewed",
         // "clicked",
         // "form_submitted",
         "product_viewed",
         "product_added_to_cart",
         "cart_viewed",
         "checkout_started",
         "checkout_completed",
       ],
     };
   
     // Load usertrax Tracker
     function loadUsertrax() {
       return new Promise((resolve, reject) => {
         // Check if usertrax is already loaded
         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);
       });
     }
   
     // Send event to usertrax
     async function sendConversion(conversionData) {
       try {
         window.usertrax.push(conversionData);
         return true;
       } catch (error) {
         console.error("Error sending conversion to usertrax:", error);
         return false;
       }
     }
   
     // Shopify Event 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",
           },
         },
       };
   
       // Process event-specific data
       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);
     }
   
     // Listen to Shopify Analytics Events
     function listenToShopifyAnalytics() {
       // Wait for Shopify Analytics to be available
       console.log("Shopify Analytics found, subscribing to events...");
   
       // Subscribe to all configured events
       USERTRAX_CONFIG.shopifyEvents.forEach((eventName) => {
         try {
           analytics.subscribe(eventName, (event) => {
             handleShopifyEvent(eventName, event);
           });
           console.log(`Event subscribed: ${eventName}`);
         } catch (error) {
           console.warn(`Could not subscribe to event ${eventName}:`, error);
         }
       });
     }
   
     // Initialization
     async function init() {
       try {
         console.log("Initializing usertrax Shopify Pixel...");
   
         // Load usertrax
         await loadUsertrax();
         console.log("Usertrax successfully loaded");
   
         // Listen to Shopify Analytics Events
         listenToShopifyAnalytics();
   
         // Pixel successfully loaded
         console.log("Usertrax Shopify Pixel successfully initialized");
   
         // Event for other scripts
         window.dispatchEvent(
           new CustomEvent("usertrax:ready", {
             detail: { config: USERTRAX_CONFIG },
           }),
         );
       } catch (error) {
         console.error("Error initializing usertrax Shopify Pixel:", error);
   
         // Event for errors
         window.dispatchEvent(
           new CustomEvent("usertrax:error", {
             detail: { error: error.message },
           }),
         );
       }
     }
   
     init();
   
     // Expose for external access
     window.UsertraxPixel = {
       config: USERTRAX_CONFIG,
       sendConversion,
       init,
     };
   })();

4. Configure API Key

   Replace YOUR_API_KEY in the code with your actual usertrax API key from your dashboard.

5. Activate Pixel

   1. Save: Click “Save”
   2. Activate: Make sure the pixel is activated

The usertrax Shopify pixel automatically tracks the following events:

• product_viewed: Product views
• product_added_to_cart: Products added to cart
• cart_viewed: Cart viewed
• checkout_started: Checkout process started
• checkout_completed: Order completed (conversion)

• Events not being sent: Check the browser console for errors
• Wrong API key: Make sure the correct API key is being used
• Pixel not active: Check in Shopify Admin if the pixel is activated