如何在不使用插件的情况下使用Google Analytics和PhoneGap?

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

我想知道是否有可能将Google Analytics(分析)视为正常的网页,并在页面的顶部放置了一些javascript。

有没有更好的方法来做到这一点? Phonegap Google Analytics(分析)比我想要做的要好得多吗?

亚历克斯build议的pokki解决scheme正在进行一些调整,以消除Pokki的需要。

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

https://github.com/ggendre/GALocalStorage

在android 4.1和ios6上效果很好,我很快就会testing更多的设备。 希望这可以帮助 ! 🙂

看看video,看看它的行动:

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

经过一番研究,我find了一个解决scheme。 我在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文件中search单词“file:”,并将其replace为“_file:”。

在我上面链接的线程中,“TimW”解释了这样的推理:

从本质上说,如果Google Analytics(分析)从文件:/// url中使用,Google Analytics将不起作用。 在iOS / PhoneGap中是这样的。 为了解决这个问题,你必须首先从谷歌下载ga.js文件,并将其作为本地构build的一部分。 你会注意到这个文件被混淆了。 在文件中search只能出现一次的string“file:”。 当你find它时,在开头添加一个下划线(所以它变成“_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> 

我在模拟器上testing了这一点,并且certificate它正在使用Google Analytics中的实时视图。 模拟器在iOS 5.0上工作。 我的手机仍在iOS 4.2上,当我在我的设备上进行testing时,它并没有显示在实时跟踪中。

在线程中,有人提到与Android 4.0 +相同的问题…希望将来会有更好的解决scheme,但现在这是最简单和最简单的方式来获得我的应用程序的基本分析。 它不能做离线跟踪,但是这有点令人毛骨悚然。

即使iOS 4和Android用户在市场上是less数(参见饼图):

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

我会stil喜欢从所有操作系统的数据。

这是2017年2月,不需要编辑analytics.js,也不需要编辑图书馆或插件,至less我不需要它们。 过去几年所说的很多东西已经过时或过时了,所以这里是我最新的综合指南。

1. config.xml文件

在你的config.xml中,你必须允许跨站请求:

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

2. HTML

在您的CSP元标记中,如果您select了某个标记,则还必须允许致电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

这里是一个webapp的注释代码,可以在浏览器和Cordova打包的应用程序中运行。 如果你不关心浏览器,你可以忽略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帐户

  • 要监视移动应用的stream量,请创buildApptypes的视图。

如果您不需要从网站监控您的networking应用程序的stream量,则可以停止阅读,否则请继续阅读。 我假设你使用一个帐户来跟踪网站和应用程序。

  • 在创build的视图上应用名为“Application?=> yes”的自定义filter,以便仅显示screenview点击。 这里有一个官方指南
  • 然后,要跟踪网站的stream量,请创buildWebsitetypes的第二个视图。 应用一个自定义filter“应用程序?=>否”就可以了。
  • 如果您想在线和应用内合并您的stream量视图,请创buildApptypes的第三个视图。 默认情况下(没有filter),它会显示所有的数据。

补充笔记

  • 现在一切都已经过去了,你的<access>和CSP中不再需要http协议了
  • 请注意,在CSP中编写*.google-analytics.com不起作用。 尽pipe该政策适用于Chrome(56),但不适用于Cordova(5.6.0)
  • Google Analytics(分析)不需要像ACCESS_NETWORK_STATE或ACCESS_WIFI_STATE这样的应用程序权限,就像我在其他地方看到的一样
  • 所有这些都通过Android应用程序进行了testing(我预计它也可以在iOS应用程序中运行),并安装了Crosswalk插件

我正在使用Ionic app(基于cordova)作为手机网站,GA正在为此工作。 当我将相同的应用程序发送到本机ios时,它停止工作。

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

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

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

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

你应该设置。 在做出这些改变之后,我能够确认GA上的事件。 希望它也能帮助你。

没有为我工作。 谷歌代码使用cookies的问题,它不适用于文件:/ /url。

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

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

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

实施后,来自Android应用的分析不会显示大约4个小时。 然后开始工作,不用更改电话号码或meteor设置。

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

注意:确保正确的访问原点设置,例如添加

这个phonegap插件将有助于整合在phonegap应用程序谷歌分析。 阅读这个博客 ,了解更多如何将Google Analytics(分析)整合到PhoneGap中。 你也可以从这里下载工作演示代码。

对于任何遇到与Guillaume Gendre在Android 4.1或其他特定平台上的出色解决scheme有关的问题的人,这可能会解决这个问题。

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

快速肮脏的解决scheme 使用可以像这样使用一个隐藏的iframe;

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

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

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

GitHub上的库

注意:为移动平台生成的Google Analytics(分析)客户端Traking ID仅支持IOS和Android。因此,如果您想跟踪您的Google Analytics(分析),请确定您已经为网站创build了它。 只有跟踪ID的网站工作与电话差距所有平台的应用程序。 然后,您可以从下面的链接下载GALocalStorage,然后将其放置在您的www文件夹下的js文件夹中

 www |__ js |__ GALocalStorage.js 

然后在你的<head>标签下面写下下面的代码,在你的仪表板里开始显示Realtime active Users。

https://github.com/ggendre/GALocalStorage

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