Quickstart

Install

npm install @junctionjs/client @junctionjs/core

Add a destination — for example, GA4:

npm install @junctionjs/destination-ga4

Configure

Create a Junction configuration file:

lib/junction.ts

import { createClient } from "@junctionjs/client";
import { ga4 } from "@junctionjs/destination-ga4";

export const jct = createClient({
  destinations: [
    {
      destination: ga4,
      config: {
        measurementId: "G-XXXXXXXXXX",
        sendPageView: false,
      },
      consent: ["analytics"],
    },
  ],
  consent: {
    default: "pending",
  },
});

Track events

Use the entity:action model to track events:

import { jct } from "./lib/junction";

// Page view
jct.track("page", "viewed");

// User action
jct.track("product", "added", {
  product_id: "SKU-123",
  name: "Junction T-Shirt",
  price: 29.99,
  currency: "USD",
});

Manage consent

Update consent state when a user interacts with your consent banner:

jct.consent({
  analytics: "granted",
  marketing: "denied",
});

Events queued while consent was pending are automatically flushed to permitted destinations.

Add the debug panel

npm install @junctionjs/debug

Enable it in your config:

const jct = createClient({
  debug: true, // shows the in-page debug panel
  // ... rest of config
});

Press Ctrl+Shift+J to toggle the debug panel and inspect events in real time.

Next steps

• Events — understand the entity:action model
• Consent — how the consent state machine works
• Validation — add schema contracts
• Destinations — see all available destinations