LinkedIn Insight Tag for Next.js
This package takes advantage of the Next.js Script tag. Therefore, it requires Next.js >= 11.0.0.
npm install --save nextjs-linkedin-insight-tag
or
yarn add nextjs-linkedin-insight-tag
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.
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;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>
)
}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>