Do I need to use a Provider for Meta Pixel in React?

We recommend using MetaPixelProvider as it follows React conventions. Alternatively, you can use the standalone hook approach by calling useMetaPixel with config once at your app root.

Why is Meta Pixel not firing on localhost in React?

By default, the pixel won't fire on localhost to avoid polluting your data. Add enableLocalhost:true to your config to enable it during development.

How do I track page views in a React SPA?

The package automatically tracks PageView on initialization when autoTrackPageView is true (default). For subsequent route changes, call meta.track('PageView') in your router's navigation handler or use a useEffect in your layout component.

Can I use Meta Pixel with Next.js?

Yes, this package works with Next.js. For the App Router, initialize in your root layout. For Pages Router, initialize in _app.tsx. A dedicated Next.js package with more integrations is coming soon.

First tools available: The Ad Library + Competitor Tracking

How to Install Meta Pixel in React

By Nico

November 26, 2025·8 min read

Installing Meta Pixel in React takes about 5 minutes using the @adkit.so/meta-pixel-react package. It provides a simple hook-based API with full TypeScript support.

Prerequisites

Before you start, make sure you have:

A React 18+ application
A Facebook/Meta Pixel ID (how to get your Pixel ID)

How to Install the Package

Install the @adkit.so/meta-pixel-react package:

npm install @adkit.so/meta-pixel-react

How to Initialize the Pixel

Wrap your app with MetaPixelProvider to initialize the pixel:

main.tsx

import { MetaPixelProvider } from '@adkit.so/meta-pixel-react';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <MetaPixelProvider pixelIds="YOUR_PIXEL_ID" debug={true}>
        <App />
    </MetaPixelProvider>,
);

Then use the useMetaPixel hook anywhere in your app:

components/CheckoutButton.tsx

import { useMetaPixel } from '@adkit.so/meta-pixel-react';

function CheckoutButton() {
    const meta = useMetaPixel();

    function handleClick() {
        meta.track('InitiateCheckout');
    }

    return <button onClick={handleClick}>Checkout</button>;
}

That's it! Your pixel is now tracking page views automatically.

Alternative: Standalone Hook

If you prefer not to use a Provider, you can initialize directly with the hook:

App.tsx

import { useMetaPixel } from '@adkit.so/meta-pixel-react';

function App() {
    useMetaPixel({ pixelIds: 'YOUR_PIXEL_ID' });
    return <YourApp />;
}

Then use useMetaPixel() without config in child components — it will use the already-initialized instance.

How to Test if the Pixel is Working

Enable localhost tracking and debug mode during development:

useMetaPixel({
    pixelIds: 'YOUR_PIXEL_ID',
    enableLocalhost: true, // Enable for testing
    debug: true, // Show console logs
});

Verify Installation

If you enabled debug: true, check your browser console for Meta Pixel logs:

How to Track PageView in SPAs

React apps are Single Page Applications (SPAs), so the browser doesn't reload between pages. The pixel tracks PageView once on initialization, but you need to track it manually on route changes.

With React Router

App.tsx

import { useMetaPixel } from '@adkit.so/meta-pixel-react';
import { useLocation } from 'react-router-dom';
import { useEffect } from 'react';

function App() {
    const meta = useMetaPixel();
    const location = useLocation();

    useEffect(() => {
        meta.track('PageView');
    }, [location.pathname]);

    return <Routes>...</Routes>;
}

With Next.js App Router

app/layout.tsx

'use client';

import { useMetaPixel } from '@adkit.so/meta-pixel-react';
import { usePathname } from 'next/navigation';
import { useEffect } from 'react';

export default function RootLayout({ children }) {
    const meta = useMetaPixel();
    const pathname = usePathname();

    useEffect(() => {
        meta.track('PageView');
    }, [pathname]);

    return <html>...</html>;
}

Set autoTrackPageView: false if you want full control over when PageView fires.

How to Track Events

Standard Events

import { useMetaPixel } from '@adkit.so/meta-pixel-react';

function PricingPage() {
    const meta = useMetaPixel();

    function handlePurchase() {
        meta.track('Purchase', { value: 99.99, currency: 'USD', content_ids: ['pro-plan'] });
    }

    return <button onClick={handlePurchase}>Buy Pro</button>;
}

You should see the event in the Meta Pixel Helper Chrome extension:

Track on Page Load

import { useMetaPixel } from '@adkit.so/meta-pixel-react';
import { useEffect } from 'react';

function BlogPost({ postId }: { postId: string }) {
    const meta = useMetaPixel();

    useEffect(() => {
        meta.track('ViewContent', { content_id: postId });
    }, [postId]);

    return <article>...</article>;
}

Custom Events

For events not in the standard list:

const meta = useMetaPixel();

meta.trackCustom('VideoWatched', { video_id: 'intro-video', duration: 120 });

Custom events can't always be used for conversion optimization in Facebook Ads. Use standard events when possible.

Full Example

Here's a complete React project structure with Meta Pixel:

src/main.tsx

import { MetaPixelProvider } from '@adkit.so/meta-pixel-react';
import { BrowserRouter } from 'react-router-dom';
import ReactDOM from 'react-dom/client';
import App from './App';

ReactDOM.createRoot(document.getElementById('root')!).render(
    <BrowserRouter>
        <MetaPixelProvider pixelIds="YOUR_PIXEL_ID">
            <App />
        </MetaPixelProvider>
    </BrowserRouter>,
);

Common Issues and Fixes

Make sure you're not initializing the pixel multiple times. Only call useMetaPixel with config once at your app root:

// ✅ Root component - with config
useMetaPixel({ pixelIds: 'YOUR_PIXEL_ID' });

// ✅ Child components - no config
const meta = useMetaPixel();

The package has strict TypeScript types. Use standard event names:

// ✅ Correct
meta.track('ViewContent');

// ❌ Wrong - not a standard event
meta.track('ViewPage');

// ✅ For custom events, use trackCustom
meta.trackCustom('ViewPage');

For edge cases where you can't use hooks or wrap your app, use initMetaPixel:

main.tsx

import { initMetaPixel, useMetaPixel } from '@adkit.so/meta-pixel-react';

// Initialize before rendering
initMetaPixel({ pixelIds: 'YOUR_PIXEL_ID' });

ReactDOM.createRoot(document.getElementById('root')!).render(<App />);

Then use useMetaPixel() normally in your components.

Best Practices

Wrap your app with MetaPixelProvider once at the root
Use standard events for better ad optimization
Track ViewContent on page/route changes
Add meaningful parameters (content_id, value, currency)
Disable debug in production

Next Steps

Set up conversion events in Events Manager
Create custom audiences based on pixel data
Use pixel events to optimize your ads

Resources

Share on:

Article by

Nico Jeannen

Hey! I'm the founder of AdKit. I've been doing ads for almost 10 years. I grew and sold my 2 previous startup using ads. Then I created AdKit to make ads accessible to everyone.