需求

观测购买流程转化率 & 使用流程情况，记录各页面PV/UV。

名词解释：

PV: page view, 页面浏览量，累计，无论是否同一个用户访问均作数。
UV: unique visitor, 访问人数，去重，同一个用户当日多次访问算作1个UV。

埋点分类

代码埋点：服务商如友盟、百度统计等。精准，但代价大维护麻烦。
可视化埋点：埋点和维护代价小，但覆盖功能有限，且仅限客户端埋点
无痕埋点：也叫全埋点，针对某类事件进行全局埋点。代价小，但，也是不灵活覆盖功能有限数据量。

此项目因埋点需求少，项目简单，故采用代码埋点，选择了友盟。

注册

www.umeng.com/ 使用产品，u-web

数据接入

developer.umeng.com/docs/67963/…

埋点具体步骤

html模版中

加载埋点SDK，测试环境和线上环境分开统计

<script>
    // 测试环境
    (function () {
      var um = document.createElement("script");
      um.src = "https://s4.cnzz.com/z.js?id=xxxx&async=1";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(um, s);
    })();

    // prod环境
    (function () {
      var um = document.createElement("script");
      um.src = "https://v1.cnzz.com/z.js?id=xxxx0&async=1";
      var s = document.getElementsByTagName("script")[0];
      s.parentNode.insertBefore(um, s);
    })();

    var _czc = _czc || [];
    window._czc && window._czc.push(['_setAutoPageview', false]); // 关闭自动PV
  </script>

埋点API

/*
设置siteId
当您的页面上添加了多个统计代码时，需要用到本方法绑定需要哪个siteid对应的统计代码来接受API发送的请求。未绑定的siteid将忽略相关请求。
*/
export const umSetSiteId = (siteId: string) => {
    window._czc && window._czc.push(['_setAccount', siteId]);
}

/* 
设置用户id
用于上报自定义的用户ID，将U-Web的ID与自己的用户ID关联使用，方便对不同得人群进行分析，更加准确得了解用户的喜好
*/
export const umSetUUid = (userId: string) => {
    window._czc && window._czc.push(['_setUUid', userId]);
}


/* 
设置自动PV统计
如果您使用_trackPageview改写了已有页面的URL，那么建议您在CNZZ的JS统计代码执行前先调用_setAutoPageview，将该页面的自动PV统计关闭，防止页面的流量被统计双倍。（默认true）
备注：html模版中，在引入前，已关闭
*/
export const umSetAutoPageView = (isAuto: boolean) => {
    window._czc && window._czc.push(['_setAutoPageview', isAuto]);
}


/* 
设置页面访问事件

@content_url - 自定义虚拟PV页面的URL地址，/开头
@refer_url - 自定义该受访页面的来源页面，/开头. 不填，则按来路按母页面的来路计算。填"", 则按直接输入网址来计算。

*/
export const umSetPageView = (content_url: string, refer_url?: string) => {
    window._czc && window._czc.push(['_trackPageview', content_url, refer_url || '']);
}

// 其他，click等事件埋点 https://developer.umeng.com/docs/67963/detail/74518

区分环境埋点

// 初始化数据： 埋点数据
const initData = () => {
    umSetSiteId(import.meta.env.VITE_NODE_ENV === 'production' ? '1281327530' : '1281325776'); // 设置线上站点id、测试站点id
}

onMounted(async () => {
    initData();
}

设置userId

export const getUserInfo = async () => {
    return new Promise(async (resolve, reject) => {
        try {
            const res = await post('/mall/me/detail');
            const { username, member, userId } = res.data || {};

            // 全局数据
            store.setUser(username);
            store.setMember(member);
            store.setRedeemTimes(member?.remainingRedeemTimes || 0);
            store.setDiscountTimes(member?.remainingDiscountTimes || 0);

            // 事件数据
            umSetUUid(userId);

            resolve({ username, member })

        } catch (error) {
            reject(error);
        }
    })
}

埋点pageView

onMounted(() => {
  umSetPageView(URLS.home);
})

查看统计

web.umeng.com/main.php?c=…

截屏2024-01-17 12.17.48.png

截屏2024-01-17 12.19.09.png

结束

至此，最基础的代码埋点流程即完毕。后续，就是新增其他类型如点击类埋点等，收集并分析数据。

最基本的友盟H5埋点指南

需求