Skip to content

Latest commit

 

History

History
executable file
·
116 lines (84 loc) · 2.46 KB

README.md

File metadata and controls

executable file
·
116 lines (84 loc) · 2.46 KB
Raw

Nextjs LinkedIn Insight Tag

LinkedIn Insight Tag for Next.js

This package takes advantage of the Next.js Script tag. Therefore, it requires Next.js >= 11.0.0.

Installation

npm install --save nextjs-linkedin-insight-tag

or

yarn add nextjs-linkedin-insight-tag

Setup

Declare you LinkedIn partner Id in your .env file:

# .env

NEXT_PUBLIC_LINKEDIN_PARTNER_ID=1234

Or declare this variable as a Vercel environment variable or a Netlify environment variable.

Page Router

Add the LinkedInInsightTag component to your pages/_app.jsx or pages/_app.tsx file:

// pages/_app.jsx or pages/_app.tsx
import { LinkedInInsightTag } from 'nextjs-linkedin-insight-tag'

const App = ({ Component, pageProps }) => {
  return (
    <>
      <LinkedInInsightTag />
      <Component {...pageProps} />
    </>
  );
};

export default App;

App Router

Add the LinkedInInsightTag component to your global layout (probably src/app/layout.tsx), just before the closing body tag:

export default function RootLayout({
  children,
}: {
  children: React.ReactNode
}) {
  return (
    <html>
      <body>
        {children}
        <LinkedInInsightTag />
      </body>
    </html>
  )
}

Track events

If you have defined conversions in your LinkedIn Ad campaign, you need to track events:

Use linkedInTrack when an action takes place:

// pages/some-page.jsx or pages/some-page.tsx

import { linkedInTrack } from 'nextjs-linkedin-insight-tag'

<Button
  onClick={() => {
    const conversionId = 1234;
    linkedInTrack(conversionId);
    // Actually do something...
  }}
>
  Click me!
</Button>

Or you may prefer to use lintrk directly:

// pages/some-page.jsx or pages/some-page.tsx

import { lintrk } from 'nextjs-linkedin-insight-tag'

<Button
  onClick={() => {
    const conversionId = 1234;
    lintrk('track', { conversion_id: conversionId });
    // Actually do something...
  }}
>
  Click me!
</Button>

License

MIT