How to Install the Conversion Pixel on Shopify

If you are using Shopify, the most reliable way to track conversions is by creating a Custom Pixel. This ensures your tracking works on the new, secure Shopify checkout pages.

Step 1: Create a Custom Pixel

Log in to your Shopify Admin.
Go to Settings (bottom left) > Customer events.
Click the Add custom pixel button.
Name the pixel: SparkLoop Conversion Pixel.
Click Add pixel.

Step 2: Add the Code

You will see a code editor. Delete any default code that might be there and paste the following snippet exactly as it appears below.

⚠️ Important: You must replace {OFFER_ID} in the code below with your actual Offer ID found in your SparkLoop dashboard.

// 1. Load the SparkLoop Tracking Script
const script = document.createElement('script');
script.setAttribute('src', 'https://c-js.sparkloop.app/c.js');
script.setAttribute('data-sparkloop', '');
script.setAttribute('async', 'true');
document.head.appendChild(script);

// 2. Track the Conversion (Checkout Completed)
analytics.subscribe('checkout_completed', (event) => {
    // Wait for the SparkLoop script to load before tracking
    const checkSparkLoop = setInterval(() => {
        if (typeof SparkLoop !== 'undefined') {
            clearInterval(checkSparkLoop);
            
            // FIRE CONVERSION
            SparkLoop.trackConversion("{OFFER_ID}");
        }
    }, 100);

    // Stop checking after 10 seconds to prevent errors
    setTimeout(() => clearInterval(checkSparkLoop), 10000);
});

Step 3: Save and Connect

Click Save in the top right corner.
Click the Connect button at the bottom (or top) of the page.
Click Connect again in the confirmation modal to make the pixel live.

How to Test Your Setup

Once you have added the code, you should verify that SparkLoop is successfully receiving the conversion data. We have a built-in tool to help you do this.

Step 1. In your SparkLoop dashboard, open your offer and then click "Conversion Pixel". In there you will see this section

Step 2. Click on the button. This will automatically redirect you to your landing page.

Note: You may notice some "fake" parameters added to the end of your URL. This is intentional; it simulates a referral link click so we can track the test.

Step 3. Run through the conversion process exactly as a subscriber would (add a product to the cart and complete the checkout).

Step 4. Once the purchase is complete, return to your SparkLoop dashboard.

Step 5. The status indicator/checkmark should now turn green, indicating the pixel fired correctly.

Troubleshooting

If the test does not turn green:

Check the Offer ID: Ensure you replaced {OFFER_ID} in the code with your specific ID (e.g., "12345").
Check the Pixel Status: Go back to Settings > Customer events in Shopify and ensure the status next to SparkLoop Conversion Pixel says Connected.
Ad Blockers: If you are testing this yourself, ensure your Ad Blocker is disabled, as it may block the tracking script.