nextjs-linkedin-insight-tag
v0.0.6
Published
Easily add a LinkedIn Insight Tag to a NextJS app
Downloads
18,489
Readme
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>