next-facebook-tracking v0.2.0
next-facebook-tracking
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.
Installation
Install the package via npm or yarn:
npm i --save next-facebook-tracking
Usage
Setup
First, 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,
})
Add the Provider to Your Layout
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>
)
}
Create a Custom Script
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)
Track Events on Page Load and Interactions
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,
},
}}
/>
</>
)
}
FacebookTracking Class
Configuration
The FacebookTracking
class is used to manage Facebook Pixel and Conversions
API tracking.
Constructor
new FacebookTracking(config: FacebookTrackingConfig)
FacebookTrackingConfig Options:
pixelId
(string): The Facebook pixel ID. Defaults toNEXT_PUBLIC_FACEBOOK_PIXEL
env var.accessToken
(string): The access token for Facebook Conversions API (optional). Defaults toFACEBOOK_CONVERSIONS_API_TOKEN
env var.testCode
(string): The test code for Facebook Conversions API (optional). Defaults toFACEBOOK_TEST_EVENT_CODE
env var.debug
(boolean): Enable or disable debug mode. Defaults tofalse
.
Methods
track
Tracks custom events.
async track<T extends Facebook.Event.EventName>(event: Facebook.Event.EventData<T>)
Custom Hook
useFacebookPixel
Provides access to the FacebookPixel context.
const context = useFacebookPixel()
Components
FacebookTrackingProvider
A context provider for the Facebook tracking instance.
Props:
client
(FacebookTracking): The Facebook tracking instance.
FacebookPageView
Tracks page views.
FacebookTrackOnClick
Tracks events when a component is clicked.
Props:
action
(function): The function to execute on click.event
(object): The event details to track.
FacebookTrackOnRender
Tracks events when a component is rendered.
Props:
event
(object): The event details to track.
License
MIT License
Feel free to customize this README file further to match any additional features or details specific to your package.
5 months ago
5 months ago
11 months ago
11 months ago
9 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
11 months ago
12 months ago
12 months ago
12 months ago