如何在没有插件的情况下将 Google Analytics 与 Phonegap 一起使用？

Question

我正在制作一个应用程序，我想从用户那里获得分析。我尝试使用 Phonegap 插件，但尝试实现它没有任何运气。

我想知道是否可以通过将应用程序视为普通网页并在我的页面头部放置一些 javascript 来获得 Google Analytics。

有没有更好的方法来做到这一点？ Phonegap Google Analytics 是否比我正在尝试做的要好得多？

Answer 1

观看视频以了解实际情况：

http://screencast.com/t/6vkWlZOp

经过一番研究，我找到了解决方案。我在 Phonegap Google Group 上看到了这个帖子：https://groups.google.com/forum/#!msg/phonegap/uqYjTmd4w_E/YD1QPmLSxf4J （感谢 TimW 和 Dan Levine！） 在这个线程中，我发现可以在没有插件的情况下使用 Google Analytics。您所要做的就是从 Google http://www.google-analytics.com/ga.js 下载 ga.js 文件（只需将页面保存到您的 www 文件夹中）

然后修改 ga.js 文件，添加一个字符。在 ga.js 文件中搜索单词“file:”并将其替换为“_file:”。

在我上面链接的线程中，“TimW”解释了这样做的原因：

基本上，如果从 文件：/// 网址。在 iOS/PhoneGap 中就是这种情况。为了解决这个 问题你必须先从谷歌下载 ga.js 文件并包含 它作为您本地构建的一部分。你会注意到这个文件是 混淆了。在文件中搜索应该出现的字符串“file:” 只有一次。当你找到它时，在开头添加一个下划线（这样它 变成“_file：”）。这可以防止它匹配页面的协议 位置（即“文件：”）。

在 ga.js 文件中添加一个字符后，只需在页面顶部添加以下内容：

<script type="text/javascript" src="ga.js"></script>
    <script>
 var _gaq = _gaq || [];
    _gaq.push(['_setAccount', 'UA-YOUR_ID_HERE']);
    _gaq.push(['_setDomainName', 'none']);
    _gaq.push(['_trackPageview', 'NAME_OF_PAGE']);
    </script>

我在模拟器上对此进行了测试，并证明它使用 Google Analytics 中的实时视图可以正常工作。模拟器在 iOS 5.0 上运行。我的手机仍在 iOS 4.2 上，当我在我的设备上测试它时，它没有显示在实时跟踪中。

在帖子中，有人提到了与 Android 4.0+ 相同的问题...希望将来会有更好的解决方案，但目前这是为我的应用获取基本分析的最简单和最简单的方法。它不能进行离线跟踪，但无论如何这有点令人毛骨悚然。

尽管 iOS 4 和 Android 用户在市场上是少数（见饼图）：

http://static7.businessinsider.com/image/4fd65fac6bb3f7925700000f/chart-of-the-day-ios-vs-android-june-2012.jpg

我仍然想从所有操作系统中获取数据。

Answer 2

[edit] Google Analytics 现在可以在混合应用中与本地存储配合使用。

Google Analytics 现在有一个 options explained here 来使用 LocalStorage 而不是 cookie，并且还有一个 hack 可以让它在 webviews (file:// urls) 中工作。所以不要使用我之前建议的代码，你可以这样做：

// THIS IS FOR LOCALSTORAGE
var GA_LOCAL_STORAGE_KEY = 'ga:clientId';
ga('create', 'UA-XXXXX-Y', {
  'storage': 'none',
  'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
});
ga(function(tracker) {
  localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
});

// THIS IS FOR FILE URL SUPPORT
ga('set', 'checkProtocolTask', function(){ /* noop */});

// And then as usual...
ga('send', 'pageview');

之前的回答内容：

Alex 建议的 pokki 解决方案运行良好，只需进行一些调整即可消除对 Pokki 的需求。

我在这里为这个清理版本创建了一个 git 项目：

https://github.com/ggendre/GALocalStorage

在 android 4.1 和 ios6 上运行良好，我将很快测试更多设备。希望这可以帮助 ！ :)

Answer 3

这是 2017 年 2 月，不需要编辑 analytics.js，也不需要库或插件，或者至少我不需要它们。过去几年所说的很多东西都已被弃用或过时，所以这是我最新的综合指南。

1. config.xml 文件

在你的config.xml中，你必须允许跨站请求：

<access origin="https://www.google-analytics.com" />

2。 HTML

在您的 CSP 元标记中，如果您选择有一个，您还必须允许调用 Google。它可能看起来像：

<meta http-equiv="Content-Security-Policy" content="default-src 'self' data: gap: 'unsafe-inline' 'unsafe-eval' https://ssl.gstatic.com https://www.google-analytics.com;">

3. javascript

这里是可以在浏览器和 Cordova 打包应用程序中运行的 web 应用程序的注释代码。如果您不关心浏览器，可以忽略 else 块。

// the default GA code, nothing to change
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

