【极光统计】极光和H5(Web)混合开发实现用户行为统计集成

发布于：2023-02-08 ⋅ 阅读:(28) ⋅ 点赞:(0)

背景：了解用户行为习惯，从而找出线上平台、推广渠道、企业增长等环节存在的问题，帮助企业发掘高转化率因素，让企业的营销更加精准、有效，提高业务转化率统计用户行为: 用户访问路径、登录用户、内容浏览、自定义事件等功能，使用免费极光功能。

极光统计免费功能：主要使用极光统计模块的页面统计、事件统计（内容浏览、登录、自定义计数）

场景: app和h5混合开发系统

极光免费版使用到的功能如下截图：

 1. 页面统计：分为三大块ios、android、H5（web）。

1) ios页面统计集成

极光统计 ios SDK 集成指南

2) android页面统计集成

极光统计 Android SDK 集成指南

3) web 页面统计集成

极光统计 web SDK 集成指南

页面场景：IOS页面、Android页面、H5页面。

ios页面：在ios端调用“页面流统计 API”接口实现页面统计。 

参考链接：ios页面流统计 API接口

 android页面：在android端调用“页面流统计 API”接口实现页面统计。 

参考链接：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
   */
});

接口调用成功：

页面统计效果：

事件统计效果图：

网站公告

欢迎关注微信公众号 关注公众号领取新人福利

今日签到

点亮在社区的每一天
去签到

热门文章

最新发布