Android 科尔多瓦中的谷歌标签管理器

时间:2023-03-08
本文介绍了Android 科尔多瓦中的谷歌标签管理器的处理方法,对大家解决问题具有一定的参考价值,需要的朋友们下面随着小编来一起学习吧!

问题描述

我在使用 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:

  • 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.

这篇关于Android 科尔多瓦中的谷歌标签管理器的文章就介绍到这了,希望我们推荐的答案对大家有所帮助,也希望大家多多支持html5模板网!

上一篇:在 Ionic 2 for Android 中放置推送通知的自定义声音 下一篇:Ionic 2 构建的应用程序(IOS、Android)在启动时很慢

相关文章

最新文章