← Back to home

Documentation

Quick Start

  1. Create an account at easyfunnel.co/signup
  2. Create a project in the dashboard and copy your API key
  3. Install the SDK in your app (see below)
  4. Deploy — events start flowing immediately

SDK Installation

React / Next.js

terminal
npm install @easyfunnel/sdk @easyfunnel/react

Add the provider to your root layout:

layout.tsx
import { EasyFunnelProvider } from '@easyfunnel/react'

export default function RootLayout({ children }) {
  return (
    <html lang="en">
      <body>
        <EasyFunnelProvider apiKey="ef_your_key_here">
          {children}
        </EasyFunnelProvider>
      </body>
    </html>
  )
}

Track events from any component:

component.tsx
import { useTrack } from '@easyfunnel/react'

function PricingButton() {
  const track = useTrack()

  return (
    <button onClick={() => track('click_subscribe', { plan: 'indie' })}>
      Subscribe
    </button>
  )
}

Script Tag (any website)

HTML
<script
  defer
  data-api-key="ef_your_key_here"
  src="https://easyfunnel.co/sdk.js"
></script>

Vanilla JavaScript

app.js
import { EasyFunnel } from '@easyfunnel/sdk'

const ef = EasyFunnel.init({
  apiKey: 'ef_your_key_here',
  debug: true, // logs events to console in development
})

// Track custom events
ef.track('click_signup', { plan: 'indie' })

// Identify users after login
ef.identify('user_123')

Auto-Tracking

The SDK automatically tracks:

  • Page views — on load and SPA navigation (pushState, popstate)
  • Click tracking — any element with a data-ef-track attribute
example
<!-- This button automatically fires a "click" event -->
<!-- with { element: "signup_cta" } in properties -->
<button data-ef-track="signup_cta">Sign Up</button>

Identity Stitching

Before a user signs up, they are anonymous (tracked by session ID). When you call ef.identify('user_123'), all their previous anonymous events are retroactively linked to that user ID.

// Call after login/signup
ef.identify('user_123')

// Or with the React hook:
const identify = useIdentify()
identify('user_123')

MCP Setup (Claude / Cursor)

The MCP server lets Claude instrument your code and query your analytics directly from the editor.

Claude Code

terminal
claude mcp add easyfunnel -e EASYFUNNEL_API_KEY=efa_your_account_api_key -- npx @easyfunnel/mcp

Cursor / Manual Config

MCP config
{
  "mcpServers": {
    "easyfunnel": {
      "command": "npx",
      "args": ["@easyfunnel/mcp"],
      "env": {
        "EASYFUNNEL_API_KEY": "efa_your_account_api_key"
      }
    }
  }
}

Find your account API key in Settings.

Available MCP Tools

list_projectsList all your projects
create_projectCreate a new project
setup_sdkInstall SDK and add provider to your codebase
scan_for_actionsFind trackable buttons, forms, and links
instrument_codeAdd tracking attributes or calls to elements
create_funnelDefine a conversion funnel from event steps
get_funnel_healthGet conversion and drop-off data
query_eventsQuery event counts, recent events, or breakdowns

Event Ingestion API

POST /api/collect
POST https://easyfunnel.co/api/collect
Content-Type: application/json

{
  "api_key": "ef_your_project_key",
  "events": [
    {
      "session_id": "anonymous-uuid",
      "event_name": "page_view",
      "properties": {
        "url": "/pricing",
        "referrer": "https://google.com"
      }
    }
  ]
}

Response: 202 Accepted

Max 20 events per request. Max 4KB per event. Rate limit: 100 req/s per API key.