如何在没有插件的情况下将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"解释了这个原因:

从本质上讲,如果从文件:/// url中使用Google Analytics,Google Analytics将无法运行.在iOS/PhoneGap中就是这种情况.要解决此问题,您必须先从谷歌下载ga.js文件,并将其作为本地版本的一部分包含在内.您会注意到此文件已被混淆.在文件中搜索字符串"file:",该字符串只能出现一次.当你找到它时,在开头添加一个下划线(所以它变成"_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现在可以在混合应用中使用localstorage.

谷歌分析现在有一个选项,在这里解释使用LocalStorage而不是cookie,还有一个hack使它在webviews(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');

上一个答案内容:

亚历克斯建议的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类型的视图.

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

• 在创建的视图上应用名为"Application？=> yes"的自定义过滤器,以便它只显示screenview命中.有一个官方指南这里
• 然后,要跟踪来自网站的流量,请创建该Website类型的第二个视图.在其上应用自定义过滤器"Application？=> no".
• 如果您想要在线和应用内合并流量的合并视图,请创建该App类型的第三个视图.默认情况下(不带过滤器),它将显示所有数据.

补充说明

• 现在一切都超过了https,在您<access>和CSP中不再需要http协议
• 请注意,*.google-analytics.com在CSP 中写入不起作用.虽然该政策适用于Chrome(56),但它不适用于Cordova(5.6.0)
• 谷歌分析不需要任何应用程序权限,如ACCESS_NETWORK_STATE或ACCESS_WIFI_STATE,就像我在其他地方读过的那样
• 所有这些都是使用Android应用程序测试的(我希望它也可以在iOS应用程序中运行),并安装了Crosswalk插件