How to use next12? - Githubissues

hehehai commented 2 months ago

<Html lang="zh-CN">
      <Head>
        <link rel="icon" href="/favicon.svg" type="image/svg+xml" />
        <OpenpanelProvider
          clientId="xxxx"
          trackScreenViews={true}
          trackAttributes={true}
          trackOutgoingLinks={true}
        />
      </Head>
      <body>
        <Main />
        <NextScript />
      </body>
 </Html>

I tried this but it didn't work

lindesvard commented 2 months ago

Hey! What didn't work exactly? Did the page break or do you not get any events?

hehehai commented 2 months ago

@lindesvard Yes, no events received. What's the correct way? Can I try it out?

lindesvard commented 2 months ago

So have not tried it with nextjs 12 but if they have the Script component it should work out of the box. Make sure you have the correct clientId and you use the same domain name.

A easy way to investigate this is to look in your network tab. Do you see any events to api.openpanel.dev? Are they 401 or 200?

If you do not get any request in the network tab you can try and include this code instead of OpenpanelProvider (remember to add your client id)

<script src="https://openpanel.dev/op.js" defer async></script>
<script dangerouslySetInnerHTML={{
    __html: `
      window.op = window.op || function (...args) { (window.op.q = window.op.q || []).push(args); };
      window.op('ctor', {
        clientId: 'YOUR_CLIENT_ID',
        trackScreenViews: true,
        trackOutgoingLinks: true,
        trackAttributes: true,
      });
    `,
  }}
/>

hehehai commented 2 months ago

@lindesvard Wow, great, it worked! grateful

Openpanel-dev / openpanel

How to use next12? #8