半自动埋点浏览

简介（gioImpressionTracking）

用户标记一个元素并提供埋点事件，SDK 负责监控指定元素，当此元素出现在屏幕可视区域中时发送用户配置的埋点事件。因此您同样需要参考埋点事件在平台上进行事件类型和变量的预定义。

曝光逻辑

always：只要从屏幕不可见区域到可见区域即可计为一次曝光并上报。(默认值)

once：从屏幕不可见区域到可见区域曝光只上报一次。

浏览器兼容性

InternetExplorer	Edge	Firefox	Chrome	Safari	Opera
No	Edge >= 16	>= 55	>= 58	>= 12.1	>= 45

集成

全量集成SDK时无需再次集成此插件。

1、引入

CDN集成引入

<script src="https://assets.giocdn.com/sdk/webjs/cdp/plugins/gioImpressionTracking.js"></script>

npm集成引入

import gioImpressionTracking from "gio-webjs-sdk-cdp/plugins/gioImpressionTracking"

2、注册

gdp('registerPlugins', [gioImpressionTracking]);
gdp('init', xxxx);

使用方法

传值方式一：使用Object对象或JSON字符串赋值（推荐）

在节点上添加 data-gio-imp-track、data-gio-imp-attrs、data-gio-imp-items 属性，并分别对应 track 方法中的三个参数进行设置，参数规则参考埋点事件。传值时赋值一个Object对象或一个JSON字符串。

var impAttrs = JSON.stringify({ type: 'hjh', name: 'yue' });
var impItems = { key: 'order_id', id: '12345' };

<div
  data-gio-imp-track="imp_picture_var"
  data-gio-imp-attrs={impAttrs}
  data-gio-imp-items={impItems}
>
  监听的元素，必须有内容或额外样式来让节点有实际大小
</div>

传值方式二：直接手动编写Object字符串

在节点上添加 data-gio-imp-track、data-gio-imp-attrs、data-gio-imp-items 属性，并分别对应 track 方法中的三个参数进行设置，参数规则参考埋点事件。传值时赋值一个合法拼接的JSON字符串。

var key = 'order_id';
var id = '12345';

<div
  data-gio-imp-track="imp_picture_var"
  data-gio-imp-attrs={`{ "type": "hjh", "name": "yue" }`}
  data-gio-imp-items={`{ "key": "` + ${key} + `", "id": "` + ${id} + `" }`}
>
  监听的元素，必须有内容或额外样式来让节点有实际大小
</div>

以上两种方式对应产生的CUSTOM事件相当于： ↓↓↓

gdp('track', 'imp_picture_var', { type: 'hjh', name: 'yue' }, { key: 'order_id', id: '12345' });

传值方式三：单个字段定义

在节点上添加 data-gio-imp-track、data-gio-track-xxxxx 属性。分别对properties属性进行单个定义传值。

<div
  data-gio-imp-track="imp_cat_var"
  data-gio-track-name="cat_picture"
  data-gio-track-time="20210601"
>
  监听的元素，必须有内容或额外样式来让节点有实际大小
</div>

对应产生的CUSTOM事件相当于： ↓↓↓

gdp('track', 'imp_cat_var', { name: 'cat_picture', time: '20210601' });

注意：该传值方式所有单个字段都会归入properties对象中，不支持items属性上报。

修改曝光类型

如果您的曝光事件只需要统计一次或触发过于频繁导致曝光事件量过大，可以在节点上添加data-gio-imp-type="once"并设置唯一的节点id，来使得曝光逻辑变为单次上报。

<div
  id="imp_1"
  data-gio-imp-type="once"
  data-gio-imp-track="imp_picture_var"
  ...
>
  监听的元素，必须有内容或额外样式来让节点有实际大小
</div>

手动更新半自动埋点监听

当您需要添加半自动埋点的节点是动态渲染时（例如根据接口数据渲染不同的内容），SDK 可能会因为无法感知节点渲染时机而失去对标记节点的监听。此时，您需要调用 updateImpression 手动更新 SDK 的监听来保证您的动态渲染节点能够被监听到。

示例

// 这里通过一个Promise来模拟调用接口
const getData = new Promise((resolve) => {
  setTimeout(() => {
    resolve({ name: 'Lily', age: 18 });
  }, 3000);
});
getData.then((result) => {
  setData({ impData: result });
  // setData触发渲染后再调用 updateImpression 即可
  gdp('updateImpression');
});

注意

1、data-gio-imp-attrs 和 data-gio-imp-items 允许接受一个Object或者JSON.stringify后的Object字符串，SDK会自动尝试进行格式化，格式化失败时默认返回空对象。

2、被标记的节点必须有实际的大小，一个没有内容和样式的节点标记可能不会触发事件。

3、请勿在同一页面中大量标记半自动埋点浏览事件（如商品列表），可能会严重影响页面性能导致卡顿。