var fields = {
  // note: you can use a single tracking id for both the app and the website,
  // don't worry it won't mix the data. More about this in the 3rd section
  trackingId: 'UA-XXXXXXXX-Y'
};

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

  // we store and provide the clientId ourselves in localstorage since there are no
  // cookies in Cordova
  fields.clientId = localStorage.getItem('ga:clientId');
  // disable GA's cookie storage functions
  fields.storage = 'none';

  ga('create', fields);

  // prevent tasks that would abort tracking
  ga('set', {
    // don't abort if the protocol is not http(s)
    checkProtocolTask: null,
    // don't expect cookies to be enabled
    checkStorageTask: null
  });

  // a callback function to get the clientId and store it ourselves
  ga(function(tracker){
    localStorage.setItem('ga:clientId', tracker.get('clientId'));
  });

  // send a screenview event
  ga('send', {
    // these are the three required properties, check GA's doc for the optional ones
    hitType: 'screenview',
    // you can edit these two values as you wish
    screenName: '/index.html',
    appName: 'YourAppName'
  });
}
// if we are in a browser
else {

  ga('create', fields);

  // send a pageview event
  ga('send', {
    // this is required, there are optional properties too if you want them
    hitType: 'pageview'
  });
}

3.您的 GA 帐户

• 要监控移动应用的流量，请创建App 类型的视图。

如果您不需要监控来自网站的网络应用程序的流量，您可以在此处停止阅读，否则请继续阅读。我假设您使用一个帐户来跟踪网站和应用程序。

• 在创建的视图上应用名为“Application? => yes”的自定义过滤器，以便它只显示screenview 命中。有官方指南here
• 然后，为了跟踪来自网站的流量，创建Website 类型的第二个视图。在其上应用自定义过滤器“Application? => no”。
• 如果您想要在线和应用内流量的合并视图，请创建App 类型的第三个视图。默认情况下（没有过滤器），它将显示所有数据。

补充说明

• 现在一切都通过 https，在您的 <access> 和 CSP 中不再需要 http 协议
• 请注意，在 CSP 中写入 *.google-analytics.com 是行不通的。尽管该策略适用于 Chrome (56)，但不适用于 Cordova (5.6.0)
• Google 分析不需要任何应用程序权限，例如我在其他地方读到的 ACCESS_NETWORK_STATE 或 ACCESS_WIFI_STATE
• 所有这些都使用 Android 应用进行了测试（我希望它也可以在 iOS 应用中运行），并安装了 Crosswalk 插件

Answer 4

我使用 Ionic 应用程序（基于 cordova）作为移动网站，GA 正在为此工作。当我将同一个应用程序发送到本机 ios 时，它停止了工作。

问题 1。
检查模拟器的日志，发现 GA 没有正确加载。它正在尝试负载file://。为了解决这个问题，我在

下的 GA url 前添加了 https:

(window,document,'script','//www.google-analytics.com/analytics.js','ga')

问题 2。 如果页面协议不是 http 或 https，Google 默认会中止请求。解决这个问题

ga('set', 'checkProtocolTask', null);

你应该准备好了。进行这些更改后，我能够在 GA 上确认事件。希望对你也有帮助。

Answer 5

2019 年是 11 月，Google 在没有任何良好文档或向后兼容性的情况下不断更新其 API、“最佳”实践等。

这是我为我的解决方案所做的，我在这里使用了两个答案的组合。

在我开始之前，如果您正在阅读本文并且您在使用 Cordova 的 google analytics/firebase 插件时遇到问题只需离开他们，在使用 webview 时您不需要任何插件。

1) 首先，您必须转到 Google Analytics（分析）并创建一个新的“属性”来衡量“网站”活动（谁知道在您阅读本文时这些将如何被调用，但一切都应该在“ Admin”面板的一部分）。

这里想到的一个问题是“但它需要 url，我没有 url 我正在制作 Cordova 应用程序”

是的，你是对的，对于我使用我的应用程序 API 的 URL（这意味着你输入的任何 URL 很可能都可以使用）

2) 然后按照@Louis Ameline 的回答中的说明进行操作，即this one 这样您就可以将脚本加载到您的应用程序中并准备好使用。

3) 现在，如果您在浏览器中运行您的应用程序，一切都应该没问题，您可能会在“实时分析”中看到有 1 个在线用户。

4) 现在，为了在 Webview 中工作，您应该遵循@Guillaume Gendre（更新后的）here 的答案。我只是复制粘贴的代码（当然还有我的 trackingId），现在当我构建应用程序并在我的 Android 上运行它时，它可以按预期工作并发送分析。

---

我希望我的解决方案确实可以帮助某人并节省一些时间。留下所有插件，因为它们会导致构建不成功的深洞，并且不会因为版本问题而结束。

我的应用也是基于 React 的，但这一点都不重要，它应该适用于所有框架和库，因为这是纯 js。我建议你对这类问题使用这种解决方案，因为它没有连接到任何特定的库。

Answer 6

对我不起作用。 google code 使用 cookie 的问题，它不适用于 file:// urls。

我找到了使用 localStorage 代替 cookie 的良好实现： https://developers.pokki.com/docs/tutorials.php

Answer 7

我已经在 HTML5/meteor 应用程序中实现了 segment.io - analytics.js 库。

