Sales Tracking on Shopify

Integrating Popin Sales Tracking on Shopify

This guide explains how to integrate Popin’s sales tracking pixel into your Shopify store using Shopify’s Customer Events feature. This integration allows you to track successful checkout events and link them to Popin user sessions for accurate sales attribution.

---

🧭 On This Page

• Steps to Integrate Popin Sales Tracking

• Code Snippet

• Verification

---

🛠️ Steps to Integrate Popin Sales Tracking

Step 1: Access Your Shopify Admin Panel

1. Log in to your Shopify account.

2. From the admin dashboard, go to the Settings section (bottom-left corner).

---

Step 2: Navigate to Customer Events

1. In the Settings menu, scroll and select Customer Events.

2. This section allows you to configure custom event tracking on checkout and other key moments.

---

Step 3: Add the Custom Pixel

1. Click the Add Custom Pixel button.

2. In the dialog that opens:

   • Name: popin_saletrack

   • Code: Copy and paste the JavaScript snippet provided below.

🔁 Important: Replace YOUR_SELLER_ID in the code with your actual seller ID, available in your Popin dashboard.

---

📄 Code Snippet

const popinSalesTracker = async ({ sellerId, orderId, amount }) => { 
    var popinDomain = "https://widget01.popin.to";
    var popinUserData = await localStorage.getItem("popinUserData");
    if (popinUserData) {
        popinUserData = JSON.parse(popinUserData);
        fetch(`${popinDomain}/api/v1/user/sale`, {
            method: "POST",
            headers: {
                "Content-Type": "application/json",
                Authorization: `Bearer ${popinUserData.popInToken}`,
            },
            body: JSON.stringify({
                seller_id: sellerId,
                order_id: orderId,
                amount: amount,
            }),
        });
    }
};

analytics.subscribe("checkout_completed", (event) => {
    popinSalesTracker({
        sellerId: YOUR_SELLER_ID, // Replace with your actual seller ID
        orderId: event.data?.checkout?.order?.id,
        amount: event.data?.checkout?.totalPrice?.amount
    });
});

---

Step 4: Save Your Changes

Once you’ve entered the pixel name and pasted the code:

1. Click Save to activate the Popin sales tracking pixel.

2. The pixel will now listen for completed checkouts and send sale data to Popin in real-time.

---

Step 5: Verify Integration

To ensure successful setup:

1. Make a test purchase on your store.

2. Go to your Popin Dashboard > Sales Tracking.

3. Confirm the test order appears with the correct details (order ID, amount, etc.).

---

📞 Need Help?

If you encounter any issues during the integration:

• Ensure the seller ID is correctly replaced in the script.

• Verify that popinUserData is available in localStorage during checkout.

• Contact Popin Support for troubleshooting and assistance.