用CNZZ实现Html5中的事件统计

最新推荐文章于 2025-07-04 23:43:59 发布

原创最新推荐文章于 2025-07-04 23:43:59 发布 · 5.8k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#html5 事件统计

前端专栏收录该内容

21 篇文章

订阅专栏

本文介绍在手机端Html5开发过程中如何高效地进行事件统计，包括PV、UV、按钮点击次数和微信分享次数的统计方法。推荐使用专业统计工具如CNZZ、百度统计，并详细说明了设置步骤及应用示例。最后比较了不同统计工具的优缺点，以腾讯统计为例，特别强调其在微信分享数据统计方面的优势。

摘要生成于 C知道，由 DeepSeek-R1 满血版支持，前往体验 >

应用场景

开发手机端Html5时，需要事件统计，如统计每个页面的PV（Page View 访问量）、UV（Unique Visitor 独立访客），某个按钮的点击次数，微信分享次数等。

分析

以上这些统计可以通过存储变量实现（如记录到数据库），但是比较繁琐并且无法准确的统计UV。

考虑使用专业的统计工具，如CNZZ、百度统计等。

设置方法

以CNZZ为例，设置方法很简单（官方文档），只需调用一个函数“_trackEvent()”

czc.push(["_trackEvent",category,action,label,value,nodeid]);
//category：事件类别，必填项；
//action：事件操作，必填项；
//label：事件标签，选填项；
//value：事件值，选填项；
//nodeid：div元素id，选填项；

在“开放计算平台/事件"下，查看数据。

应用举例

1.统计按钮点击事件

//CNZZ统计代码start
_czc.push(['_trackEvent', '按钮点击', '开始按钮']);				
//CNZZ统计代码end

2.统计微信朋友圈分享事件

//CNZZ统计代码start					
_czc.push(['_trackEvent', '分享', '朋友圈']);				
//CNZZ统计代码end

数据展示如下图：

其他

百度统计设置方法基本一致（官方文档）；

还有一个统计工具DataEye，专门用于HTML5游戏的数据统计。

------------------------------- 时间分界线：2020.2.23 -------------------------------

近期的H5项目，统计工具用的最多的是腾讯统计（https://mta.qq.com），对比其他统计工具优点如下：

1、统计数据易分享

把客户的QQ号加入权限管理／关注人，然后通知客户用自己的QQ登录腾讯统计即可自己查看数据。

2、方便统计微信分享数据

集成了QQ、新浪、微信、朋友圈等分享渠道，用户不必再自定义。

下面是微信朋友圈和好友的统计代码示例：

wx.ready(function () {  
    wx.onMenuShareTimeline({
        title: wxData.title,
        link: wxData.link,
        imgUrl: wxData.imgUrl,
        success: function () {
            // 统计 分享微信朋友圈
            MtaH5.clickShare('wechat_moments'); 
        }
    });
    wx.onMenuShareAppMessage({
        title: wxData.title,
        desc: wxData.desc,
        link: wxData.link,
        imgUrl: wxData.imgUrl,
        type: 'link',
        dataUrl: '',
        success: function () {
            // 统计 分享微信好友
            MtaH5.clickShare('wechat_friend');
        }
    });
});

参考链接：

高级功能 · 腾讯移动分析文档：https://mta.qq.com/docs/h5_advance_access.html