https://github.com/joecohens/next-fbq
Next.js HOC to integrate the Facebook Pixel on every page change
https://github.com/joecohens/next-fbq
facebookpixel fb high-order-component hoc nextjs react
Last synced: about 1 year ago
JSON representation
Next.js HOC to integrate the Facebook Pixel on every page change
- Host: GitHub
- URL: https://github.com/joecohens/next-fbq
- Owner: joecohens
- License: mit
- Created: 2018-06-22T04:56:02.000Z (about 8 years ago)
- Default Branch: master
- Last Pushed: 2018-08-04T08:50:59.000Z (almost 8 years ago)
- Last Synced: 2025-03-27T21:02:13.848Z (over 1 year ago)
- Topics: facebookpixel, fb, high-order-component, hoc, nextjs, react
- Language: JavaScript
- Size: 24.4 KB
- Stars: 21
- Watchers: 1
- Forks: 4
- Open Issues: 1
-
Metadata Files:
- Readme: README.md
- License: LICENSE
Awesome Lists containing this project
README
# next-fbq
Next.js High Order Component to integrate Facebook Pixel on every page change.
## Usage
Install it
```bash
yarn add next-fbq
```
Import it inside your `pages/_app.js`;
```js
import Router from "next/router";
import withFBQ from "next-fbq";
```
Wrap your [custom App container](https://nextjs.org/docs#custom-%3Capp%3E) with it
```js
// pass your Facebook Pixel code as first argument
export default withFBQ("139xxxxxxxxx3", Router)(MyApp);
```
That's it, now when the user access a page it will log a pageview to Facebook Pixel, each page change after that will also trigger a pageview on FB Pixel. The second argument is used to tell next-fbq you are wrapping your `_app` instead of each page individually (defaults to `true`), in that case it will run on `componentDidUpdate` too.
> **Note**: This module detects if it's running in localhost and do nothing there to avoid polluting your analytics with local data.
# Credits
This is a complete copy of [@sergiodxa](https://github.com/sergiodxa) Google Analytics implementation [next-ga](https://github.com/sergiodxa/next-ga/blob/master/src/analytics.js) adapted to the Facebok Pixel