Android 科尔多瓦中的谷歌标签管理器 [英] Google Tag Manager in Android cordova
问题描述
我在使用 ionic2/cordova 构建的 Android 移动应用中集成 Google 跟踪代码管理器时遇到问题.通过 ionic serve 在 Web 浏览器中运行时一切正常，但在原生构建时会出现问题.
iOS:
一开始没用，但是在添加
设置:
checkProtocolTask到null存储到无clientId用于识别没有 cookie 的用户(因为没有存储).我创建了名为Device UUID的新 Javascript 变量，它指向全局变量device.uuid，它只是一个设备标识符.
在这些更改之后，所有内容都会正确记录.
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:
checkProtocolTasktonullstoragetononeclientIdis used to identify user without cookies (as storage is none). I've created new Javascript variable namedDevice UUIDwhich points to global variabledevice.uuidwhich is simply a device identifier.
After these changes everything is logged correctly.
这篇关于Android 科尔多瓦中的谷歌标签管理器的文章就介绍到这了，希望我们推荐的答案对大家有所帮助，也希望大家多多支持IT屋！
