Google / Firebase Analytics not working on iOS with Capacitor 4

Question

Currently I am working on a Capacitor 4 app using VUE. To know which sections are used most I want to add Google or Firebase Analytics.

In the browser and Android everything works fine, however on iOS it doesn't. I tried 6 different solutions and now kinda out of options. My guess is that it has something todo with the Capacitor webview not being allowed to call Google/Firebase analytics or can set cookies.

Another issue could be that Capacitor serves the app from localhost. That would clarify why analytics is working when I add:

  server: {
    url: 'http://192.168.0.16:3333',
    cleartext: true,
  },

To the capacitor.config.ts since it then is not server from localhost but from an ip.

I was wondering if anyone has experienced the same (and might know a solution)

Solutions tried without any working outcome on iOS

1. Added extra consent flags to avoid using cookies

from: Disabling cookies in Google Analytics - gtag.js

gtag("consent", "default", {
   ad_storage: "denied",
   analytics_storage: "denied",
})

2. Added client_storage: "none",

gtag("config", "%VITE_APP_GOOGLE_TAG_MANAGER_TRACKING_ID%", {
  send_page_view: false,
  anonymize_ip: true,
  client_storage: "none",
})

3. From https://github.com/ionic-team/capacitor/issues/1433#issuecomment-631404089

// allow capacitor:// as protocol
gtag('set', 'checkProtocolTask', function () { /* nothing */ });

4. Going back to analytics.js

ga("set", {
  // don't abort if the protocol is not http(s)
  checkProtocolTask: null,
  // don't expect cookies to be enabled
  checkStorageTask: null,
})

5. Firebase Analytics - Capacitor

https://github.com/capacitor-community/firebase-analytics Not maintained anymore since 25 Januari 2011

6. Firebase Analytics - Web

Used the web package for Firebase Analytics https://firebase.google.com/docs/reference/js/analytics

Give Capacitor Firebase a try: https://github.com/capawesome-team/capacitor-firebase/blob/main/packages/analytics/README.md — RGe, Sep 19 '22 at 06:41
@RGe thanks this one made it work together with disabling my Adblocking DNS — Bas van Dijk, Sep 21 '22 at 20:29
I've writted docs and an example project to be sure what steps were needed https://github.com/basvdijk/capacitor4-firebase-analytics-example-project-capawesome-team — Bas van Dijk, Sep 23 '22 at 10:10

score 1 · Answer 1 · answered Mar 22 '23 at 08:16

The issue (at least for us) seemed to stem from the fact that the GA script does a protocol check and refuses to do anything unless we're on the http or https protocol.

Getting GA4 to work under the capacitor:// (or any other) protocol does appear to be possible with a bit of a hack -- by fetching the entire GA script as text and performing a strategic find+replace before executing it:

fetch("https://www.googletagmanager.com/gtag/js?id=G-XXXXXXXXXX")
    .then(response => response.text())
    .then(response => {
        if (document.location.protocol.startsWith('http')) {
            Function(response)()
        } else {
            Function(response.replaceAll('http:', 'capacitor:'))()
        }
    })

Don't forget to enable cookies if running on Capacitor: https://capacitorjs.com/docs/apis/cookies

Of course there's no guarantee how reliable this approach will be in the long term.

That is why I started using Capawesome since that seems to be the most reliable option for now: https://github.com/basvdijk/capacitor4-firebase-analytics-example-project-capawesome-team — Bas van Dijk, Mar 22 '23 at 09:15