Socket
Socket
Sign inDemoInstall

@rivercode/facebook-conversion-api-nextjs

Package Overview
Dependencies
128
Maintainers
1
Versions
30
Alerts
File Explorer

Advanced tools

Install Socket

Detect and block malicious and high-risk dependencies

Install

@rivercode/facebook-conversion-api-nextjs

Facebook Conversion API for Next.js


Version published
Maintainers
1
Weekly downloads
396
decreased by-8.33%

Weekly downloads

Readme

Source

Facebook / Meta Conversion API for Next.js

Next.js wrapper for Facebook's Conversion API

Facebook / Meta Conversion API for Next.js

This package helps you implement Facebook Conversion API in Next.js.

It includes an API route handler for sending server-side events to Facebook and client-side functions to trigger the events.

Facebook recommends sending events with Facebook Pixel and the Conversion API with the same event id to match duplicated events.

Therefore, we have added the option to enable standard Facebook Pixel events in this package, where we handle duplicated events out of the box.

Support Next.js API routes on both Vercel and AWS Amplify.

Install

NPM

npm install @rivercode/facebook-conversion-api-nextjs

Yarn

yarn add @rivercode/facebook-conversion-api-nextjs

1. Create Next.js API Route

pages/api/fb-events.js

import { fbEventsHandler } from '@rivercode/facebook-conversion-api-nextjs/handlers';

export default fbEventsHandler;

Add Facebook Access Token and Pixel ID

.env

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.

Add Facebook Pixel Provider & Script

pages/_app.js

import { FBPixelScript, FBPixelProvider } from '@rivercode/facebook-conversion-api-nextjs/components';

...
<>
  <FBPixelScript />
  <FBPixelProvider>
    <Component {...pageProps} />
  </FBPixelProvider>
</>
...

3. Start Sending Events

Trigger the events you need. For example, add to cart or purchase events.

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)
    });
}, []);

Keywords

FAQs

Last updated on 06 May 2023

Did you know?

Socket for GitHub automatically highlights issues in each pull request and monitors the health of all your open source dependencies. Discover the contents of your packages and block harmful activity before you install or update your dependencies.

Install

Related posts

SocketSocket SOC 2 Logo

Product

  • Package Alerts
  • Integrations
  • Docs
  • Pricing
  • FAQ
  • Roadmap

Stay in touch

Get open source security insights delivered straight into your inbox.


  • Terms
  • Privacy
  • Security

Made with ⚡️ by Socket Inc