Install the pixel

Add the Opinly pixel to your site — script tag or framework package — and confirm it's reporting.

The pixel is a small script that runs in your visitors' browsers. It records page views, clicks and form submissions, and it assigns each visitor an anonymous ID that later ties their purchase back to the campaign that brought them in.

It runs with your publishable pk- key, which is safe to put in client-side code. That key is write-only: it can send events and nothing else. Don't use your secret sk- key here — that one belongs on your server, and is covered in Events & tracking.

Get your key

In the dashboard, open Analytics → Setup. Your pk- key is shown there, along with the snippet below pre-filled. If you connected WordPress, a key was already created for you.

Add it to your site

Paste this into your <head>, on every page you want to track.

<script async src="https://static.opinly.ai/p.js" data-key="pk-your-key"></script>

That's the whole install. data-key is the only required attribute.

pnpm add @opinly/next

Render <OpinlyPixel> in your root layout so it loads on every route. It uses next/script under the hood, so it won't block your page.

// app/layout.tsx
import { OpinlyPixel } from '@opinly/next/pixel'

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <OpinlyPixel writeKey="pk-your-key" host="https://static.opinly.ai" />
      </body>
    </html>
  )
}

SPA navigations are handled for you — the pixel patches the History API, so an App Router route change fires a page_view without any extra wiring.

pnpm add @opinly/react

Render it once, near the root of your app (Vite, Remix, Astro islands — anything).

import { OpinlyPixel } from '@opinly/react/pixel'

export function App() {
  return (
    <>
      <YourRoutes />
      <OpinlyPixel writeKey="pk-your-key" host="https://static.opinly.ai" />
    </>
  )
}

pnpm add @opinly/vue

Install it as a plugin:

// main.ts
import { OpinlyPixel } from '@opinly/vue'

app.use(OpinlyPixel, {
  writeKey: 'pk-your-key',
  host: 'https://static.opinly.ai',
})

pnpm add @opinly/nuxt

Call useOpinlyPixel once in your app root:

<script setup lang="ts">
import { useOpinlyPixel } from '@opinly/nuxt'

useOpinlyPixel({
  writeKey: 'pk-your-key',
  host: 'https://static.opinly.ai',
})
</script>

pnpm add @opinly/sveltekit

Add the component to your root layout:

<!-- src/routes/+layout.svelte -->
<script lang="ts">
  import { OpinlyPixel } from '@opinly/sveltekit'
</script>

<slot />
<OpinlyPixel writeKey="pk-your-key" host="https://static.opinly.ai" />

pnpm add @opinly/svelte

<script lang="ts">
  import { OpinlyPixel } from '@opinly/svelte'
</script>

<OpinlyPixel writeKey="pk-your-key" host="https://static.opinly.ai" />

Any bundler, any framework. loadOpinlyPixel injects the script tag for you and is safe to call during SSR (it no-ops when there's no document).

import { loadOpinlyPixel } from '@opinly/shared/pixel'

loadOpinlyPixel({
  writeKey: 'pk-your-key',
  host: 'https://static.opinly.ai',
})

If you'd rather not add a dependency at all, use the plain script tag from the HTML tab.

host is always https://static.opinly.ai. It serves both the script and the endpoint the script reports to, which is why you never need to configure an API host separately.

Confirm it's working

Load a page on your site, then check either of these:

In your browser. Open the Network tab and reload. You should see p.js load, followed by a POST to https://static.opinly.ai/track.

p.js loads but no POST follows — your data-key is missing. The script bails silently without one.
The POST comes back 401 — the key is wrong. Check you copied your publishable pk- key and not your secret sk- key.

In the dashboard. Open Analytics → Customers. Your visit appears in the Visitors table within a few seconds.

Check the Visitors table, not the Conversions card. Page views are aggregated rather than listed as events — see What gets captured — so a healthy pixel shows an empty Conversions card until your first conversion fires. That's expected.

Next steps

See exactly what gets captured automatically, and what you have to send yourself.
Tie visitors to real people with Identify visitors.
Attribute a server-side purchase back to a browser visit with Linking server events.

Install the pixel

Get your key

Add it to your site

Confirm it's working

Next steps

On this page