Comments (5)
I've put together a sketch for this that works with my Next JS app.
let fb;
let fbLoaded = false;
export default function facebookPixelPlugin(userConfig = {}) {
return {
name: "facebook-ads",
config: {
...userConfig,
},
initialize: async ({ config }) => {
const { pixelId } = config;
await import("react-facebook-pixel")
.then((module) => (fb = module.default))
.then(() => {
if(!fbLoaded) {
fb.init(pixelId, {
autoConfig: true,
debug: true,
});
fbLoaded = true;
}
});
},
page: ({ payload }) => {
fb.pageView();
},
/* Track event */
track: ({ payload }) => {
console.log("facebook track", payload)
fb.track(payload.event, payload.properties)
},
/* Identify user */
identify: ({ payload }) => {
// I believe FB doesn't have an identify API any more
},
loaded: () => {
return fbLoaded;
},
};
}
from analytics.
Hi folks. Looks like this thread has been inactive for some time... Are there plans to productionize this?
from analytics.
Happy to accept a PR on this 😃
from analytics.
Hey @jasongi-actu
A fb pixel would be a great plugin 😃
Facebook PageView event doesn't let you tell it what page you're viewing, it takes it straight from the URL. It also does this automatically (even in SPAs) unless you configure disablePushStateTracking
When analytics.page()
is called it uses a similar mechanism where it will grab the current page url & title.
It doesn't look like analytics standardises what you pass to identify which makes it hard to make a single identify call if you are for instance using segment and facebook which have different field names.
The data passed into the identify call is up to the application itself. The only required field is the userId
Inside of the plugin, you can manipulate/enrich the data however you'd like. Here's a plugin scaffold:
export default function facebookPixelPlugin(userConfig = {}) {
return {
name: 'facebook-ads',
config: {
...defaultConfig,
...userConfig
},
initialize: ({ config }) => {
// Load pixel script here
},
page: ({ payload }) => {
// trigger page pixel
},
/* Track event */
track: ({ payload }) => {
// trigger custom event pixel ? idk if thats a thing 😃
},
/* Identify user */
identify: ({ payload }) => {
// Alter the payload & payload.properties however you want before
// triggering the pixel
},
loaded: () => {
return !!window.providerExampleLoaded
}
}
}
It is possible to send specific calls to specific providers like so:
// Disable sending user data to specific analytic tools
analytics.identify('xyz-123', { other: 'info' }, {
plugins: {
// disable sending this identify except to facebook
all: false,
'facebook-ads': true
}
})
More in the docs on this here https://getanalytics.io/tutorials/sending-provider-specific-events/
from analytics.
Moved to #153
from analytics.
Related Issues (20)
- Request an analytics integration HOT 1
- Plugin Request: AWS Personalize HOT 1
- @analytics/snowplow not working HOT 1
- Remove user_id as a custom dimension in google-analytics event payload
- Angular warns about using "dlv" – can cause optimization bailouts HOT 2
- Allow URL params for simpleanalytics HOT 2
- Request to upgrade analytics-node to resolve security issue in Axios HOT 2
- Update intercom-client in analytics-plugin-intercom
- Add support for Rudderstack HOT 1
- ga4 support for other protocols HOT 1
- Plugin Request - Server-side Implementation - Google Analytics HOT 3
- Clients throwing error: abort is not a function HOT 6
- Dependency Security: Axios Cross-Site Request Forgery Vulnerability HOT 1
- new Chrome cookie policy warning HOT 1
- OneTrust integration HOT 2
- Google Consent Mode v2 HOT 3
- Google Tag Manager - Consent Mode V2 implementation (Next.js 14)
- Customerio Plugin uses customerio-node v0.5.0
- How to contribute a plugin? HOT 1
- Unloading Plugins based on Path HOT 1
Recommend Projects
-
React
A declarative, efficient, and flexible JavaScript library for building user interfaces.
-
Vue.js
🖖 Vue.js is a progressive, incrementally-adoptable JavaScript framework for building UI on the web.
-
Typescript
TypeScript is a superset of JavaScript that compiles to clean JavaScript output.
-
TensorFlow
An Open Source Machine Learning Framework for Everyone
-
Django
The Web framework for perfectionists with deadlines.
-
Laravel
A PHP framework for web artisans
-
D3
Bring data to life with SVG, Canvas and HTML. 📊📈🎉
-
Recommend Topics
-
javascript
JavaScript (JS) is a lightweight interpreted programming language with first-class functions.
-
web
Some thing interesting about web. New door for the world.
-
server
A server is a program made to process requests and deliver data to clients.
-
Machine learning
Machine learning is a way of modeling and interpreting data that allows a piece of software to respond intelligently.
-
Visualization
Some thing interesting about visualization, use data art
-
Game
Some thing interesting about game, make everyone happy.
Recommend Org
-
Facebook
We are working to build community through open source technology. NB: members must have two-factor auth.
-
Microsoft
Open source projects and samples from Microsoft.
-
Google
Google ❤️ Open Source for everyone.
-
Alibaba
Alibaba Open Source for everyone
-
D3
Data-Driven Documents codes.
-
Tencent
China tencent open source team.
from analytics.