Quickstart

Install funnnel in your project

React / Next.js

Install the module

npm install funnnel

Insert the funnel provider in your _app.js or whenever you want to use it.

import { Funnnel } from "funnnel";

export default function App({ Component, pageProps }) {
    return <>
        <Funnnel website="funnel.co" autoTracking={true} > //change with your website domain and auto tracking
            <Component {...pageProps} />
        </Funnnel>
    </>
}

When enabled, autoTracking allow funnnel to track every page view and parameters as key:values so you can analyze and create charts also from your visitors

Now you're ready to track your users and events

Javascript

Insert the script in the head

<script src = "https://client.funnnel.co/js/script.min.js" data-domain="your-domain.com" data-trackvisits="true"/>

Track an event

React / Next.js

Import the custom hook

import { useFunnel } from "funnnel";

Use it for tracking your events

const { track } = useFunnel();

const onSubmit = () => {
    track({
        name: "submit",
        properties: {
            "type": "big-button",
            "color": "green",
            "position": "top-right"
            //you can add whatever properties you want
        },
        channels: ["waitlist"]
    })
}

Javascript

After importing the script you can track every event you want

funnnel.track({
    name: "Submitted email",
    channels: ["waitlist"],
    properties: {
        "buttonType": "top",
        "color": "red",
        "size": "big"
    }
})

Identify a user

React / Next.js

Import the custom hook

import { useFunnel } from "funnnel";

Use it for tracking your events

const { identify } = useFunnel();

const onSignup = () => {
    identify({
        email: "[e-mail]",
        properties: {
            "plan": "free"
            //you can add whatever properties you want
        }
    })
}

Javascript

You can identify your user at the login/signup moment

funnnel.identify({
    email,
    properties: {
        "plan": "free"
    }
})