网站首页 » 前端开发 » 移动WEB » Cordova APP 使用友盟 U-WEB 事件跟踪统计分析功能
上一篇:
下一篇:

Cordova APP 使用友盟 U-WEB 事件跟踪统计分析功能

前言

这是一篇没有什么技术含量的文章,只是在 Cordova 构建的 APP 中调用友盟 WEB 版的事件跟踪统计功能。如果是把友盟统计(https://www.umeng.com/)用到网页中,那么这篇文章就没有什么值得看的了。因为如果是放到网站中,那么就你直接把相关代码放到页面上就完事了。

友盟事件跟踪之旅

首先官方是有提供 Cordova 的 SKD 资源包。但在这里不用  SKD 资源包,而是尝试使用友盟的 U-WEB(网站统计)。这样可能会比其它方法简单一些。我用通过 U-WEB 可以实现对点击事件跟踪统计。这个用于分析用户行为有很大的帮助。

那么这个要怎么实现呢?如果单纯像网站那样把相关代码放到页面上,当你构建完应用后你会发现根本不起作用,点击事件都没有被统计到。原因就在于,它些代码需要服务器环境的支持。如果你在自己的电脑中有安装一些本地服务器环境(如:WAMPSERVER)的话,那么你可以把页面入到这个本地环境中,然后通过如:(localhost)来访问,此时点击事件就会被统计到。那么如果要想在 Cordova  应用中使用 U-WEB ,要怎么实现呢?

我们可以新建一个 HTML 文件,添加如下代码:

看这里
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>友盟事件统计分析</title>
<script>
//声明_czc对象:
var _czc = _czc || [];
</script>
</head>
<body>

</body>
<script>
    function Request() {
       var url = location.search; //获取url中"?"符后的字串
       var requests = new Object();
       if (url.indexOf("?") != -1) {
          var str = url.substr(1);
          strs = str.split("&");
          for(var i = 0; i < strs.length; i ++) {
             requests[strs[i].split("=")[0]]=unescape(strs[i].split("=")[1]);
          }
       }
       if(JSON.stringify(requests) == '{}'){ // 如果为空,则初始化
          requests =  {category:"其它",action:"其它",lable:"其它",value:"",nodeid:""};
       }
       return requests;
    }

    var tempData = Request();
    _czc.push(['_trackEvent', tempData.category, tempData.action, tempData.lable,"",""]);
</script>
<script src="https://s22.cnzz.com/z_stat.php?id=siteId&web_id=siteId" language="JavaScript"></script>
</html>

其中siteId 为你的统计站点 ID 把上面这个 analysis.html 文件上传到服务器上。

然后在你的应用的主页框架中 (如:index.html) 中添加一个

<iframe id="analysis-request" src="" frameborder="0"></iframe>

然后在应用的 JS 中添加一个方法,每一次点击都调用一下这个方法来给这个 iframe 的 src 添加一个 url (上面的 html 文件的访问路径)地址就可以了。

看这里
$("body").append('<iframe src="" frameborder="0"></iframe>'); //用 jQuery 方法添加 iframe , 如果HTML 页面中已经添加了iframe 标签(如上面的 index.html),那么这一行代码就可以删除了。
// 下面这个对象需要传什么参数,可以参考友盟官网 API 文档。
var analysisObj = {
    category:"Angular",
    action:"点击",
    lable:"注释内容"
}
function analysisApi(obj) {
    angular.forEach(obj,function(v,k){
        obj[k] = escape(v); // 转码
    });
    $("#analysis-request").attr("src","http://yunkus.com/analysis/analysis.html?category="+obj.category+"&action="+ obj.action +"&lable="+obj.lable+"&value=&nodeid=");
}
analysisApi(analysisObj);

其实上面的思路就是,我 APP 中的每次点击我都通过 iframe 来请求一下 analysis.html 页面。通过 analysis.html 来访问友盟统计 api。

一般我们开始 APP 都会用到一些框架(如:Angular),那么我们就可以在 JS 中添加一个监听,监听每一次的路由跳转,然后每一次跳转都更改下 iframe 的请求链接(链接由:固定域名 + 参数,参数用于友盟 API 统计)。

至于 iframe 的话你可以给它一些样式,让它不可见,这样你可以瞒天过海,飞一般的感觉了。其它第三方统计(比如:百度统计里的事件跟踪统计)也可以使用这个套路。

但在实践的应用中却不是很理想。当你点击快速地点击作了埋点的按钮时就会出现一种情况:第一次点击时 iframe 还没加载完,然后又点击了其它按钮,这就很有可能会让第一次的统计失败。所以在这里我们可以先把用户的所有点击都先保存到一个数组中。然后再合适的时机遍历这个数组中的每一项(url)赋值给 iframe 的 src 进行请求。实现如下:

看这里
<!DOCTYPE html>
<html lang="en" ng-app="yk">
<head>
    <meta charset="UTF-8">
    <title>优化后的事件统计方案</title>
    <script src="http://yunkus.com/demo/lib/js/angular.min.js"></script>
</head>
<body>
<div ng-controller="ctrl">
<iframe id="analysis-request" src="" frameborder="0"></iframe>
<button ng-click="analysisPush()">点我</button>
</div>
<script>
var m = angular.module("yk",[]);
m.controller("ctrl",["$scope","$timeout",function($scope,$timeout){

    var timer = null;
    var iframeLoading = false; // 默认 iframe 还没进行加载
    var analysisCollection = []; // 用于保存用户点击事件
    var ifr = document.getElementById("analysis-request");

    // 下面这个对象可以根据自己实践情况动态修改(每一次点击的记录)
    var analysisObj = {
        category:"Angular",
        action:"点击",
        lable:"注释内容"
    }

    $scope.analysisPush = function(){
      $scope.analysisApi(analysisObj);
    }

    $scope.analysisApi = function(obj){
      // 转码,解决中文传参时乱码问题
      obj.category = escape(obj.category);
      obj.action = escape(obj.action);
      obj.lable = escape(obj.lable);
      analysisCollection.push(obj);

      // 取消定时器,1秒后用户无点击则请求统计 api 进行统计
      $timeout.cancel(timer);
      timer = $timeout(function(){
        requireYm();
      },1000);
    }

    // 请求统计 api
    function requireYm(){
      if(!iframeLoading){ // 如果还没有 iframe 在加载
          iframeLoading = true;
          var requireItme = analysisCollection.shift(); // 取出数组第一个项
          ifr.src = "http://yunkus.com/analysis/analysis.html?category="+requireItme.category+"&action="+ requireItme.action +"&lable="+requireItme.lable+"&value=&nodeid="+"random"+Math.random();
          // 添加一个随机数,防止 iframe 缓存。
          ifr.onload = function(){
            // console.log(analysisCollection);
             // 加载完成
             iframeLoading = false; // 改变状态准备
             console.log(analysisCollection.length);
             if(analysisCollection.length>0){
                // 加载下一个(如果有的话)
                requireYm();
             }
          }
      }
    }
}]);
</script>
</body>
</html>

上面这个基本就可以解决一般的统计无效的问题了,只不过我觉得如果条件允许的话,最好不要使用这种方法,因为每一次点击都会加载一次analysis.html 页面。在流量至上的年代,建议如果是 APP 的话,还是使用官方提供的 SDK 版本。

相关资料

友盟事件跟踪统计预配置代码

友盟代码部署流程

 

  • 微信扫一扫,赏我

  • 支付宝扫一扫,赏我

声明

原创文章,不经本站同意,不得以任何形式转载,如有不便,请多多包涵!

本文永久链接:http://yunkus.com/cordova-app-use-cnzz-events-analysis/

发表评论

电子邮件地址不会被公开。 必填项已用*标注

评论 END