Facebook Conversion API for Next.js
npm install @fivefive/facebook-capi-nextjs-app-routerFacebook / Meta Conversion API for Next.js
> Next.js wrapper for Facebook's Conversion API
bash
npm install @fivefive/facebook-capi-nextjs-app-router
`
Yarn
`bash
yarn add @fivefive/facebook-capi-nextjs-app-router
`
1. Create Next.js API Route
$3
app/api/fb-events/route.js
`jsx
import { POST, GET } from '@fivefive/facebook-capi-nextjs-app-router/handlers';
export { POST, GET };
`
$3
pages/api/fb-events.js
`jsx
import { fbEventsHandler } from '@fivefive/facebook-capi-nextjs-app-router/handlers';
export default fbEventsHandler;
`
$3
.env
`dotenv
FB_ACCESS_TOKEN=accessToken
NEXT_PUBLIC_FB_PIXEL_ID=pixelId
NEXT_PUBLIC_FB_DEBUG=true # optional
`
Read more here on how you can get your access token and pixel id.
2. Load Facebook Pixel (Optional)
This is only needed if you want to fire standard Pixel Events.
$3
pages/_app.js
`jsx
import { FBPixelScript, FBPixelProvider } from '@rivercode/facebook-conversion-api-nextjs/components';
...
<>
>
...
`
3. Start Sending Events
Trigger the events you need. For example, add to cart or purchase events.
`jsx
import { fbEvent } from '@rivercode/facebook-conversion-api-nextjs';
useEffect(() => {
fbEvent({
eventName: 'ViewContent', // ViewContent, AddToCart, InitiateCheckout, Purchase etc.
eventId: 'eventId', // optional, unique event id's will be generated by default
emails: ['email1', 'email2'], // optional
phones: ['phone1', 'phone2'], // optional
firstName: 'firstName', // optional
lastName: 'lastName', // optional
country: 'country', // optional
city: 'city', // optional
zipCode: 'zipCode', // optional
products: [{ // optional
sku: 'product123',
quantity: 1,
}],
value: 1000, // optional
currency: 'USD', // optional
enableStandardPixel: false // default false (Require Facebook Pixel to be loaded, see step 2)
});
}, []);
``