@conectadados/conectaflow-pixel

React SDK for ConectaFlow CRM tracking pixel. Tracks anonymous visitors and identifies them when they submit forms.

Install

npm install @conectadados/conectaflow-pixel

Setup

Wrap your app with the provider:

import { ConectaflowPixelProvider } from '@conectadados/conectaflow-pixel';

ReactDOM.createRoot(document.getElementById('root')!).render(
  <ConectaflowPixelProvider orgId="your-org-uuid">
    <App />
  </ConectaflowPixelProvider>
);

A pageview event is automatically sent on mount.

Usage

import { useConectaflowPixel } from '@conectadados/conectaflow-pixel';

function ContactForm() {
  const { track, identify } = useConectaflowPixel();

  const handleSubmit = (data) => {
    // Identify visitor with contact info
    identify({
      phone: data.phone,
      email: data.email,
      name: data.name,
    });
  };

  return (
    <button onClick={() => track('click', { button: 'cta-preco' })}>
      Ver preços
    </button>
  );
}

API

<ConectaflowPixelProvider>

| Prop | Type | Default | Description | |------|------|---------|-------------| | orgId | string | required | Organization UUID | | endpoint | string | production URL | capture-event endpoint URL (override for dev/staging) | | trackRouteChanges | boolean | false | Track SPA route changes as pageviews |

useConectaflowPixel()

Returns:

| Field | Type | Description | |-------|------|-------------| | track | (eventType: string, eventData?: object) => void | Fire-and-forget event tracking | | identify | (contact: { phone?, email?, name? }) => Promise<boolean> | Identify visitor, returns success | | visitorId | string | Current visitor UUID |

Event Types

| Event | When | |-------|------| | pageview | Auto on mount (and route changes if enabled) | | click | CTA clicks | | form_start | User starts filling form | | form_submit | Form submission (no PII) | | identify | Sent automatically by identify() | | custom | Any business event |

SPA Route Tracking

For multi-page SPAs, enable route change tracking:

<ConectaflowPixelProvider orgId="..." trackRouteChanges={true}>

This patches pushState/replaceState and listens to popstate — no React Router dependency.

How It Works

1. Visitor lands → visitor_id generated (UUID, persisted in localStorage as _crm_vid)
2. Pageview fires → anonymous lead created in CRM
3. Events tracked → track() records clicks, form interactions
4. Visitor identifies → identify() promotes anonymous lead or merges with existing

Compatible with the vanilla JS snippet — same _crm_vid key and payload format.