
背景:了解用户行为习惯,从而找出线上平台、推广渠道、企业增长等环节存在的问题,帮助企业发掘高转化率因素,让企业的营销更加精准、有效,提高业务转化率统计用户行为: 用户访问路径、登录用户、内容浏览、自定义事件等功能,使用免费极光功能。
极光统计免费功能:主要使用极光统计模块的页面统计、事件统计(内容浏览、登录、自定义计数)
场景: app和h5混合开发系统
极光免费版使用到的功能如下截图:
1. 页面统计:分为三大块ios、android、H5(web)。
1) ios页面统计集成
2) android页面统计集成
3) web 页面统计集成
页面场景:IOS页面、Android页面、H5页面。
ios页面:在ios端调用“页面流统计 API”接口实现页面统计。
android页面:在android端调用“页面流统计 API”接口实现页面统计。
H5页面:因Web SDK API没有提供“页面统计 API”接口,故需要ios和web端封装页面统计的接口,暴露给H5页面调用,即可实现Web页面统计的功能。
web端调用app点暴露的页面统计API接口在mobile_agent_ext2.js定义如下:
/* eslint-disable */
/*
最后修改日期: 2017年11月10日 09:12:50
使用说明请参考《mobile_agent_使用说明.md》
*/
console.log("start load mobile agent js file: mobile_agent_ext2.js");
const max = 10000000000;
//mobileAgent对象 传输信息到原生
window.mobileAgent = window.mobileAgent || {};
(function (mobileAgent, window) {
var _postMessage = function (action, params, callBack) {
var json = JSON.stringify({
action: action,
params: params,
callBack: callBack,
});
if (
typeof window.mobileAgent != "undefined" &&
typeof window.mobileAgent.postMessage != "undefined"
) {
window.mobileAgent.postMessage(json);
}
if (
typeof window.webkit != "undefined" &&
typeof window.webkit.messageHandlers != "undefined" &&
typeof window.webkit.messageHandlers.iOSAgent != "undefined"
) {
window.webkit.messageHandlers.iOSAgent.postMessage(json);
}
};
/**
* 用户行为:页面访问统计
*/
mobileAgent.analyticsJS = function (param) {
_postMessage("analyticsJS", param);
};
})(window.mobileAgent || {}, window);
H5页面统计接口调用:
在router.js路由afterEach方法中实现页面统计接口调用,简单方便,不用每个页面中取触发页面统计接口。 router.js代码如下:
const routes = [
{
path: "/promoteProjectView", // 推进项目 - V1.3
name: "PromoteProjectView",
meta: {
title: "推进项目",
},
component: () => import("../views/PromoteProjectView.vue"),
},
];
const router = new VueRouter({routes});
router.afterEach((to, from) => {
/**
* 用户行为 - 页面统计 - start
*/
// 上一个页面结束
if (from.meta.title && from.name) {
// title页面名称且不是空页面
from.meta.endTime = Date.now();
window.mobileAgent.analyticsJS({ type: "start", name: from.meta.title });
}
// 当前页面开始
if (to.meta.title) {
// title页面名称
window.mobileAgent.analyticsJS({ type: "stop", name: to.meta.title });
}
/**
* 页面统计 - 页面统计 - end
*/
});
备注:H5页面是切入在webview容器中, H5 > ios(Android) > 极光页面统计
2.内容浏览事件
一、因极光官方提供的Web端集成API接口中没有提供页面统计的接口,故需要App提供一个页面统计的接口,由App跳转到H5页面时,调用页面埋码接口进行页面统计。
(1)在mobile_agent_ext2.js文件中定义app页面统计analyticsJS 接口:
/* eslint-disable */
/*
最后修改日期: 2017年11月10日 09:12:50
使用说明请参考《mobile_agent_使用说明.md》
*/
console.log("start load mobile agent js file: mobile_agent_ext2.js");
const max = 10000000000;
//mobileAgent对象 传输信息到原生
window.mobileAgent = window.mobileAgent || {};
(function (mobileAgent, window) {
var _postMessage = function (action, params, callBack) {
var json = JSON.stringify({
action: action,
params: params,
callBack: callBack,
});
if (
typeof window.mobileAgent != "undefined" &&
typeof window.mobileAgent.postMessage != "undefined"
) {
window.mobileAgent.postMessage(json);
}
if (
typeof window.webkit != "undefined" &&
typeof window.webkit.messageHandlers != "undefined" &&
typeof window.webkit.messageHandlers.iOSAgent != "undefined"
) {
window.webkit.messageHandlers.iOSAgent.postMessage(json);
}
};
/**
* 用户行为:页面访问统计
*/
mobileAgent.analyticsJS = function (param) {
_postMessage("analyticsJS", param);
};
})(window.mobileAgent || {}, window););
H5内容浏览事件配置及调用接口:
window.JAnalyticsInterface.init({
appkey: "xxxxxx", // 极光官网中创建应用后分配的 appkey,必填
debugMode: false, // 设置是否开启 debug 模式。true 则会打印更多的日志信息。设置 false 则只会输出 w、e 级别的日志。
channel: "default-channel", // 渠道名称,默认值为:default-channel
loc: true, //设置是否尝试获取位置信息上报,默认为 true
singlePage: true, //设置是否为单页面,默认为 false
});
在janalytics.js中封装内容浏览事件的公共方法:
/* eslint-disable */
/**
* 最后修改日期: 2022年7月20日
*/
console.log("start load mobile janalytics js file: janalytics.js");
//analyticsJS对象
window.analyticsJS = window.analyticsJS || {};
(function (analyticsJS, window) {
/**
* 浏览事件
* id: 浏览内容 id
* content: 内容名称(非空)
* type:内容类型
* duration:浏览时长,单位秒,最大 86400(1天),超出范围记为 0
* userId: 用户id
* userName: 用户名
*/
analyticsJS.browseOnEvent = function (event) {
let BrowseEvent = window.JAnalyticsInterface.Event.BrowseEvent;
let bEvent = new BrowseEvent(event.id, event.content, event.type, event.duration);
// 用户名
bEvent.addKeyValue("userName", event.userName);
// 用户id
bEvent.addKeyValue("userId", event.userId);
window.JAnalyticsInterface.onEvent(bEvent);
};
/**
* 计数事件
* id: 浏览内容 id
* value: 内容
* userId: 用户id
* userName: 用户名
*/
analyticsJS.countOnEvent = function (event) {
let CountEvent = window.JAnalyticsInterface.Event.CountEvent;
var cEvent = new CountEvent(event.id);
// 用户名
cEvent.addKeyValue("userName", event.userName);
// 用户id
cEvent.addKeyValue("userId", event.userId);
window.JAnalyticsInterface.onEvent(cEvent);
};
/**
* 登录事件
* login_method: 登录方式(非空)
* login_success: 登录是否成功(非空)
* userId: 用户id
* label: 用户名
*/
analyticsJS.loginOnEvent = function (event) {
if(!isPro) ruturn;
var LoginEvent = window.JAnalyticsInterface.Event.LoginEvent;
var lEvent = new LoginEvent(event.login_method, event.login_success);
// 用户名
lEvent.addKeyValue("label", event.userName);
// 用户id
lEvent.addKeyValue("userid", event.userId);
window.JAnalyticsInterface.onEvent(lEvent);
};
})(window.analyticsJS || {}, window);
在main.js全局引入内容浏览的公共方法:
import "./utils/janalytics";
(2)在router.js afterEach钩子函数中,当页面加载完成之后,开始和结束调用页面调用接口进行页面统计:
router配置页面名称,用于页面统计名称:
{
path: "/projectListView", //项目列表
name: "ProjectListView",
meta: {
title: "项目列表",
},
component: () => import("../views/ProjectListView.vue"),
},
router.afterEach((to, from) => {
/**
* 用户行为 - 浏览事件 - start
*/
// 上一个router结束 - 记录页面结束时间
if (from.meta.title && from.name) {
// title页面名称且不是空页面
from.meta.endTime = Date.now();
// 上一个router结束 - 记录浏览记录
let duration = from.meta.endTime - from.meta.startTime;
if (duration > 0) {
duration = Math.ceil(duration / 1000);
}
let param = {
id: from.name,
content: from.meta.title,
type: "页面",
duration: duration || 5, // 浏览时长, 默认5秒
userId: window.currentVue.$store.state.userId,
userName: window.currentVue.$store.state.name,
};
window.analyticsJS.browseOnEvent(param);
}
// 当前router开始 - 记录开始时间
if (to.meta.title) {
// title页面名称
to.meta.startTime = Date.now();
}
/**
* 用户行为 - 浏览事件 - end
*/
/**
* 用户行为 - 页面统计 - start
*/
// 上一个页面结束
if (from.meta.title && from.name) {
// title页面名称且不是空页面
from.meta.endTime = Date.now();
window.mobileAgent.analyticsJS({ type: "start", name: from.meta.title });
}
// 当前页面开始
if (to.meta.title) {
// title页面名称
window.mobileAgent.analyticsJS({ type: "stop", name: to.meta.title });
}
/**
* 页面统计 - 页面统计 - end
*/
});
接口调用成功:
页面统计效果:
事件统计效果图: