nextjs-linkedin-insight-tag
v0.0.6
Published
Easily add a LinkedIn Insight Tag to a NextJS app
Downloads
12,196
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-tagor
yarn add nextjs-linkedin-insight-tagSetup
Declare you LinkedIn partner Id in your .env file:
# .env
NEXT_PUBLIC_LINKEDIN_PARTNER_ID=1234Or 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>