Plugin Requests  #153

Activity

1. DavidWells

   added

   good first issueGood for newcomersGood for newcomers

   help wantedExtra attention is neededExtra attention is needed

   Plugin Request

   on Mar 11, 2021
2. JaneJeon commented on Feb 23, 2022

   

   JaneJeon

   on Feb 23, 2022

   More actions

   Just a quick note, shouldn't the Plausible checkbox be ticked considering a Plausible plugin is already listed on your README? https://github.com/DavidWells/analytics#community-plugins
3. akafaneh commented on Jun 1, 2022

   

   akafaneh

   on Jun 1, 2022

   Last edited by akafaneh

   More actions

   #278
   Anyone have Adobe Analytic plugin they wrote?

   👀React with 👀1Reacted by tomas.nikl
4. abhishekpatel946 commented on Aug 27, 2022

   

   abhishekpatel946

   on Aug 27, 2022

   More actions

   Support of Facebook Pixel Custom Plugin with getAnalytics.
   https://gist.github.com/abhishekpatel946/f003011fcfa991f29b54c66cb2ec0b6e
5. abhishekpatel946 commented on Aug 27, 2022

   

   abhishekpatel946

   on Aug 27, 2022

   More actions

   Support of Posthog Custom Plugin with getAnalytics.
   https://gist.github.com/abhishekpatel946/f671edc2640be436a1ac1744806c4fab
6. harrisyn commented on Sep 27, 2023

   

   harrisyn

   on Sep 27, 2023

   More actions

   Support 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.
7. abhishekpatel946 commented on Sep 27, 2023

   

   abhishekpatel946

   on Sep 27, 2023

   More actions

   @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.
8. harrisyn commented on Sep 27, 2023

   

   harrisyn

   on Sep 27, 2023 via email

   More actions

   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: ***@***.***>
9. abhishekpatel946 commented on Sep 28, 2023

   

   abhishekpatel946

   on Sep 28, 2023

   More actions

   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 useEffect to 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-plugin code 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',
       })
     }, [])
   
10. harrisyn commented on Sep 28, 2023

    

    harrisyn

    on Sep 28, 2023

    More actions

    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.

    👍React with 👍1Reacted by Abhishek Patel
11. abhishekpatel946 commented on Sep 28, 2023

    

    abhishekpatel946

    on Sep 28, 2023

    More actions

    Then 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.
12. daun commented on Jun 29, 2026

    

    daun

    on Jun 29, 2026

    More actions

    A third-party Matomo plugin is now available at analytics-plugin-matomo.