Skip to content
Funnel

Quickstart (5 minutes)

This walkthrough connects two plugins (GA4 and the Meta Pixel) and sends a couple of events. It assumes you’ve already installed @sunwjy/funnel-client.

1. Load the platform base snippets

Section titled “1. Load the platform base snippets”

Funnel calls window.gtag and window.fbq, so those globals must exist first. Add the standard GA4 and Meta Pixel base snippets to your page <head> (the ones each platform gives you in its dashboard). You only need them loaded; Funnel handles the event calls.

2. Create a Funnel with plugins

Section titled “2. Create a Funnel with plugins”
import { Funnel } from "@sunwjy/funnel-client";
import { createGA4Plugin } from "@sunwjy/funnel-client/ga4";
import { createMetaPixelPlugin } from "@sunwjy/funnel-client/meta-pixel";


export const funnel = new Funnel({
  plugins: [createGA4Plugin(), createMetaPixelPlugin()],
  debug: true, // logs each dispatch to the console while you're wiring things up
});

3. Initialize with your IDs

Section titled “3. Initialize with your IDs”

Pass each plugin’s configuration keyed by the plugin name. Runtime config given here wins over anything you passed to the factory.

funnel.initialize({
  ga4: { measurementId: "G-XXXXXXXXXX" },
  "meta-pixel": { pixelId: "1234567890" },
});

4. Track events

Section titled “4. Track events”

Call track() with a GA4 event name and its parameters. The same call reaches every plugin.

// A page view
funnel.track("page_view", { page_title: "Home" });


// A purchase: GA4 standard parameters
funnel.track("purchase", {
  currency: "KRW",
  value: 29000,
  transaction_id: "T-1",
});

That’s it. With debug: true you’ll see each event logged, and both GA4 and the Meta Pixel will receive their platform-native versions.

Where to go next

Section titled “Where to go next”