next-facebook-tracking is a simple and efficient library for integrating
Facebook Pixel and Conversions API tracking into your Next.js application. It
provides easy-to-use components and hooks to handle various Facebook Pixel
events.
Install the package via npm or yarn:
npm i --save next-facebook-trackingFirst, create a Facebook tracking instance:
// facebook.ts
import {FacebookTracking} from 'next-facebook-tracking'
export const facebook = new FacebookTracking({
// pixelId: process.env.NEXT_PUBLIC_FACEBOOK_PIXEL,
// accessToken: process.env.FACEBOOK_CONVERSIONS_API_TOKEN,
debug: true,
})Wrap your application's layout with the FacebookTrackingProvider in
layout.tsx:
// layout.tsx
import {
FacebookTrackingProvider,
FacebookPageView,
} from 'next-facebook-tracking/components'
import {facebook} from './facebook'
export default function RootLayout({children}) {
return (
<html lang="en">
<body>
<FacebookTrackingProvider client={facebook}>
{children}
<FacebookPageView
action={async event => {
'use server'
facebook.track(event)
}}
/>
</FacebookTrackingProvider>
</body>
</html>
)
}FacebookTrackingProvider will load try to load Facebook's Pixel script from
/scripts/pixel.js after the first render so you need to create this file:
// public/scripts/pixel.js
const PIXEL_ID = document.currentScript.getAttribute('data-pixel-id')
function initializeFacebookPixel(f, b, e, v, n, t, s) {
if (f.fbq) return
n = f.fbq = function () {
n.callMethod ? n.callMethod.apply(n, arguments) : n.queue.push(arguments)
}
if (!f._fbq) f._fbq = n
n.push = n
n.loaded = !0
n.version = '2.0'
n.queue = []
t = b.createElement(e)
t.async = !0
t.src = v
s = b.getElementsByTagName(e)[0]
s.parentNode.insertBefore(t, s)
}
initializeFacebookPixel(
window,
document,
'script',
'https://connect.facebook.net/en_US/fbevents.js',
)
window.fbq('init', PIXEL_ID)Use the facebook instance to track events on page load and interactions in
page.tsx:
// page.tsx
import {facebook} from './facebook'
import {
FacebookTrackOnClick,
FacebookTrackOnRender,
} from 'next-facebook-tracking/components'
export default async function Home() {
// This will run on the server
await facebook.track({
event_name: 'PageView',
})
return (
<>
<FacebookTrackOnClick
action={async event => {
'use server'
facebook.track(event)
}}
event={{
event_name: 'AddToCart',
custom_data: {
value: 10.1,
currency: 'USD',
num_items: 1,
},
}}
>
<button>Track something</button>
</FacebookTrackOnClick>
<FacebookTrackOnRender
event={{
event_name: 'InitiateCheckout',
custom_data: {
value: 30.1,
currency: 'USD',
num_items: 3,
},
}}
/>
</>
)
}The FacebookTracking class is used to manage Facebook Pixel and Conversions
API tracking.
new FacebookTracking(config: FacebookTrackingConfig)FacebookTrackingConfig Options:
pixelId(string): The Facebook pixel ID. Defaults toNEXT_PUBLIC_FACEBOOK_PIXELenv var.accessToken(string): The access token for Facebook Conversions API (optional). Defaults toFACEBOOK_CONVERSIONS_API_TOKENenv var.testCode(string): The test code for Facebook Conversions API (optional). Defaults toFACEBOOK_TEST_EVENT_CODEenv var.debug(boolean): Enable or disable debug mode. Defaults tofalse.
Tracks custom events.
async track<T extends Facebook.Event.EventName>(event: Facebook.Event.EventData<T>)Provides access to the FacebookPixel context.
const context = useFacebookPixel()A context provider for the Facebook tracking instance.
Props:
client(FacebookTracking): The Facebook tracking instance.
Tracks page views.
Tracks events when a component is clicked.
Props:
action(function): The function to execute on click.event(object): The event details to track.
Tracks events when a component is rendered.
Props:
event(object): The event details to track.
MIT License
Feel free to customize this README file further to match any additional features or details specific to your package.
React
Typescript
Django
Laravel
Facebook
Microsoft
Google
Alibaba
D3
Tencent