Repository navigation
Plugin Requests #153
Description
Activity
Just a quick note, shouldn't the
Plausiblecheckbox be ticked considering a Plausible plugin is already listed on your README? https://github.com/DavidWells/analytics#community-pluginsSupport of Facebook Pixel Custom Plugin with getAnalytics.
https://gist.github.com/abhishekpatel946/f003011fcfa991f29b54c66cb2ec0b6eSupport of Posthog Custom Plugin with getAnalytics.
https://gist.github.com/abhishekpatel946/f671edc2640be436a1ac1744806c4fabSupport of Facebook Pixel Custom Plugin with getAnalytics. https://gist.github.com/abhishekpatel946/f003011fcfa991f29b54c66cb2ec0b6e
hi @abhishekpatel946
does this work for you? when I dropped this into my project, it does indicate facebook in the sources for the page, but no events were being fired and the meta pixel helper plugin couldn't detect pixel on the site.@harrisyn I used this code earlier as utility with getAnalytics plug-in at that time getAnalytics do not directly suuport the facebook pixel. So i was created this as a utility and integrate with getAnalytics and it worked for me.
If it's not working properly then we can fix this.- Would appreciate any insights, I have previously integrated other plugins successfully. When I use a useEffect to load the react pixel it works fine…On Wed, Sep 27, 2023 at 9:12 AM Abhishek Patel ***@***.***> wrote: @harrisyn <https://github.com/harrisyn> I used this code earlier as utility with getAnalytics plug-in at that time getAnalytics do not directly suuport the facebook pixel. So i was created this as a utility and integrate with getAnalytics and it worked for me. If it's not working properly then we can fix this. — Reply to this email directly, view it on GitHub <#153 (comment)>, or unsubscribe <https://github.com/notifications/unsubscribe-auth/ABF3YIIM2GA3LM7A6CEUPW3X4PUYXANCNFSM4ZAQANCQ> . You are receiving this because you were mentioned.Message ID: ***@***.***>
Would appreciate any insights, I have previously integrated other plugins successfully. When I use a useEffect to load the react pixel it works fine
…
On Wed, Sep 27, 2023 at 9:12 AM Abhishek Patel @.> wrote: @harrisyn https://github.com/harrisyn I used this code earlier as utility with getAnalytics plug-in at that time getAnalytics do not directly suuport the facebook pixel. So i was created this as a utility and integrate with getAnalytics and it worked for me. If it's not working properly then we can fix this. — Reply to this email directly, view it on GitHub <#153 (comment)>, or unsubscribe https://github.com/notifications/unsubscribe-auth/ABF3YIIM2GA3LM7A6CEUPW3X4PUYXANCNFSM4ZAQANCQ . You are receiving this because you were mentioned.Message ID: @.>Yes, I am using
useEffectto capture the event in my case.To answer your question in detail so dump all the code and utility for analytics down below.
import Analytics from 'analytics' import { env } from '../../configs' import facebookPixel from './FacebookPixel' import postHog from './Posthog' /* initialize analytics and load plugins */ const analytics = Analytics({ app: 'app_name', debug: false, plugins: [ // Facebook Pixel facebookPixel({ pixelId: env.FACEBOOK_PIXEL, enabled: true, }), ], })And create a new file where I put
facebook-pixel-plugincode and in above code.type Config = { pixelId: string enabled: boolean } let fb: any let fbLoaded = false export default function facebookPixel(config: Config) { return { name: 'facebook-pixel', initialize: async ({ config }) => { const { pixelId } = config if (typeof window !== 'undefined') { await import('react-facebook-pixel') .then((module) => (fb = module.default)) .then(() => { if (!fbLoaded) { fb.init(pixelId, { autoConfig: true, debug: true, }) fbLoaded = true } }) } }, page: (): void => { fb.pageView() }, track: ({ payload }) => { fb.track(payload.event, payload.properties) }, loaded: (): boolean => { return fbLoaded }, } }and I am using this inside the components to capture the with the help of
useEffects()// Here we track and capture the events useEffect(() => { /* Track a page view */ analytics.page() /* Track a custom event */ analytics.track('page-track', { item: 'pink socks', price: 20, }) /* Identify a visitor */ analytics.identify('page-indetify', { firstName: 'bill', lastName: 'murray', }) }, [])in your example the "enabled" property doesn't seem to be used, so i will discount that as a difference, other than that I think my implementation is almost identical (mine is typescript).
However it doesn't send any events.
when I console log, I can see that the track and page events are being called, logging the fb object also shows the pixel plugin properties but the events don't react fb (I confirmed that the pixelid is correct).when I use the react-facebook-pixel plugin directly within useEffect
``
useEffect(() => {
const store: any = state?.storeData
if (isEmpty(store)) return
const facebookPixel = store?.socials?.find(
(x: any) => x.slug === 'facebook-pixel',
)
if (!facebookPixel || store?.plan !== 'paid') return
const facebookPixelId = facebookPixel?.id
import('react-facebook-pixel')
.then((x) => x.default)
.then((ReactPixel) => {
ReactPixel.init(facebookPixelId, null, {
autoConfig: true,
debug: !isProduction,
}) // facebookPixelId
ReactPixel.pageView()
// console.log("ReactPixel", ReactPixel)
router.events.on('routeChangeComplete', () => {
ReactPixel.pageView()
})
})// eslint-disable-next-line react-hooks/exhaustive-deps}, [router.events, state?.storeData])
``
it works fine.
Reacted by Abhishek PatelThen you should use the useEffect to capture the event. Not sure why it is not capturing the event once component mount? 🤔 May be it is dependent on some client side effects or window.
That's why I also use this inside useEffect if you my above code.A third-party Matomo plugin is now available at analytics-plugin-matomo.
Consolidating thread on all open plugin requests.
All issues need help if you'd like to contribute to the project 😃
The documentation on writing a plugin can be found here.