我在 phonegap (3.1) 中没有分析插件。 立即为 iOS 工作。

实施后，来自 Android 应用的分析在大约 4 小时内未显示。然后它开始工作，无需更改 phonegap 或流星设置。

希望这可以帮助人们避免花费几个小时寻找神秘错误。

注意：确保设置了正确的访问源，例如 添加

Answer 8

这个phonegap plugin 将有助于将谷歌分析集成到phonegap 应用程序中。 Read this blog 了解更多如何在 phonegap 中集成谷歌分析。您也可以从here 下载工作演示代码。

Answer 9

对我来说，事实证明不需要插件！ 我有用 Cordova 包装的 Angular 8 应用程序（与 Ionic 非常相似的用例） 我在 Google Analytics 中注册了新网站。我将 GA 的代码修改为如下所示：

const gaScript = document.createElement('script');
        gaScript.src = "https://www.google-analytics.com/analytics.js";
        gaScript.type = "text/javascript";
        document.getElementsByTagName('head')[0].appendChild(gaScript);
        gaScript.onload = (ev: Event) => {
            const GA_LOCAL_STORAGE_KEY = 'ga:clientId';
            window['ga']('create', 'XXXX-XXXXX', {
                'storage': 'none',
                'clientId': localStorage.getItem(GA_LOCAL_STORAGE_KEY)
            });
            window['ga'](function(tracker) {
                localStorage.setItem(GA_LOCAL_STORAGE_KEY, tracker.get('clientId'));
            });

            // THIS IS FOR FILE URL SUPPORT
            window['ga']('set', 'checkProtocolTask', function(){ /* noop */});
            console.log('GA OK!')
        }

然后我可以以常规方式使用 GA： window['ga']('send', 'pageview', screenName); 这是因为在使用 file:// 协议提供服务时没有自动跟踪页面更改。

这个解决方案非常方便，因为它是 DRY，因为我只有一种方法可以将 Google Analytics 嵌入到我的混合和托管版本的应用程序中。

Answer 10

对于在 Android 4.1 或其他特定平台上遇到 Guillaume Gendre 的出色解决方案的任何人，这可能会解决他们。

如果您的 Android 控制台日志显示“Unknown Chromium error: 0”，您可能需要在 config.xml 中优化您的访问权限。我解决了我的问题并描述了它here。

Answer 11

快速而肮脏的解决方案。 使用可以像这样使用一个光隐藏的iframe；

<iframe src="http://www.yourwebsite.com/userControls/GoogleAnalytics.html?param=extraParamHere" style="visibility: hidden"></iframe>

并且每次您在 PhoneGap 应用中请求页面时，重新加载此 iframe 以初始化轨道。

Answer 12

您可以使用GALocalstorage 库，它在移动设备上运行良好

很容易设置

<script type="text/javascript" src="js/libs/GALocalStorage.js"></script>
<script>
    ga_storage._setAccount('UA-37167XXX-1'); //Replace with your own
    ga_storage._trackPageview('/index.html');

</script>

就是这样，没有修改或其他任何东西。

您需要在Google analytics 中创建Website Account 才能使用此库

Library on GitHub

Answer 13

注意：为移动平台生成的 Google Analytics 客户端跟踪 ID 仅支持 IOS 和 Android。因此，如果您想跟踪您的谷歌分析，请确保您已为网站创建它。 只有网站的 Tracking ID 适用于所有平台应用程序的电话间隙。 然后你可以简单地从下面的链接下载 GALocalStorage，然后把它放在你的 js 文件夹中 www 文件夹下

www
 |__
    js
      |__
          GALocalStorage.js

然后在您的

标签下编写以下代码，并开始在您的仪表板中显示实时活跃用户。

https://github.com/ggendre/GALocalStorage

       <script>
        ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
        ga_storage._trackPageview('Home Screen');
        </script>

Answer 14

我想加我的 2 美分。 和这里的每个人一样，我对分析插件没有运气，所以开始寻找纯 JavaScript 解决方案。

我关注了this answer，它对我有用。意味着，我可以在 Google Analytics Realtime 中看到将用户活动与浏览器和 iOS 模拟器分开。 （还没有测试过Android。）

我稍微改变了脚本。

1)

// if we are in the app (the protocol will be file://)
if(document.URL.indexOf('http://') !== 0){

改成

if(document.URL.indexOf('http') !== 0){

包括https案例。

2) 与我所在的位置无关：在浏览器或移动应用程序中，我跟踪这样的事件：

ga('send', 'event', '<myAppName>', '<eventName>');

这样我就可以在同一个分析属性下跟踪不同的应用程序。

在 Google Analytics（分析）中我创建了一个属性，并在此属性下创建了三个视图。一种是Web 类型，另一种是Mobile 类型。

对每个视图应用自定义过滤器：

在字段 Operating System 上应用 包含 过滤器的 iOS 视图，其值为 iOS

在字段 Operating System 上应用 Include 过滤器的 Android 视图，其值为 Android

Web 视图在字段 Operating System 上应用了两个 Exclude 过滤器，其值为 Android 和 iOS

快乐的绳索！