Implementing Bloom Custom Pixel

Note: Please ensure all steps in “Setting Up the Bloom Custom Pixel” are completed before proceeding.

Step 1 - Log in to your Shopify admin panel and navigate to Settings > Customer events.

Step 2 - Click on " Add custom pixel"

Step 3 - Provide a custom name for your pixel. You’ll be prompted to change it if it’s already in use.

Step 4 - Update the privacy setting.

Step 5 - Paste your BloomPixel Customer Events JavaScript code into the code window. Save your changes and confirm the pixel is firing correctly on your storefront.

Ensure you replace [your-domain] in the script with your actual domain (e.g., example.com or example.com.au) before adding it.

analytics.subscribe("checkout_completed", async (event) => {
  try {
    const checkout = event.data.checkout;
    const visitorId = document.cookie
      .split(';')
      .find(c => c.trim().startsWith('bloom_tracker_v10='))
      ?.split('=')[1] || null;

    
        await fetch('https://bloom.[your-domain]', {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify({
        event: 'checkout_completed',
        url: event.context?.document?.location?.href,
        cookie_value: visitorId,
        event_payload: JSON.stringify({
          orderId: checkout.order?.id,
          checkoutToken: checkout.token
        }),
        source: 'CustomBloomPixel',
        shop: event.context?.document?.location?.host,
        storeFrontURL: event.context?.window?.origin,
        buyerEmail: checkout.email
      }),
      keepalive: true
    });
  } catch (error) {
    console.error('Bloom tracking error:', error);
  }
});

Step 6 -Save your changes and verify that the pixel is firing correctly on your storefront.