Published September 8, 2026

How to add LinkedIn Insight Tag to Next.js with c15t

Member of Technical Staff

Add LinkedIn Insight Tag to a Next.js App Router project with c15t so the tag loads only after marketing consent, then track custom conversions safely.

Topic: Guides
Reading time: 6 min read

LinkedIn Insight Tag is often pasted into a global footer. In a Next.js App Router project, that can load the tag before the visitor has made a consent choice. c15t gives the tag a consent lifecycle, so LinkedIn loads only after marketing consent is granted.

This guide uses the c15t LinkedIn Insights helper from @c15t/scripts/linkedin-insights. It covers the baseline setup, guarded custom conversions, and checks for EU and UK-facing apps.

What you will build

By the end, you can:

Install c15t in a Next.js App Router project.
Register LinkedIn Insight Tag through @c15t/scripts/linkedin-insights.
Load the tag only after marketing consent is granted.
Track event-specific LinkedIn conversions from client components.
Test that the tag stays blocked before consent and stops loading after withdrawal.
Identify pages where LinkedIn says the tag should not be installed.

You need a Next.js App Router project, a c15t backend URL, and a LinkedIn Insight Tag partner ID from Campaign Manager.

How c15t and LinkedIn split the work

LinkedIn Insight Tag measures ad conversions, builds website audiences, and supports audience insights for LinkedIn advertising. LinkedIn says the tag creates cookies and, outside the EU, EEA, Quebec, and UK, can create a first-party pseudonymous identifier called li_adsid.

In c15t, the LinkedIn Insights helper belongs to the marketing category. c15t sets LinkedIn partner ID globals, seeds the lintrk queue, and loads LinkedIn's insight.min.js only after marketing consent is granted. If marketing consent is revoked, c15t unloads the script element from the DOM.

That lifecycle changes where the tag belongs in your app. Do not paste the LinkedIn snippet into app/layout.tsx, <Head>, next/script, or a global footer. Register the helper with c15t instead, then let the consent runtime decide when it can load.

For EU and UK users, this is the safer default for advertising pixels. The EDPB says Article 5(3) of the ePrivacy Directive can apply to pixel and URL tracking, and the UK ICO says storage or access technologies used for online advertising require consent unless a specific exception applies. Treat this as a pattern that supports prior consent gating, not as a guarantee that the whole implementation is legally compliant.

Install c15t and the script helpers

Install the Next.js package and the script integrations package.

npm install @c15t/nextjs @c15t/scripts

If you use the prebuilt banner and dialog, import the c15t stylesheet from your app-level CSS file.

/* app/globals.css */
@import "@c15t/nextjs/styles.css";

The c15t docs recommend keeping this import in the global CSS entrypoint so layer and cascade order stay predictable.

Register LinkedIn Insight Tag with c15t

Create a client provider and pass the LinkedIn helper through the scripts option. Use your LinkedIn partner ID as id. You can find it in Campaign Manager under Data, Signals manager, Insight Tag.

// components/consent-manager/provider.tsx
'use client';

import { type ReactNode } from 'react';
import {
  ConsentBanner,
  ConsentDialog,
  ConsentManagerProvider,
} from '@c15t/nextjs';
import { linkedinInsights } from '@c15t/scripts/linkedin-insights';

const scripts = [
  linkedinInsights({
    id: process.env.NEXT_PUBLIC_LINKEDIN_PARTNER_ID!,
  }),
];

export function ConsentProvider({ children }: { children: ReactNode }) {
  return (
    <ConsentManagerProvider
      options={{
        mode: 'hosted',
        backendURL: process.env.NEXT_PUBLIC_C15T_BACKEND_URL!,
        consentCategories: ['necessary', 'measurement', 'marketing'],
        scripts,
      }}
    >
      <ConsentBanner />
      <ConsentDialog />
      {children}
    </ConsentManagerProvider>
  );
}

Use hosted mode for production when you need backend-backed consent records, jurisdiction resolution, and audit history. c15t also supports offline mode, but the docs warn that offline mode stores consent only in the browser and does not provide backend audit history or automatic jurisdiction detection.

Mount the provider at the app root so every route can read the same consent state.

// app/layout.tsx
import type { ReactNode } from 'react';
import { ConsentProvider } from '@/components/consent-manager/provider';
import './globals.css';

export default function RootLayout({ children }: { children: ReactNode }) {
  return (
    <html lang="en">
      <body>
        <ConsentProvider>{children}</ConsentProvider>
      </body>
    </html>
  );
}

After this change, LinkedIn should not appear in the DOM before the visitor grants marketing consent.

Track custom LinkedIn conversions safely

LinkedIn page tracking is automatic after the script loads. Event-specific conversions are different. If your app calls window.lintrk(...), c15t does not automatically gate that call for you. The global does not exist before marketing consent is granted, and it can be removed again after consent is revoked.

Add a small type declaration for the LinkedIn runtime API your app uses.

// types/linkedin-insight.d.ts
export {};

declare global {
  interface Window {
    lintrk?: (
      command: 'track',
      payload: { conversion_id: number },
    ) => void;
  }
}

Then guard conversion calls with useConsentManager().has('marketing').

// components/signup-button.tsx
'use client';

import { useCallback } from 'react';
import { useConsentManager } from '@c15t/nextjs';

const LINKEDIN_SIGNUP_CONVERSION_ID = 1234567;

function useTrackLinkedInSignup() {
  const { has } = useConsentManager();

  return useCallback(() => {
    if (!has('marketing')) {
      return;
    }

    window.lintrk?.('track', {
      conversion_id: LINKEDIN_SIGNUP_CONVERSION_ID,
    });
  }, [has]);
}

