Chenjiujiu/sadhus_shence

#神策数据埋点函数声明 @Version v6.1 @Author 苦行僧|2021/12/28 ##6.1

新增自定义添加数据函数参数,第二参数为当前点击匹配到的节点
```
customData function(container,el){return {}}  /!* el为当前匹配节点 *!/
```

##6.0

新增repeat 上报事件，打开页面后，所有匹配到节点，每个节点进行一次上报
新增sync 上报事件，同步执行上报，创建实例后立即进行上报
新增价格计算类型；discount_price/bonus_amount
修改load事件bug，
注意：load 与sync 事件 container为绑定数据的容器，其余事件container为父级或者祖级容器 ##函数调用

基本使用

new sadhus_shence({
debug: true,                  /!* 布尔值，开启debug，会阻止默认事件，默认false *!/
container: "body",            /!* 字符串，父容器选择器".","#"等 必填 *!/
type: "SearchResultClick",    /!* 字符串，目标元素匹配字段字段,ata-sctype的值,默认使用此值做为事件名*!/

深度使用

事件

event:'click', /!* 字符串，触发事件名，默认click *!/

事件上报名

sendType:"SearchResultClick", /!* 字符串，上报事件名称，缺省使用为type值 *!/

设置session

setSessionId:"sessionKey",    /!* 字符串，需要设置的session的id，值为data-scsession的值 *!/

获取session

getSessionId:"sessionKey",    /!* 字符串，需要获取的session的id数据 *!/

额外添加数据

customData function(container){return {}}  /!* 函数，需要额外添加的参数，函数需要返回一个对象 *!/

额外添加session数据

customSession: function(cantainer){return {}},  /!* 函数，需要额外添加的session数据，函数需要返回一个对象 *!/

清除session

delSession:false,  /!* 布尔值，是否需要清除getSessionId项 需配合getSessionId使用*!/

扩展字段

扩展字段，用于支持自定义data-属性的名

typeName: "sctype2",           /!* 字符串，标签标识自定义名，默认data-sctype *!/
dataName: "scdata2",           /!* 字符串，数据存储自定义属性名，默认data-scdata *!/
enableName: "scenable2",       /!* 字符串, 上报事件标志位，默认data-scenable *!/
sessionName: "scsession2",       /!* 字符串, 存储session数据标识，默认data-scssion *!/

回调函数

callback:callback,/!* 函数，数据上报后回调函数 形参数为当前点击匹配节点 *!/

更新函数

updateFn(),   //实例化对象后，有updata函数用于更新所有匹配节点可用性

##节点挂载

节点基本属性

<div class="container">
    <a
     data-scenable="1"   <!--上报可用性-->
     data-sctype="SearchResultClick"   <!--标签标识，默认用于上报事件名-->
     data-csdata='{"键":"值","键2":"值2","键3":"值3"}'  <!--上报数据的json字符串-->
     >这是需要匹配的标签</a>  
</div>

扩展属性

   <div class="container">
    <a
     data-自定义可用性="1"   <!--上报可用性，对应实例化的enableName -->
     data-自定义类型="SearchResultClick"   <!--标签标识，对应实例化的typeName-->
     data-自定义数据='{"键":"值","键2":"值2","键3":"值3"}'  <!--对应实例化的dataName-->
     data-自定义session='{"键":"值","键2":"值2","键3":"值3"}'  <!--对应实例化的sessionName-->
     >这是需要匹配2个时间事件的标签</a>  
</div>

案例

基本挂载

<div class="search-bar">
   <button  type="submit"
      data-scenable="1"
      data-sctype="SearchRequest"
      data-scdata='{"result_number":"{{ search.results_count }}"}'
   >这是一个需要上报的标签</button>
</div>

new sadhus_shence({
   container:".search-bar",
   type:"SearchRequest"
})

有数据不在标签属性上，需要额外增加数据

new sadhus_shence({
   container:".search-bar",
   type:"SearchRequest",
   customData: function(container){/*形参为当前容器dom */
      let newData={};
      let sel=container.querySelector("#search-product-type");
      newData.key_word= container.querySelector(".search-bar__input ").value;
      return newData  /*返回值必须为{}*/
   }
})

不需要提交数据，只需要存储数据

<div class="search-bar">
   <button  type="submit"
      data-scenable="1"
      data-sctype="searchjump"
      data-scsession='{"存储键":"值","存储键2":"值2"}'      
   >这是一个需要上报的标签</button>
</div>

new sadhus_shence({
   container:".search-bar",
   type:"searchjump",
   setSessionId:"sensorsSearchRequesth"
   /*data值为空时，不会提交上报*/
})

需要额外存储session数据

new sadhus_shence({
   container:".search-bar",
   type:"searchjump",
   setSessionId:"sensorsSearchRequesth",
   customSession:function(container){
      let newData={};
      let sel=document.querySelector("#search-product-type");
      newData.key_word= document.querySelector(".search-bar__input ").value;
      newData.key_word_classification=sel.options[sel.selectedIndex].value;
      if(newData.key_word_classification===""){newData.key_word_classification="All categories"}
      return newData;
   }
})

需要获取session数据上报

new sadhus_shence({
   container:".search-bar",
   type:"SearchRequest",
   getSessionId:"sensorsSearchRequesth"
})

页面加载时上报

new sadhus_shence({
 		event:"load",
 		container:".page__content .collection",
 		type:"SearchRequest",
 		getSessionId:"sensorsSearchRequesth",
 		delSession:true /*获取上报完毕后删除session，避免重复提交，默认为false不删除*/
 	})

页面加载时上报,之后数据用于其它上报，进行session转存

new sadhus_shence({
 		event:"load",
 		container:".page__content .collection",
 		type:"SearchRequest",
 		getSessionId:"sensorsSearchRequesth",
   setSessionId: "sensorsSearchResultClick",
 		delSession:true, /*获取上报完毕后删除session，避免重复提交，默认为false不删除*/
   customSession:function (container) {
     let newData={};
     newData=JSON.parse(sessionStorage.getItem('sensorsSearchRequesth'));
     /*获取sensorsSearchRequesth 转存入 sensorsSearchResultClick */
     return newData;
   }
})

单按钮有两个上报事件，使用自定义扩展

<div class="search-bar">
   <button  type="submit"
      data-scenable="1"
      data-sctype="SearchResultClick"
      data-scdata='{"result_number":"{{ search.results_count }}"}'
      data-scenable2='1'
      data-sctyp2="SearchRequest"
      data-scdata2='{"result_number":"{{ forloop.length }}"}'
   >这是一个需要上报2个不同事件的标签</button>
</div>

new sadhus_shence({
   container:".search-bar",
   type:"SearchResultClick"  /*匹配默认属性值上报*/
})   
new sadhus_shence({
   container:".search-bar",
   type:"SearchRequest",
   enableName:"scenable2",
   typeName:"sctype2",
   dataName:"scdata2"  /*匹配自定义值属性上报*/
})

有两个上报，且上报事件名相同

<div class="search-bar">
   <button  type="submit"
      data-scenable="1"
      data-sctype="type1"
      data-scdata='{"result_number":"{{ search.results_count }}"}'
      data-scenable2='1'
      data-sctyp2="type2"
      data-scdata2='{"result_number":"{{ forloop.length }}"}'
   >这是一个需要上报2个不同事件的标签</button>
</div>

new sadhus_shence({
   container:".search-bar",
   type:"type1",  
   sendType:"SearchRequest"
})   
new sadhus_shence({
   container:".search-bar",
   type:"type2",  
   sendType:"SearchRequest",
   enableName:"scenable2",
   typeName:"sctype2",
   dataName:"scdata2"  /*匹配自定义值属性上报*/
})

上报一次后停止上报，输入框更新后，重新允许上报

<div class="search-bar">
 <input type="text" class="username">
 <button  type="submit"
    data-scenable="1"
    data-sctype="SearchRequest"
    data-scdata='{"result_number":"{{ search.results_count }}"}'
 >这是一个需要上报的标签</button>
</div>

let login=new sadhus_shence({
             container:".search-bar",
             type:"SearchRequest"
           })
document.querySelector('.search-bar>input').addEventListener('change',login.updateFn)

Chenjiujiu / sadhus_shence

案例

About

Languages