sa-sdk-javascript 神策页面加载的时候未进行埋点

最新推荐文章于 2025-06-29 09:06:44 发布

原创最新推荐文章于 2025-06-29 09:06:44 发布 · 2.7k 阅读

2 ·

CC 4.0 BY-SA版权

文章标签：

#vue #nuxt #sa-sdk-js #埋点 #Sensors Data

工具类专栏收录该内容

26 篇文章

订阅专栏

本文探讨了在页面加载过程中实现埋点的方法，通过不断检查sensors加载状态，确保页面完全加载后再执行埋点，避免因加载失败导致的数据丢失。同时，介绍了SDK封装技巧，包括初始化、用户登录、自动跟踪等功能。

页面加载时需要埋点但未实现，断点发现sensors未加载成功，故封装方法不停判断，直到页面加载好这个方法再进行埋点

 // 埋点方法
        doTrack(name, data) {
          let time = ''
          let fn = () => {
            if (!window.sensors || !window.sensors.track) {// 如果没有这个方法就每10秒调用一次
              clearTimeout(time)
              time = window.setTimeout(fn, 10)
            } else {
              window.sensors.track(name, data)
            }
          }
          time = window.setTimeout(fn, 10)
        },

使用

this.doTrack('NavigationPagePV', {
                    UrlPlatform: 'PC',
                    NavigationPage: '上届获奖作品页',
                    Channel: Channel,
                })

sdk封装

import sensors from'sa-sdk-javascript';

sensors.init({
    server_url: !/kuaikanmanhua.com/.test(location.href) ? 'https://sa.kkmh.com/sa?project=kuaikan_test':'https://sa.kkmh.com/sa?project=default',//?project=default
    show_log:!/kuaikanmanhua.com/.test(location.href) ? true : false, //线上环境禁止输出埋点信息
    heatmap: {      
        //是否开启点击图，默认 default 表示开启，自动采集 $WebClick 事件，可以设置 'not_collect' 表示关闭
        clickmap:'default',
        //是否开启触达注意力图，默认 default 表示开启，自动采集 $WebStay 事件，可以设置 'not_collect' 表示关闭
        scroll_notice_map:'not_collect',
        //设置多少毫秒后开始渲染点击图,因为刚打开页面时候页面有些元素还没加载
        loadTimeout:  3000,
        //show_log:false
        //用户点击（a，button，input）这些元素时会触发这个函数，让你来判断是否要采集当前这个元素，返回真表示采集，返回假表示不采集。
        //不设置这个函数，默认是采集 a button input 这些标签。
        //   collect_element: function(element_target){
        //     // 如果这个元素有属性sensors-disable=true时候，不采集
        //     if(element_target.getAttribute('sensors-disable') === 'true'){
        //         return false;
        //     }else{
        //         return true;
        //     }
        // },
    },
    debug_mode:!/kuaikanmanhua.com/.test(location.href) ? true : false, //线上环境是图片上报信息,测试环境使用ajax上传数据
});


var sdkTime;
function initTime (){
    window.clearTimeout(sdkTime);
    //测试环境禁用 alert
    if( !/kuaikanmanhua.com/.test(location.href) ){
         window.alert=(...ary)=>{return ary};
    }
   
    let user_ids;
    if(window.user_ids != 'undefined' && window.user_ids != '0'){
        user_ids = window.user_ids;
    }
    if(user_ids){
        sensors.login(user_ids);
    }
    window.sensors = sensors;
    let distinct_id = sensors.store.getDistinctId().replace(/\s*/g,"");
    if(!distinct_id){ // distinct_id==''的情况下 说明是退出登录状态
        sensors.logout(true);
    }
    sensors.quick('autoTrack', {
      platForm:'pc'
    });
}
sdkTime = window.setTimeout(initTime,100);

// window.addEventListener

// sensors.login(user_id);
// sensors.quick('autoTrack');