BigCommerce : Pixel et CAPI OpenAI Ads pour BigCommerce : Configuration complète

BigCommerce merchants scaling ad spend on ChatGPT face a unique technical hurdle: the platform's Optimized One-Page Checkout runs in a locked-down environment with strict Content Security Policies (CSP). If you try to paste custom tracking scripts directly into template files like checkout.html, BigCommerce simply strips them out.

Even worse, client-side tracking frequently drops conversions when shoppers pay via digital wallets or leave the confirmation screen early.

To get accurate attribution without breaking checkout security, you need a two-tier setup. First, install the client pixel using BigCommerce's official Script Manager. Second, set up a serverless webhook listener to forward confirmed orders directly to OpenAI's Conversions API (CAPI). Here is the complete implementation blueprint.

---

1. BigCommerce Event Mapping Table

---

2. Installing the Pixel via BigCommerce Script Manager

Never hardcode tracking scripts into your Stencil theme files. BigCommerce Script Manager is the approved, CSP-compliant path to inject scripts across storefront and checkout pages:

1. Navigate to Settings > Advanced > Script Manager in your BigCommerce Admin dashboard.
2. Click Create a Script.
3. Fill out the configuration fields: - Name of script: OpenAI Ads Base Pixel - Description: Loads the official OpenAI Ads oaiq measurement library - Location on page: Head - Select pages where script will be added: All pages - Script category: Analytics - Script type: Script
4. Paste the following script code:

<script>
  !function(w,d,e,v,n,t,s){if(w.oaiq)return;n=w.oaiq=function(){n.callMethod?
  n.callMethod.apply(n,arguments):n.queue.push(arguments)};if(!w._oaiq)w._oaiq=n;
  n.push=n;n.loaded=!0;n.version='1.0';n.queue=[];t=d.createElement(e);t.async=!0;
  t.src=v;s=d.getElementsByTagName(e)[0];s.parentNode.insertBefore(t,s)}
  (window,document,'script','https://bzrcdn.openai.com/pixel.js');
  oaiq('init', 'YOUR_OPENAI_PIXEL_ID');
  oaiq('event', 'page_viewed');
</script>

1. Click Save.

---

3. Capturing Order Confirmations on BigCommerce

To fire the browser-side purchase event, create a second script in Script Manager scoped specifically to the order confirmation page:

1. In Script Manager, click Create a Script.
2. Name the script OpenAI Ads Purchase Confirmation.
3. Set Location on page to Head.
4. Set Select pages where script will be added to Order confirmation.
5. Paste this snippet:

<script>
  (function() {
    // BigCommerce injects checkout data into window globals on confirmation
    var orderId = '%%ORDER_ID%%';
    var orderAmount = '%%ORDER_AMOUNT%%';
    var amountCents = Math.round(parseFloat(orderAmount) * 100);
    var dedupKey = 'bc_order_' + orderId;

    if (window.oaiq && orderId) {
      window.oaiq('event', 'order_created', {
        order_id: String(orderId),
        amount: amountCents,
        currency: 'USD',
        event_id: dedupKey
      });
    }
  })();
</script>

---

4. Server-Side CAPI Relay via Webhooks

Browser tracking alone will lose 10% to 25% of purchases to ad blockers, network dropouts, or Safari's 7-day cookie caps. To capture 100% of revenue, subscribe an asynchronous serverless listener (such as Cloudflare Workers or AWS Lambda) to BigCommerce's store/order/created webhook.

A. Register the BigCommerce Webhook

Send an authenticated POST request to BigCommerce's Webhook Management API:

curl -X POST "https://api.bigcommerce.com/stores/YOUR_STORE_HASH/v3/hooks" \
  -H "X-Auth-Token: YOUR_ACCESS_TOKEN" \
  -H "Content-Type: application/json" \
  -d '{
    "scope": "store/order/created",
    "destination": "https://your-serverless-relay.example.com/webhooks/bigcommerce",
    "is_active": true
  }'

B. Relay Serverless Function (Cloudflare Worker Example)

When an order is created, BigCommerce sends a lightweight notification containing the id. Your relay fetches the full order details from the BigCommerce REST API, normalizes customer data, and dispatches an authenticated POST to OpenAI CAPI:

export default {
  async fetch(request, env) {
    if (request.method !== 'POST') return new Response('Method Not Allowed', { status: 405 });

    const event = await request.json();
    const orderId = event.data.id;

    // Fetch full order data from BigCommerce REST API
    const bcResponse = await fetch(`https://api.bigcommerce.com/stores/${env.BC_STORE_HASH}/v2/orders/${orderId}`, {
      headers: {
        'X-Auth-Token': env.BC_AUTH_TOKEN,
        'Accept': 'application/json'
      }
    });
    const order = await bcResponse.json();

    // SHA-256 hash helper
    async function sha256(val) {
      if (!val) return null;
      const data = new TextEncoder().encode(val.trim().toLowerCase());
      const hashBuf = await crypto.subtle.digest('SHA-256', data);
      return Array.from(new Uint8Array(hashBuf)).map(b => b.toString(16).padStart(2, '0')).join('');
    }

    const emailHash = await sha256(order.billing_address.email);
    const phoneDigits = order.billing_address.phone.replace(/\D/g, '');
    const phoneHash = phoneDigits ? await sha256(phoneDigits) : null;
    const amountCents = Math.round(parseFloat(order.total_inc_tax) * 100);
    const dedupKey = 'bc_order_' + orderId; // Exact match to browser event_id

    const capiPayload = {
      validate_only: false,
      events: [{
        id: `srv_bc_${orderId}_${Date.now()}`,
        type: 'order_created',
        timestamp_ms: Date.now(),
        action_source: 'website',
        event_id: dedupKey,
        user_data: {
          em: emailHash,
          ph: phoneHash,
          client_ip_address: order.ip_address,
          country: order.billing_address.country_iso2.toLowerCase()
        },
        data: {
          amount: amountCents,
          currency: order.currency_code,
          order_id: String(orderId)
        }
      }]
    };

    // Forward to OpenAI CAPI
    await fetch(`https://bzr.openai.com/v1/events?pid=${env.OPENAI_PIXEL_ID}`, {
      method: 'POST',
      headers: {
        'Authorization': `Bearer ${env.OPENAI_CAPI_KEY}`,
        'Content-Type': 'application/json'
      },
      body: JSON.stringify(capiPayload)
    });

    return new Response(JSON.stringify({ success: true }), { status: 200 });
  }
};

---

5. Event Deduplication and Verification

Deduplication protects your reporting from double-counted sales when both channels fire.

In this architecture, both the confirmation script and the Cloudflare Worker relay generate event_id: "bc_order_" + orderId. OpenAI matches these matching keys within a 48-hour window, merges the click attribution cookie from the browser with the verified server-side total, and logs a single conversion.

If an ad blocker blocks the Script Manager confirmation snippet, your serverless webhook relay guarantees the conversion still appears in OpenAI Ads Manager.

Need a dedicated audit of your BigCommerce tracking setup? Learn about our Done-For-You Ecommerce Tracking service.