Menu
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="*"/>
621
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.
182
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