Radar Analytics JS SDK:exposure 集成文档(2022.03.30)

元素曝光pv打点插件

本功能是基于radar-analytic-js-sdk的插件功能实现的。每次页面展示的元素，需要某个元素曝光后，获取元素属性的数据功能。该功能使用插件方式集成。集成步骤如下：

1、集成第三方库IntersectionObserver。w3c官方提供了polyfill，兼容了主流浏览器版本。

npm install intersection-observer --save-dev

2、集成插件

npm i radar-analytic-js-exposure

或

<script src="https://s3.ssl.qhres2.com/!a1ad9a60/radar-analytic-js-exposure.umd.js"></script>

3、初始化插件

var expose = RADAR_MONITOR.use('exposure', '');

expose是插件对象， 用来调用实例化方法。

4、注册曝光元素

expose.observe(element);

5、配置元素上报事件名称

设置自定义属性：bk-expose

事例如下：

<div class="container">
    <div id="bk1000" bk-expose="商品1">第一件商品</div>
    <div id="bk1000" bk-expose="商品2">第二件商品</div>
</div>
<div class="container" >
    <div>
        <div bk-expose="商品3">第三件商品</div>
        <div bk-expose="商品4">第四件商品</div>
    </div>
</div>

js-classname实现获取元素方式

var elements = document.getElementsByClassName('container');
console.log("注册元素：",elements);
for (const el in elements) {
    if (Object.hasOwnProperty.call(elements, el)) {
        const element = elements[el];
        expose.observe(element);
    }
}

或者使用document.getElementById来获取元素。