export function SignupButton() {
  const trackLinkedInSignup = useTrackLinkedInSignup();

  async function handleSignup() {
    // Run your signup request first.
    // await createAccount();

    trackLinkedInSignup();
  }

  return <button onClick={handleSignup}>Create account</button>;
}

Keep the conversion ID in configuration if it differs between development, staging, and production. Do not fire the event before the user action succeeds. Otherwise LinkedIn can record a conversion for a failed signup, checkout, or lead form.

Avoid installing the tag on sensitive pages

LinkedIn says the Insight Tag should not be installed on pages that collect or contain sensitive data, including certain consumer health or financial pages. It gives examples such as pages where users manage financial accounts, medical appointments, or certain medication-related services.

If your app has those routes, do not treat the provider example above as a copy-paste final state. Decide with counsel and the product team where the tag is allowed to run. Common options include:

Keep LinkedIn Insight Tag out of apps that include sensitive authenticated areas.
Split marketing pages and sensitive product pages into separate route groups with different consent providers.
Move conversion measurement for sensitive flows to a server-side process that legal and security teams have reviewed.
Disable LinkedIn enhanced matching unless your legal review approves the exact data sharing.

The main rule is simple: do not let a global marketing pixel become global by accident.

Test consent behavior

Test the page with a clean browser profile or an incognito window.

Before consent:

Open DevTools and select the Network tab.
Filter for linkedin, ads.linkedin, and insight.min.js.
Reload the page.
Confirm the LinkedIn script does not load before a marketing choice is granted.

After marketing consent:

Accept marketing cookies or enable marketing in the consent dialog.
Confirm insight.min.js loads.
Trigger a custom conversion, if you configured one.
Confirm the request appears only after consent.

After withdrawal:

Open the consent dialog again.
Turn off marketing consent.
Confirm c15t removes the LinkedIn script element.
Trigger the conversion action again and confirm your guarded code does not call window.lintrk.

LinkedIn's source status can take a few minutes and up to 24 hours to update after traffic reaches a tagged domain. Use browser-level checks first, then confirm the source status in Campaign Manager.

Troubleshooting LinkedIn and c15t

If LinkedIn loads before consent, check for a second install. Search your app for linkedin_data_partner_id, lintrk, insight.min.js, px.ads.linkedin.com, and next/script. A duplicate snippet bypasses c15t.

If custom conversions do not fire, confirm that marketing consent is granted and that window.lintrk exists before the call. The c15t script loader controls when the SDK loads, but your application code still needs to guard direct SDK calls.

If Campaign Manager does not show activity, wait up to 24 hours after a consented page load. Then check that the partner ID matches the ad account and that the current domain is allowed for the Insight Tag.

If consent withdrawal does not appear to stop events, confirm the conversion helper returns early when has('marketing') is false. Also check whether another tag manager or copied snippet still loads LinkedIn outside c15t.

Sources for legal and implementation review

Use these sources during review, especially if your app serves EU or UK visitors:

c15t LinkedIn Insights documentation
c15t Next.js script loader
c15t Next.js quickstart
LinkedIn Insight Tag overview
LinkedIn Insight Tag advertising page
EDPB Guidelines 2/2023 on the technical scope of Article 5(3) of the ePrivacy Directive
EDPB Guidelines 05/2020 on consent under the GDPR
UK PECR Regulation 6
UK ICO guidance on online advertising and storage or access technologies

Next steps

You have now configured LinkedIn Insight Tag as a consent-aware marketing script. You can:

Keep LinkedIn out of the page until marketing consent is granted.
Track custom conversions only when the LinkedIn runtime is available.
Verify consent behavior in DevTools before checking Campaign Manager.
Flag sensitive routes for legal review before the tag ships.

For similar patterns, read How to integrate Meta Pixel in Next.js with c15t, How to add PostHog to Next.js with GDPR-aware consent, and How to implement Consent Mode v2 as a product control.

// components/consent-manager/provider.tsx 'use client'; import { type ReactNode } from 'react'; import { ConsentBanner, ConsentDialog, ConsentManagerProvider, } from '@c15t/nextjs'; import { linkedinInsights } from '@c15t/scripts/linkedin-insights'; const scripts = [ linkedinInsights({ id: process.env.NEXT_PUBLIC_LINKEDIN_PARTNER_ID!, }), ]; export function ConsentProvider({ children }: { children: ReactNode }) { return ( <ConsentManagerProvider options={{ mode: 'hosted', backendURL: process.env.NEXT_PUBLIC_C15T_BACKEND_URL!, consentCategories: ['necessary', 'measurement', 'marketing'], scripts, }} > <ConsentBanner /> <ConsentDialog /> {children} </ConsentManagerProvider> ); }

// app/layout.tsx import type { ReactNode } from 'react'; import { ConsentProvider } from '@/components/consent-manager/provider'; import './globals.css'; export default function RootLayout({ children }: { children: ReactNode }) { return ( <html lang="en"> <body> <ConsentProvider>{children}</ConsentProvider> </body> </html> ); }

// components/signup-button.tsx 'use client'; import { useCallback } from 'react'; import { useConsentManager } from '@c15t/nextjs'; const LINKEDIN_SIGNUP_CONVERSION_ID = 1234567; function useTrackLinkedInSignup() { const { has } = useConsentManager(); return useCallback(() => { if (!has('marketing')) { return; } window.lintrk?.('track', { conversion_id: LINKEDIN_SIGNUP_CONVERSION_ID, }); }, [has]); } export function SignupButton() { const trackLinkedInSignup = useTrackLinkedInSignup(); async function handleSignup() { // Run your signup request first. // await createAccount(); trackLinkedInSignup(); } return <button onClick={handleSignup}>Create account</button>; }