[edit] Google Analytics现在可以在混合应用中使用localstorage。

Question

我正在制作应用，我想从用户那里获得分析。我试图使用Phonegap插件，但我没有运气试图实现它。

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

有更好的方法吗？和Phonegap谷歌分析相比，我的目标要好得多吗？

Answer 1

观看视频，了解相关信息：

经过一番研究，我找到了解决方案。我在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”解释了这个原因：

从本质上讲，如果从Google中使用Google Analytics，Google Analytics将无法运行 file：/// url。在iOS / PhoneGap中就是这种情况。为了解决这个问题问题你必须先从谷歌下载ga.js文件并包含它作为您本地构建的一部分。你会注意到这个文件是模糊处理。在文件中搜索应该出现的字符串“file：” 只有一次。当你找到它时，在开头添加一个下划线（所以它变成“_file：”）。这可以防止它匹配页面的协议 location（即“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现在可以在混合应用中使用localstorage。

Google Analytics现在有一个options explained here来使用LocalStorage而不是Cookie，还有一个黑客可以让它在网页浏览中运行（file://网址）。因此，您可以这样做，而不是使用我之前建议的代码：

// 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打包应用程序中运行的webapp的注释代码。如果您不关心浏览器，则可以忽略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？=＆gt; yes”的自定义过滤器，以便它只显示screenview匹配。有官方指南here
然后，要跟踪来自网站的流量，请创建Website类型的第二个视图。在其上应用自定义过滤器“Application？=＆gt; no”。
如果您想要在线和应用内合并流量的合并视图，请创建App类型的第三个视图。默认情况下（不带过滤器），它将显示所有数据。

附加说明

现在一切都超过了https，您的<access>和CSP
请注意，在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://。要解决此问题，我将https:添加到

下的GA网址

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

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

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

你应该被设定。进行这些更改后，我能够确认GA上的事件。希望它也能帮到你。

Answer 5

年份是11月的2019年，Google会不断更新其API，“最佳”实践等，而没有任何好的文档或向后兼容性。

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

在开始阅读之前，如果您正在阅读本文，并且您对cordova的Google Analytics / firebase插件有疑问只需离开，那么在使用Webview时就不需要任何插件。

1）首先，您必须转到Google Analytics（分析）并创建一个新的“属性”，以衡量“网站”活动（谁在您阅读本文时便知道如何调用这些活动，但所有内容都应在“管理员”）。

这里要想到的一个问题是“但是它需要URL，但我没有URL，我正在制作Cordova App”

是的，是的，对于我使用我的应用程序API的URL（这意味着您在此处输入的所有URL很有可能都可以工作）

2）然后按照@Louis Ameline的答案this one中的说明进行操作，然后将脚本加载到应用中并准备使用。

3）到此时，如果您在浏览器中运行应用程序，一切应该都很好，并且您可能可以在“实时分析”中看到有1位在线用户。

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

我希望我的解决方案确实可以帮助某人并节省一些时间。只需保留所有插件，因为它们会导致构建失败的深渊，而该构建并不会因为版本问题而终止。

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

Answer 6

对我不起作用。谷歌代码使用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将有助于将Google分析整合到phonegap应用中。 Read this blog了解有关如何在phonegap中集成Google Analytics的更多信息。您也可以从here下载工作演示代码。

Answer 9

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

如果您的Android控制台日志显示＆＃34;未知Chromium错误：0＆＃34;，您可能需要优化config.xml中的访问权限。我解决了我的问题并将其描述为here。

Answer 10

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

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

每次您在PhoneGap应用中请求一个页面时，请重新加载此iframe以初始化该曲目。

Answer 11

您可以使用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才能使用此库

Library on GitHub

Answer 12

注意：为移动平台生成的Google Analytics客户端跟踪ID仅支持IOS和Android.So如果您想要跟踪您的Google Analytics，请确保您已为网站创建了它。只有网站的跟踪ID才能与所有平台应用的手机差距一起使用然后你可以从下面的链接下载GALocalStorage，然后把它放在www文件夹下的你的js文件夹中

www
 |__
    js
      |__
          GALocalStorage.js

然后在你的＆lt;下面写下面的代码。头＆GT;标记，以及它在仪表板中显示实时活动用户的开始。

https://github.com/ggendre/GALocalStorage

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

Answer 13

对我来说，事实证明不需要插件！我在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 14

我想加2美分。就像这里的每个人一样，我对分析插件没有好运，因此开始寻找纯JavaScript解决方案。

我关注了this answer，它对我有用。意思是，我可以在Google Analytics（分析）实时中将用户活动与浏览器和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>');

所以我可以在同一Analytics（分析）属性下跟踪不同的应用程序。

在Google Analytics（分析）中，我创建了一个媒体资源，并在该媒体资源下创建了三个视图。一种是Web类型，另一种是Mobile类型。

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

要对iOS视图应用包含过滤器，该过滤器的值为 iOS

要对操作系统字段中的值应用 Android

的字段应用包含过滤器，以应用Android视图

要在Web视图中将两个 Exclude 过滤器应用于 Operating System 字段，其值分别为 Android 和 iOS

快乐的收割！

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

14 个答案:

[edit] Google Analytics现在可以在混合应用中使用localstorage。

之前的答案内容：