Is it possible to connect a React Capacitor Android App to Google Tag Manager?

Capacitor
1

(this issue is only on the Android App, the standard webapplication connects to GTM just fine)

After running the app on Android I see that all connections to GA4 and GTM are being blocked and I see a “GET https://www.google-analytics.com/analytics.js net::ERR_CONNECTION_REFUSED” error.

I’m using a standard GTM script in my index.html:

		;(function (w, d, s, l, i) {
			w[l] = w[l] || []
			w[l].push({
				"gtm.start": new Date().getTime(),
				event: "gtm.js",
			})
			var f = d.getElementsByTagName(s)[0],
				j = d.createElement(s),
				dl = l != "dataLayer" ? "&l=" + l : ""
			j.async = true
			j.src = "https://www.googletagmanager.com/gtm.js?id=" + i + dl
			f.parentNode.insertBefore(j, f)
		})(window, document, "script", "dataLayer", "myID")

And this is my capacitor.config.json:
{
“appId”: “de.test.app”,
“appName”: “Test”,
“bundledWebRuntime”: false,
“npmClient”: “npm”,
“webDir”: “build”,
“cordova”: {},
“plugins”: {
“CapacitorCookies”: {
“enabled”: true
}
},
“server”: {
“androidScheme”: “http”,
“hostname”: “localhost:3000”
}
}

I tried removing the “server” settings, changing to different hostnames, using “https”, but nothing seems to allow me to connect to gtm. Anyone had a similar issue?

2

Update: I’ve managed to solve it! The phone that I’m using for testing has a private DNS that blocks most of the advertisements on the web. It also blocked GTM, because after switching the DNS off, suddenly I’m connected to GTM :smile:

3

Hi! Im looking to use GTM on my ionic + capacitor project.
Is the implementation of GTM straight forward? Or you have to do something special like install a specific package for the ionic and capacitor ?

Thanks in advance!

4

I just reused the same GTM scripts I had for the web app. No special packages, just the standard implementation.