Wix eCommerce: Pixel i CAPI OpenAI Ads dla Wix Stores: Kompletna konfiguracja
Instrukcja instalacji Pixela OpenAI Ads i API Konwersji w Wix Stores przy użyciu Kodu Niestandardowego i zdarzeń Velo backendu.
Wix makes it easy to launch an online storefront, but tracking ad conversions on modern platforms like ChatGPT is another story. If you rely solely on Wix's Custom Code dashboard tool, you're depending entirely on the customer's browser to record purchases. What happens when a shopper pays with Klarna or PayPal and closes their tab before returning to your thank-you page? Or when an ad blocker silently kills third-party scripts?
The order appears in your Wix dashboard, but OpenAI Ads Manager never sees it. Your cost-per-acquisition (CPA) looks terrible, and the bidding algorithm starts optimizing for the wrong users.
To fix this, you don't need expensive third-party apps. You can use Wix's built-in Velo backend environment to dispatch server-side Conversions API (CAPI) events directly from cloud code the moment an order completes. Here is the complete step-by-step setup for browser pixel injection, confirmation tracking, and Velo CAPI recovery.
1. Event Mapping: Wix Stores to OpenAI Ads
| Customer Action | Wix Trigger Method | OpenAI Ads Event | Delivery Method |
|---|---|---|---|
| View Page / Home | Site Load | page_viewed | Browser Pixel (Custom Code) |
| View Product Details | Store Product Page | contents_viewed | Browser Pixel |
| Add Item to Cart | Wix Cart Slideout | items_added | Browser Pixel |
| Checkout Step 1 | Wix Checkout Load | checkout_started | Browser Pixel |
| Thank You Screen | Order Confirmation Page | order_created | Browser Pixel |
| Order Confirmed in DB | Velo onNewOrder | order_created | Server CAPI (wix-fetch) |
2. Installing the Base Pixel via Wix Custom Code
- In your Wix Dashboard, go to Settings > Custom Code.
- Click + Add Custom Code.
- Paste the OpenAI Ads initialization script:
<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>
- Configure script settings: - Name:
OpenAI Ads Base Pixel- Add Code to Pages:All Pages - Load code on each new page- Place Code in:Head- Code Type:Analytics - Click Apply.
3. Order Confirmation Client Script in Wix
Next, create a second Custom Code entry targeted specifically at the Order Confirmation page:
- In Settings > Custom Code, click + Add Custom Code.
- Set Place Code in to
Body - end. - Set Add Code to Pages to
Order Confirmation Page. - Paste the following snippet:
<script>
// Wix stores order details in URL query parameters and local storage on confirmation
(function() {
var urlParams = new URLSearchParams(window.location.search);
var orderNumber = urlParams.get('orderNumber') || ('wix_' + Date.now());
var dedupKey = 'wix_order_' + orderNumber;
if (window.oaiq) {
window.oaiq('event', 'order_created', {
order_id: String(orderNumber),
event_id: dedupKey
});
}
})();
</script>
4. Server-Side CAPI Implementation via Velo (events.js)
Client-side confirmation scripts fail whenever customers close their mobile browsers immediately after completing a card transaction. With Velo, Wix lets you run Node.js backend events triggered directly by store actions.
A. Open the Velo Code Sidebar
- In the Wix Studio or Wix Editor, turn on Dev Mode.
- In the left sidebar, navigate to Backend Code.
- Create a file named
events.js(or open it if you already have one).
B. Add the onNewOrder Hook
Add this code to backend/events.js. It runs securely in Wix's cloud infrastructure whenever an order is successfully created:
import { fetch } from 'wix-fetch';
import { getSecret } from 'wix-secrets-backend';
// Helper: SHA-256 hash using Web Crypto API available in Velo Node runtime
async function hashValue(val) {
if (!val) return null;
const normalized = val.trim().toLowerCase();
const msgUint8 = new TextEncoder().encode(normalized);
const hashBuffer = await crypto.subtle.digest('SHA-256', msgUint8);
const hashArray = Array.from(new Uint8Array(hashBuffer));
return hashArray.map(b => b.toString(16).padStart(2, '0')).join('');
}
export async function wixStores_onNewOrder(event) {
const order = event;
const orderNumber = order.number;
const dedupKey = 'wix_order_' + orderNumber; // Identical to browser event_id
// Retrieve credentials from Wix Secrets Manager
const pixelId = await getSecret('OPENAI_PIXEL_ID');
const capiKey = await getSecret('OPENAI_CAPI_KEY');
const emailHash = await hashValue(order.buyerInfo.email);
const phoneRaw = order.buyerInfo.phone ? order.buyerInfo.phone.replace(/\D/g, '') : null;
const phoneHash = phoneRaw ? await hashValue(phoneRaw) : null;
// Convert order total to minor currency integer (e.g. cents)
const amountCents = Math.round(Number(order.totals.total) * 100);
const currency = order.currency;
const endpoint = `https://bzr.openai.com/v1/events?pid=${pixelId}`;
const payload = {
validate_only: false,
events: [
{
id: `srv_wix_${orderNumber}_${Date.now()}`,
type: 'order_created',
timestamp_ms: Date.now(),
action_source: 'website',
event_id: dedupKey,
user_data: {
em: emailHash,
ph: phoneHash,
country: order.billingInfo && order.billingInfo.address ? order.billingInfo.address.country.toLowerCase() : null
},
data: {
amount: amountCents,
currency: currency,
order_id: String(orderNumber)
}
}
]
};
try {
await fetch(endpoint, {
method: 'POST',
headers: {
'Authorization': `Bearer ${capiKey}`,
'Content-Type': 'application/json'
},
body: JSON.stringify(payload)
});
} catch (err) {
console.error('OpenAI CAPI Error on Wix order:', err);
}
}
5. Deduplication and Testing
Both our front-end Custom Code script and backend Velo hook share the exact same event_id: "wix_order_" + orderNumber.
When a customer completes a purchase normally, OpenAI receives the client event first, records the ad click context, and merges it with the verified server-side total arriving from Velo. If an ad blocker kills the browser script, the Velo cloud hook ensures the order is attributed without a hiccup.
Need a hand setting up or testing your Wix conversion tracking? Check out our Done-For-You Ecommerce Tracking service.