Security News
Introducing the Socket Python SDK
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
next-facebook-tracking
Advanced tools
A simple package to help you integrate Facebook Pixel and Conversions API with Next.js
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-tracking
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,
})
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 to
NEXT_PUBLIC_FACEBOOK_PIXEL
env var.accessToken
(string): The access token for Facebook Conversions API
(optional). Defaults to FACEBOOK_CONVERSIONS_API_TOKEN
env var.testCode
(string): The test code for Facebook Conversions API (optional).
Defaults to FACEBOOK_TEST_EVENT_CODE
env var.debug
(boolean): Enable or disable debug mode. Defaults to false
.track
Tracks custom events.
async track<T extends Facebook.Event.EventName>(event: Facebook.Event.EventData<T>)
useFacebookPixel
Provides access to the FacebookPixel context.
const context = useFacebookPixel()
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.MIT License
Feel free to customize this README file further to match any additional features or details specific to your package.
FAQs
A simple package to help you integrate Facebook Pixel and Conversions API with Next.js
We found that next-facebook-tracking demonstrated a healthy version release cadence and project activity because the last version was released less than a year ago. It has 0 open source maintainers collaborating on the project.
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.
Security News
The initial version of the Socket Python SDK is now on PyPI, enabling developers to more easily interact with the Socket REST API in Python projects.
Security News
Floating dependency ranges in npm can introduce instability and security risks into your project by allowing unverified or incompatible versions to be installed automatically, leading to unpredictable behavior and potential conflicts.
Security News
A new Rust RFC proposes "Trusted Publishing" for Crates.io, introducing short-lived access tokens via OIDC to improve security and reduce risks associated with long-lived API tokens.