1. 开启全埋点

1.1 代码示例

<script src="./hina.min.js"></script>
<script>
// 创建 SDK 全局对象
 const hina = window['hinaDataStatistic'];
 // 用配置对象初始化 SDK
 hina.init({
     serverUrl: '数据接收地址',
     showLog : true,
     sendType: 'ajax',
     //单页面配置，默认开启，若页面中有锚点设计，需要将该配置删除，否则触发锚点会多触发 H_pageview 事件
     isSinglePage: true,
     autoTrackConfig: {
         // 是否开启自动点击采集, true表示开启，自动采集 H_WebClick 事件
         clickAutoTrack: true,
        // 是否开启页面停留采集, true表示开启，自动采集 H_WebStay 事件
         stayAutoTrack: true,
         // 是否开启页面浏览采集，auto 表示开启，singlePage 表示单页面开启，false 关闭，可配合手动开启使用
         // 若页面中有锚点设计，需要将该配置设为 false，否则触发锚点会多触发 H_pageview 事件
         pageviewAutoTrack：'singlePage',
         //  是否开启页面离开采集，true 表示开启，具体配置查看插件集成
         pageLeaveAutoTrack: true
    },
 });
</script>

Web SDK全埋点包括三种事件：Web页面浏览、Web元素点击、Web视区停留。如果需要针对全埋点类型进行单独配置，可以参考下面单个全埋点类型使用的文档

1.2 Web页面浏览(H_pageview)

1.2.1 自动模式

配置参数 isSinglePage，默认值为 false ，表示是否开启自动采集 web 页面浏览事件 H_pageview 的功能

autoTrackConfig: {
     // 是否开启页面浏览采集，auto 表示开启，singlePage 表示单页面开启，false 关闭，可配合手动开启使用
     // 若页面中有锚点设计，需要将该配置设为 false，否则触发锚点会多触发 H_pageview 事件
     pageviewAutoTrack：'singlePage',
},

1.2.2 手动模式

在页面切换的时候，手动调用 hn.quick(‘autoTrackSinglePage’) 来采集 web 页面浏览事件 H_pageview ，这个方法在页面 url 切换后调用

//在react中的全局onUpdate里调用
onUpdate(){
    hn.quick('autoTrackSinglePage');
}

//在vue路由切换时调用
router.afterEach(() => {
    hn.quick("autoTrackSinglePage");
});

1.3 Web元素点击(H_WebClick)

// SDK初始化参数配置
autoTrackConfig: {
    //是否开启触达图，true表示开启，自动采集H_WebClick事件
    //默认只有点击 a input button textarea 四种元素时，才会触发该事件
    clickAutoTrack: true
}

1.4 视区停留(H_WebStay)

// SDK初始化参数配置
autoTrackConfig: {
    //是否开启触达图，true表示开启，自动采集H_WebStay事件
    stayAutoTrack: true
}

2.其他元素类型的元素点击事件采集

2.1. 支持 div 元素的自动采集

在原来的全埋点（采集 a、button、input 、textarea 标签）基础上新增对 div 标签的采集，采集规则为：

1.div 为子结点（无子元素）时采集 div 的点击；

2.div 中有且只有样式标签（[‘mark’,’strong’,’b’,’em’,’i’,’u’,’abbr’,’ins’,’del’,’s’,’sup’]）时，点击 div 或者样式标签都采集 div 的点击。

collectTags：配置是否开启 div 的全埋点采集，默认不采集。

autoTrackConfig: {
      collectTags: {
        div: true
      },
    },

2.2. 支持任意类型元素的自动采集

通过 collectTags 配置是否开启其他任意元素的全埋点采集（默认不采集）。

autoTrackConfig: {
      collectTags: {
        div: {
            maxLevel: 1, // 默认是 1，即只支持子div，可配置范围是 [1, 2, 3],非该范围配置值，会被当作 1 处理。
        },
        li: true,
        span: true,
        img: true,
        // 其他标签
        ...
      },
    },

2.3. 配置特殊属性来支持其他类型元素的自动采集

2.3.1.配置特殊属性

开启全埋点时，给需要自动采集点击事件的元素增加属性：hn-click。

<span hn-click>测试元素</span>

2.3.2.配置页面元素点击的自定义属性

开启全埋点时，支持配置带有指定属性的页面元素点击，自动采集点击事件。

  autoTrackConfig: {
    trackAttr: ['c-click','data-prop'],
  }

  ————————————
  <span c-click>测试元素</span>
  <div data-prop>测试元素</div>

3. 全埋点相关参数配置

3.1 Web视区停留

stayAutoTrackConfig相关参数

autoTrackConfig相关参数，提供对于H_WebStay事件的自定义设置处理

stayAutoTrackConfig: {
    isCollectUrl: function(){
        //如果页面地址为xxx.com/index  以下配置返回true时表示只才采集首页地址
        if(location.href == 'xxx.com/index'){
            return true;
        }
        return false;
    }
},
autoTrackConfig: {
    stayAutoTrack: true,
    stayDelayTime: 4000,
    maxStayPageDuration: 18000
}

3.2 点击事件的自定义设置和处理