46

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

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

有一个更好的方法吗？Phonegap Google Analytics 是否比我正在尝试做的要好得多？

4

14 回答 14

34

查看视频以查看其实际效果：

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”解释了这样做的原因：

从本质上讲，如果从 file:/// url 使用 Google Analytics，它就无法工作。在 iOS/PhoneGap 中就是这种情况。为了解决这个问题，您必须首先从 google 下载 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

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

于 2012-06-14T05:02:39.720 回答
30

[编辑] Google Analytics 现在可以在混合应用程序中使用本地存储。

Google Analytics 现在在这里解释了一个使用 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 上运行良好，我将很快测试更多设备。希望这可以帮助 ！:)

于 2013-01-04T09:37:54.833 回答
25

这是 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类型的视图。

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

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

补充说明

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

这一年是 2019 年 11 月，谷歌不断更新他们的 API、“最佳”实践等，但没有任何好的文档或向后兼容性。

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

在我开始之前，如果您正在阅读本文并且您遇到了科尔多瓦的谷歌分析/firebase 插件的问题，请留下它们，使用 webview 时，您不需要任何插件。

1）首先你必须去谷歌分析并创建一个新的“属性”来衡量“网站”活动（谁知道在你阅读这篇文章时这些将如何被调用，但一切都应该在“管理”部分面板）。

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

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

2）然后按照@Louis Ameline 的回答中的说明进行操作，这就是这个，您将在您的应用程序中加载脚本并准备好使用。

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

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

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

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

于 2019-11-09T15:41:46.717 回答
3

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

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

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

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

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

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

于 2016-01-28T09:16:37.310 回答
2

没有为我工作。谷歌代码使用 cookie 的问题，它不适用于 file:// url。

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

于 2012-12-23T12:54:23.077 回答
1

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

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

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

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

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

于 2014-02-25T10:57:57.877 回答
1

这个phonegap 插件将有助于将谷歌分析集成到 phonegap 应用程序中。 阅读此博客以了解更多如何在 phonegap 中集成谷歌分析。您也可以从这里下载工作演示代码。

于 2015-04-02T12:05:13.153 回答
1

对我来说，事实证明不需要插件！我有用 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 嵌入到我的应用程序中，用于混合版本和托管版本。

于 2019-08-18T11:49:13.270 回答
0

您可以使用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>

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

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

GitHub 上的库

于 2015-02-25T16:10:28.430 回答
0

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

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

于 2013-09-13T08:56:27.723 回答
0

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

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

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

于 2014-05-16T04:43:09.743 回答
0

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

www
 |__
    js
      |__
          GALocalStorage.js

然后在您的 <head> 标签下编写以下代码，并开始在您的仪表板中显示实时活动用户。

https://github.com/ggendre/GALocalStorage

       <script>
        ga_storage._setAccount('UA-XXXXXXXX-X'); //Replace with your own
        ga_storage._trackPageview('Home Screen');
        </script>
于 2015-07-09T11:24:24.117 回答
0

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

我遵循了这个答案，它对我有用。意味着，我可以在 Google Analytics Realtime 中看到将用户活动与浏览器和 iOS 模拟器分开。（还没有测试过安卓。）

我稍微改变了脚本。

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 类型。

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

应用到 iOS 视图包括字段操作系统上的过滤器，值为iOS

到 Android 视图应用在字段操作系统上包含过滤器，值为Android

到 Web 视图在字段操作系统上应用了两个排除过滤器，其值为Android和iOS

快乐的绳索！

于 2019-12-09T21:20:25.287 回答