友盟数据前端埋点

接入公共函数

第一种：接入script标签

缺点是页面上有「站长之家」的文字

<script type="text/javascript" src="https://s9.cnzz.com/z_stat.php?id=1280210753&web_id=1280210753"></script>

第二种：异步加载

可以隐藏“站长之家”的文字提示

(function () {
    var el = document.createElement('script')
    el.type = 'text/javascript'
    el.charset = 'utf-8'
    el.async = true
    var ref = document.getElementsByTagName('script')[0]
    ref.parentNode.insertBefore(el, ref)
    el.src = 'https://w.cnzz.com/c.php?id=1280210753&async=1'
})()

1
2
3
4
5
6
7
8
9

埋点规则定义

类别+操作+{可选}

类别：平台_页面_模块 如：yctApp_首页_健康资讯

操作：事件

{可选}：扩展参数 如：{智能导诊}

trackEvent = {
    'click': '点击',
    'link': '点击跳转',
    'close': '点击关闭',
    'commit': '点击提交',
    'exposure': '弹出',
    'toggle': '点击切换'
}

1
2
3
4
5
6
7
8

注意

click 事件为工程内部跳转 link 事件为后台配置链接或第三方链接

完整事例

_czc.push(['_trackEvent','类别','操作','{可选}'])

_czc.push(['_trackEvent','医程通app_首页_健康资讯','点击'])
_czc.push(['_trackEvent','医程通app_首页_健康资讯','点击','{文章标题}')

_czc.push(['_trackEvent','医程通app_首页_H5广告','弹出'])
_czc.push(['_trackEvent','医程通app_首页_H5广告','弹出','{广告标题}'])

1
2
3
4
5

对于具有动态配置的事件均采用上报两次的方式进行

函数设计与调用

公共函数

const umengEvent = function (page, type, label) {
    const inputCode = document.getElementById('appCode')
    const code = (inputCode && inputCode.value) || 'yct';
    const filter = ['hospitalWechat']
    if(filter.indexOf(code) !== -1){
        return
    }
    const trackEvent = {
        'error':'错误',
        'click': '点击',
        'link': '点击跳转',
        'close': '点击关闭',
        'commit': '点击提交',
        'exposure': '弹出',
        'toggle': '点击切换',
        'return': '返回'
    };
    if (page.indexOf('_') === -1
        || typeof (type) !== 'string'
        || trackEvent[type] === undefined
        || (label && typeof (label) !== 'string')
       ) {
        throw new TypeError('友盟数据埋点调用函数失败:参数错误。');
    }
    const category = code + '_' + page;
    const action = trackEvent[type];
    if (label) {
        const text = '{' + label + '}';
        _czc.push(['_trackEvent', category, action]);
        _czc.push(['_trackEvent', category, action, text]);
    } else {
        _czc.push(['_trackEvent', category, action]);
    }
};

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34

埋点数据错误处理

try {
    let subDept = domObj.innerText.replace(/[\n]/, '');
    let name = '${httpParams.branchName}' || '${httpParams.hospitalName}'
    let hosptailName = name + '_' + '科室列表';
    $Y.umengEvent(hosptailName, 'click', subDept);
} catch (error) {
    $Y.umengEvent('选择二级科室','error');
}

1
2
3
4
5
6
7
8

页面埋点情况

挂号流程（示例）

yct_挂号 _选择医院 + 点击 + {医院}
yct_儿童医院 _ 科室列表 + 点击 + {科室}
yct_儿童医院 _ 选择分院 + 点击 + {农林}
yct_儿童医院 _成人科室 + 点击 + {李四}
yct_儿童医院 _成人科室（李四） + 点击 + {确认挂号}
yct_儿童医院 _成人科室（李四） + 返回 + {失败原因}
yct_儿童医院 _成人科室（李四） + 返回 + {失败原因}
yct_儿童医院 _成人科室（满诊医生推荐） + 弹出 + { 查看其他医生 }
yct_儿童医院 _成人科室（满诊医生推荐） + 点击 + { 查看其他医生 }

方案二，适合平台型数据分析，目前未采用

yct_选择医院 + 点击 + {医院}
yct_选择科室 _科室列表 + 点击 + {儿童医院 _成人科室}
yct_选择医生 + 点击 + {儿童医院 _成人科室 _ 李四}

1
2
3
4
5

# 友盟数据前端埋点

# 接入公共函数

# 第一种：接入script标签

# 第二种：异步加载

# 埋点规则定义

# 完整事例

# 函数设计与调用

# 公共函数

# 埋点数据错误处理

# 页面埋点情况

# 挂号流程（示例）