linkedin-insight-tag

v1.4.1

Published

23 days ago

Lightweight React component and hook for LinkedIn Insight Tag with TypeScript support, SSR safety, and SPA route tracking

0High
0Medium
0Low

ruban-s

linkedin insight-tag react nextjs analytics tracking conversion retargeting gdpr typescript

linkedin-insight-tag

Lightweight LinkedIn Insight Tag for React and vanilla JS. TypeScript-first, SSR-safe, zero dependencies.

Install

npm install linkedin-insight-tag
# or
yarn add linkedin-insight-tag
# or
pnpm add linkedin-insight-tag

React — Quick Start

Add the component once in your app root:

import { LinkedInInsightTag } from "linkedin-insight-tag";

function App() {
  return (
    <>
      <LinkedInInsightTag partnerId="123456" />
      {/* your app */}
    </>
  );
}

Multiple Partner IDs

<LinkedInInsightTag partnerId={["123456", "789012"]} />

GDPR Consent Mode

Defer script loading until user consents:

const [consent, setConsent] = useState(false);

<LinkedInInsightTag partnerId="123456" consent={consent} />
<button onClick={() => setConsent(true)}>Accept Cookies</button>

No script loads, no cookies set, no noscript pixel rendered until consent is true.

Sensitive Page Exclusion

Exclude health, financial, or other sensitive pages per LinkedIn's terms:

<LinkedInInsightTag
  partnerId="123456"
  excludePaths={["/account/*", "/health/*", "/checkout/payment"]}
/>

