OpenAI AdsIntegration Wizard
Select your platform and follow the step-by-step guide. Copy-paste ready code for every framework.
Create the Script Component
Create a new file called PixelScript.tsx in your components folder. This component loads the pixel SDK and initializes the pixel.
'use client'
import Script from 'next/script'
export function PixelScript({ pixelId }: { pixelId: string }) {
return (
<Script
id="oaiq-pixel"
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
(function(w,d,s,u){
if(w.oaiq)return;
var q=function(){q.q.push(arguments)};q.q=[];w.oaiq=q;
var js=d.createElement(s);js.async=true;js.src=u;
var f=d.getElementsByTagName(s)[0];f.parentNode.insertBefore(js,f);
})(window,document,"script","https://bzrcdn.openai.com/sdk/oaiq.min.js");
oaiq("init",{pixelId:"${pixelId}"});
`
}}
/>
)
}Add to Root Layout
Open app/layout.tsx and import the PixelScript component. Place it inside the <body> tag, passing your OpenAI Ads Pixel ID.
import { PixelScript } from '@/components/PixelScript'
export default function RootLayout({
children
}: { children: React.ReactNode }) {
return (
<html>
<body>
{children}
<PixelScript pixelId="YOUR_PIXEL_ID" />
</body>
</html>
)
}Measure Conversion Events
Use the oaiq function anywhere in your app to measure custom conversion events like purchases or sign-ups.
'use client'
export function PurchaseButton() {
const handlePurchase = async () => {
// Your purchase logic here
await fetch('/api/checkout', { method: 'POST' })
// Measure conversion
oaiq("measure", "order_created", { type: "contents", amount: 2599, currency: "USD" })
}
return <button onClick={handlePurchase}>Buy Now</button>
}Verification Checklist
Troubleshooting
Script not loading
oaiq is not defined
Pixel ID not recognized
What Is the OpenAI Ads Integration Wizard?
This interactive wizard provides framework-specific instructions for installing the OpenAI Ads (ChatGPT Ads) conversion pixel on your website. Select your platform — Next.js, WordPress, Shopify, React, Vue, or plain HTML — and get step-by-step guidance with ready-to-use code snippets, a verification checklist, and common troubleshooting tips.
Why Use This Wizard?
Setting up the OpenAI Ads pixel correctly is critical for conversion tracking and campaign optimization. A misconfigured pixel leads to lost data and wasted ad spend. This wizard eliminates guesswork by giving you the exact code and configuration for your specific tech stack, tested and verified.
Need More Help?
For real-time pixel debugging and event validation, install the ChatGPT Pixel Helper Chrome extension. For WordPress sites, the Ridoway Pixel plugin handles everything automatically including Conversions API (CAPI) support.
More tools for ChatGPT Ads
Try the other free tools across the OpenAI Ads ecosystem.
Ridoway Pixel
Free WordPress plugin for OpenAI Ads conversion tracking — browser pixel + Conversions API, 5-minute setup.
ChatGPT Pixel Helper
Chrome extension that inspects oaiq calls, beacons, cookies, and CAPI misuse in real time.
Context Hint Generator
Turn product, offer, and audience into ready-to-paste context hints in your browser — free.
Context Hint Plugin
Research buyer conversations, nearby advertisers, and validated hints inside Claude, ChatGPT, or Codex.
Reach Calculator
Estimate audience reach and impressions across ChatGPT Ads placements and countries.
CPC Budget Calculator
Turn a monthly budget into expected clicks, impressions, and conversions for ChatGPT Ads.