Easily add a LinkedIn Insight Tag to a NextJS app
npm install nextjs-linkedin-insight-tagScript tag. Therefore, it requires Next.js >= 11.0.0.
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.
$3
Add the LinkedInInsightTag component to your pages/_app.jsx or pages/_app.tsx file:
`js
// pages/_app.jsx or pages/_app.tsx
import { LinkedInInsightTag } from 'nextjs-linkedin-insight-tag'
const App = ({ Component, pageProps }) => {
return (
<>
>
);
};
export default App;
`
$3
Add the LinkedInInsightTag component to your global layout (probably src/app/layout.tsx), just before the closing body tag:
`js
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
{children}
)
}
`
Track events
If you have defined conversions in your LinkedIn Ad campaign, you need to track events:
Use linkedInTrack when an action takes place:
`js
// pages/some-page.jsx or pages/some-page.tsx
import { linkedInTrack } from 'nextjs-linkedin-insight-tag'
onClick={() => {
const conversionId = 1234;
linkedInTrack(conversionId);
// Actually do something...
}}
>
Click me!
`
Or you may prefer to use lintrk directly:
`js
// pages/some-page.jsx or pages/some-page.tsx
import { lintrk } from 'nextjs-linkedin-insight-tag'
onClick={() => {
const conversionId = 1234;
lintrk('track', { conversion_id: conversionId });
// Actually do something...
}}
>
Click me!
``