跳到主要内容

埋点集成

魔方系统有自身一套埋点上报规范，在出码配置中，可按需选择是否集成这套埋点规范。如果，在明确魔方埋点规范无法满足业务需要时，可将其进行卸载，并自行实现埋点上报。

卸载​

当选择卸载时，出码产物中的埋点 SDK 脚本会被卸载，PV、事件点位相关代码会通过 AST 被自动清洗。

集成​

当埋点功能被集成，会自动进行埋点 SDK 的引入，并执行页面 PV 和点位事件的上报逻辑。

SDK 引入​

首先，会在出码项目工程中的 HTML 文件中引入埋点脚本，如下：

<html>
  <head>
    <!-- 关闭主动上报 -->
    <script>
      window._trackPVTrigger = true;
    </script>
    <!-- 埋点脚本注入 -->
    <script src="https://x.autoimg.cn/bi/mda/ahas_head.min.js" defer></script>
  </head>
  <body>
    <!-- 埋点脚本注入 -->
    <script src="https://x.autoimg.cn/bi/mda/ahas_body.min.js"></script>
  </body>
<html>

PV上报​

// ... other code
const pvTrack = {
  site,                     // 一级栏目
  category,                 // 二级栏目
  subcategory,              // 三级栏目
  pageVars: {
    topicid: topicId,       // 专题ID
    topicname: topicName,   // 专题名称
    biz,                    // 业务线
    bizsub: bizSub,         // 产品线
  },
};
window.trackPageView(pvTrack);
// ... other code

默认情况下，会将魔方后台配置的一级栏目、二级栏目和三级栏目上报；扩展参数中，会自动携带当前出码专题的专题ID、专题名称、业务线、产品线。

事件上报​

事件上报包含点击事件和曝光事件的上报，项目中内置了埋点工具 - Tracker（utils/tracker.ts），可实现埋点点位的捕获、监听及上报。

事件点位​

业务代码中相关事件点位都是通过 data-track-** 属性声明并挂载，可直接作用到节点上，目前有两种点位类型：data-track-show 和 data-track-click。

通用字段​

魔方系统内部对事件上报的通用字段进行了封装，在进行预埋点位的时候，可以忽略通用字段的声明。

通用常规字段

字段说明
actionmofang_card_show | mofang_card_click

通用扩展参数字段

字段说明
topicid当前卡所属专题 ID
name当前卡所属专题名称
id当前卡片ID
order当前卡片的位置
module当前卡片的名称
biz当前卡片所属业务线
bizsub当前卡片所属产品线
city当前城市ID
deviceid当前用户的设备ID
sessionid当前用户的会话ID
示例​

比如下面这个例子，为一个节点添加曝光监听。

<div               
  data-track-show={JSON.stringify({
    action: 'auto_sharepage_show',
    ext: {
      e_ids: confData.data.callAppObj.e_ids,
      e_share: confData.data.callAppObj.e_share,
      e_position: confData.data.callAppObj.e_position,
    },
  })}
>
    演示节点
</div>

事件上报​

事件点位预埋之后，曝光行为检测和点击事件监听会统一被处理，会在对应的时机（点击/曝光）时，自动执行埋点数据上报。开发者无需实现行为监听，只需预埋点位即可。