Supports exact paths and wildcard prefix matching (/admin/* matches /admin/users).

onLoad Callback

<LinkedInInsightTag
  partnerId="123456"
  onLoad={() => console.log("LinkedIn pixel ready")}
/>

Debug Mode

<LinkedInInsightTag partnerId="123456" debug />

Logs all tracking calls: [linkedin-insight-tag] track: { conversion_id: "..." }

Conversion Tracking

import { useLinkedInTracking } from "linkedin-insight-tag";

function SignupButton() {
  const { track } = useLinkedInTracking();

  return (
    <button onClick={() => track("YOUR_CONVERSION_ID")}>
      Sign Up
    </button>
  );
}

Event Helpers

Typed convenience methods for common conversion types:

const { trackPurchase, trackSignup, trackFormSubmit, trackLead, trackDownload } =
  useLinkedInTracking();

trackPurchase("PURCHASE_ID", { value: 99.99, currency: "USD" });
trackSignup("SIGNUP_ID");
trackFormSubmit("FORM_ID");
trackLead("LEAD_ID", { value: 50, currency: "EUR" });
trackDownload("DOWNLOAD_ID");

A/B Variant Tracking

Pass experiment variant data with any conversion:

track("CONV_ID", { variant: "B" });
trackPurchase("CONV_ID", { value: 99, currency: "USD", variant: "checkout-v2" });

With Event ID (CAPI Deduplication)

track("CONV_ID", { eventId: "unique-event-id-123" });

Page-Level Event ID

For page load conversion deduplication with LinkedIn's Conversions API:

import { setPageEventId } from "linkedin-insight-tag";

setPageEventId("unique-page-load-id");

Retargeting Segments

Define URL-based audience segments and match visitors:

import { matchSegment, useRetargetingSegment } from "linkedin-insight-tag";

const segments = [
  { name: "high-intent", paths: ["/pricing", "/demo", "/contact"] },
  { name: "blog-readers", paths: ["/blog/*"] },
  { name: "product-interest", paths: ["/features/*", "/integrations/*"] },
];

// React hook
function MyComponent() {
  const { pathname } = useLocation();
  const segment = useRetargetingSegment(segments, pathname);
  // segment = "high-intent" | "blog-readers" | null
}

// Imperative
const segment = matchSegment(segments, "/pricing"); // "high-intent"

Email Hashing

SHA-256 hash emails for LinkedIn Matched Audiences:

import { hashEmail } from "linkedin-insight-tag";

const hashed = await hashEmail("[email protected]");

Auto-normalizes (trim + lowercase) before hashing.

SPA Page View Tracking

import { useLinkedInPageView } from "linkedin-insight-tag";
import { useLocation } from "react-router-dom";

function PageViewTracker() {
  const { pathname } = useLocation();
  useLinkedInPageView({ conversionId: "PAGE_VIEW_CONV_ID", pathname });
  return null;
}

Next.js

Optimized component using next/script with afterInteractive strategy:

import { LinkedInInsightScript } from "linkedin-insight-tag/next";
import Script from "next/script";

export default function RootLayout({ children }) {
  return (
    <html>
      <body>
        {children}
        <LinkedInInsightScript
          partnerId="123456"
          ScriptComponent={Script}
        />
      </body>
    </html>
  );
}

Imperative API (Vanilla JS / Vue / Svelte)

import { LinkedInTag } from "linkedin-insight-tag";

// Initialize
LinkedInTag.init({
  partnerId: "123456",
  debug: true,
  onLoad: () => console.log("ready"),
});

// Track conversions
LinkedInTag.track("CONV_ID");
LinkedInTag.trackPurchase("CONV_ID", { value: 49.99, currency: "EUR" });
LinkedInTag.trackSignup("CONV_ID");
LinkedInTag.trackFormSubmit("CONV_ID");
LinkedInTag.trackLead("CONV_ID");
LinkedInTag.trackDownload("CONV_ID");

// A/B testing
LinkedInTag.track("CONV_ID", { variant: "B" });

// CAPI deduplication
LinkedInTag.track("CONV_ID", { eventId: "dedup-id-123" });
LinkedInTag.setPageEventId("page-load-dedup-id");

// Retargeting
LinkedInTag.matchSegment(segments, "/pricing");

// Utilities
LinkedInTag.isLoaded();
const hashed = await LinkedInTag.hashEmail("[email protected]");

API Reference

`<LinkedInInsightTag />`

| Prop | Type | Default | Description | |------|------|---------|-------------| | partnerId | string \| string[] | required | LinkedIn Partner ID(s) | | noscript | boolean | true | Render noscript img fallback | | consent | boolean | true | Defer loading until true (GDPR) | | debug | boolean | false | Log tracking calls to console | | onLoad | () => void | — | Callback when CDN script loads | | excludePaths | string[] | — | Paths where tag should not load |

`useLinkedInTracking()`

Returns:

| Method | Signature | |--------|-----------| | track | (conversionId, options?) => void | | trackPurchase | (conversionId, { value, currency, ...opts }) => void | | trackSignup | (conversionId, options?) => void | | trackFormSubmit | (conversionId, options?) => void | | trackLead | (conversionId, options?) => void | | trackDownload | (conversionId, options?) => void |

`TrackOptions`

| Field | Type | Description | |-------|------|-------------| | eventId | string? | For CAPI deduplication | | value | number? | Conversion value | | currency | string? | ISO currency code | | variant | string? | A/B test variant identifier |

Standalone Functions

| Function | Description | |----------|-------------| | setPageEventId(id) | Set window._linkedin_event_id for page load dedup | | isLoaded() | Check if CDN script has fully loaded | | hashEmail(email) | SHA-256 hash (returns Promise) | | matchSegment(segments, pathname?) | Match current path to retargeting segment | | useRetargetingSegment(segments, pathname?) | React hook for segment matching |

`LinkedInTag` (Imperative)

Full imperative API with all methods above plus init(config).

License

MIT

Published

Vulnerabilities

Links

Maintainers

Keywords

Readme

linkedin-insight-tag

Install

React — Quick Start

Multiple Partner IDs

GDPR Consent Mode

Sensitive Page Exclusion

onLoad Callback

Debug Mode

Conversion Tracking

Event Helpers

A/B Variant Tracking

With Event ID (CAPI Deduplication)

Page-Level Event ID

Retargeting Segments

Email Hashing

SPA Page View Tracking

Next.js

Imperative API (Vanilla JS / Vue / Svelte)

API Reference

<LinkedInInsightTag />

useLinkedInTracking()

TrackOptions

Standalone Functions

LinkedInTag (Imperative)

License

`<LinkedInInsightTag />`

`useLinkedInTracking()`

`TrackOptions`

`LinkedInTag` (Imperative)