I have a problem in integrating the Google Tag Manager in my Android mobile app built with ionic2/cordova. Everything works correctly when running in web browser through ionic serve
, but it has problems with the native builds.
iOS:
It didn't work at first, but after adding https://github.com/driftyco/cordova-plugin-wkwebview-engine plugin, the google analytics started to receive traffic. So this one is solved and works as it should.
Android:
After running the app and debugging it using Chrome console there are no errors at all. The dataLayer
variable is available and I can push the data into it. It also returns valid responses true
when no trigger has been fired for given event and false
when I use proper type of event. So it seems that GTM recognize everything properly. I observed in the Network tab that both Desktop/iOS are sending requests to the https://www.google-analytics.com/collect?v=1&_v=j49&a=1838345933&t=pageview&[moredatahere]
after pushing object to the dataLayer
, but Android app doesn't send anything (just nothing in the Network tab). I'm curious why is that? Why there are no requests to the GA on the Android?
Here's my index.html file:
<!DOCTYPE html>
<html lang="en" dir="ltr">
<head>
<meta charset="UTF-8">
<title>Ionic App</title>
<meta name="viewport" content="width=device-width, initial-scale=1.0, minimum-scale=1.0, maximum-scale=1.0, user-scalable=no">
<meta name="format-detection" content="telephone=no">
<meta name="msapplication-tap-highlight" content="no">
<link rel="icon" type="image/x-icon" href="assets/icon/favicon.ico">
<link rel="manifest" href="manifest.json">
<meta name="theme-color" content="#4e8ef7">
<!-- Google Tag Manager -->
<script>(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','GTM-5CH5MGN');</script>
<!-- End Google Tag Manager -->
<!-- cordova.js required for cordova apps -->
<script src="cordova.js"></script>
<link href="build/main.css" rel="stylesheet">
</head>
<body>
<!-- Google Tag Manager (noscript) -->
<noscript><iframe src="https://www.googletagmanager.com/ns.html?id=GTM-KMJLK35"
height="0" width="0" style="display:none;visibility:hidden"></iframe></noscript>
<!-- End Google Tag Manager (noscript) -->
<!-- Ionic's root component and where the app will load -->
<ion-app></ion-app>
<!-- The polyfills js is generated during the build process -->
<script src="build/polyfills.js"></script>
<!-- The bundle js is generated during the build process -->
<script src="build/main.js"></script>
</body>
</html>
And that's how I communicate with the GTM using dataLayer
variable:
let event = {
event: 'virtualpageview',
pagepath: url,
pagetitle: title
};
dataLayer.push(event);
Additionally in the cordova config.xml I've already added:
<access origin="*"/>
I'm going to answer my own question. To solve the problem you just simply need to tweak the Universal Analytics tag in the GTM.
Set:
checkProtocolTask
to null
storage
to none
clientId
is used to identify user without cookies (as storage is none). I've created new Javascript variable named Device UUID
which points to global variable device.uuid
which is simply a device identifier.After these changes everything is logged correctly.
If you love us? You can donate to us via Paypal or buy me a coffee so we can maintain and grow! Thank you!
Donate Us With