How to implement Facebook Pixel events using Vue + Ionic + Capacitor?

Capacitor
1

I’m building a mobile app using Vue 3, Ionic Framework, and Capacitor (v5). I want to track events (such as page views, button clicks, and purchases) using Facebook Pixel. However, Facebook Pixel is primarily designed for web applications, and I’m unsure how to implement it in a hybrid mobile app.

My setup:

  • Vue 3 (Vite)
  • Ionic Framework
  • Capacitor 5
  • Target platforms: iOS and Android

What I’ve tried:

  • Adding the Facebook Pixel JavaScript snippet directly to index.html. It seems to work in a web browser, but I’m unsure if it’s reliable or appropriate for mobile builds.
  • Tried using the Facebook Business SDK for Android/iOS, but integrating it via Capacitor plugins feels complex and undocumented.
2

I had the same issue with Capacitor. JS snippet is super buggy in webviews. I ended up using Facebook Conversions API to send events via CAPI instead, way easier than messing with the native SDK