capacitor: Google tag manager not working on IOS

The configuration for the tag manager was done by adding something like the following to the index.html of the project:

<!-- Global Site Tag (gtag.js) - Google AdWords: GOOGLE_CONVERSION_ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-GOOGLE_CONVERSION_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'AW-GOOGLE_CONVERSION_ID');
</script>

Debugging the issue the apparently reason that it isn’t working is because when an event is triggered, the app makes a GET request to https://www.google-analytics.com/collect , but on the iOS build inspected through the Safari develop console, that request is never made.

Also, when opening the page from the Safari browser it’s working as expected.

The versions are:

“@capacitor/core” : “^1.0.0-beta.17”

“@capacitor/ios”: “^1.0.0-beta.19”

“@capacitor/cli”: “^1.0.0-beta.19”

Testing from an iPhone 6 running IOS 11.4.1

About this issue

Original URL
State: closed
Created 5 years ago
Comments: 45 (4 by maintainers)

Links to this issue

Google / Firebase Analytics not working on iOS with Capacitor 4

Most upvoted comments

@Snake231088 is it possible to implement a similar fix for a GTM script?

I’ve managed to relay the ga settings from GTM by doing the following:

Create a new GTM variable called Empty function as a Custom Javascript type with the following contents:

function() {
     return function() {}
}

Create a new GTM variable called JS - GetClientId as a Custom Javascript type with the following contents:

function() {
     if (window.Storage) {
       return window.localStorage.getItem('_clientId') || undefined;
     }
     return;
}

Create a new GTM variable called JS - SetClientId as a Custom Javascript type with the following contents:

function() {
     return function() {
       if (window.Storage) {
          window.localStorage.setItem('_clientId', ga.getAll()[0].get('clientId'));
       }
     }
}

Open your GTM variable where you set the Google Analytics Settings type. Go to More Settings > Fields to Set.
1. Set Field Name to checkProtocolTask with Value as {{Empty function}}
2. Set Field Name to storage with Value as none
3. Set Field Name to hitCallback with Value as {{JS - SetClientId}}
4. Set Field Name to clientId with Value as {{JS - GetClientId}}
Publish, and you’re done!

Essentially, 4.i - removes the requirement for the URI protocol to be restricted to http or https. 4.ii, 4.iii, 4.iv - moves the GA client id to be stored on localStorage instead of in the cookie.

+11

tyeon95 on Jun 15, 2020

Ok i’ve fixed

// cookies -> localStorage
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'XXXXXXXXX', {
        'storage': 'none',
        'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function (tracker) {
        localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});

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

Snake231088 on May 20, 2020

Update: I’ve found out there are two reasons why it fails:

The capacitor:// protocol is not allowed, in analytics the checkProtocolTask setting can be overridden
The script can’t store cookies, set the storage setting to none and using localstorage to store the client id helps.

naranjamecanica on Sep 11, 2019

You dont need Firebase for Google Tag Manager to receive events. Building an Ionic Angular iOS App - Everything works on Web and Android. This worked for me! Placed right after the TagManager script gtag(‘set’, {‘checkProtocolTask’: function(){ /* nothing */ } });

Credit to @ericgopak for showing this. Not using Firebase.

stanriley on Nov 11, 2020