本客服平台由提供产品服务

JS集成开发指南

诸葛君发表于:2015年11月10日 14:47:54更新于:2017年07月24日 10:16:27

1.安装诸葛SDK

在每个页面的<head></head>标签中,嵌入下面代码,即可完成SDK的安装:

注意:一个页面只可引入一个js文件,且只能有一个appkey。

<script type="text/javascript">
  (function(){
    window.zhuge = window.zhuge || [];
    window.zhuge.methods = "_init identify track getDid getSid getKey setSuperProperty setUserProperties setPlatform".split(" ");
    window.zhuge.factory = function(b) {
        return function() {
            var a = Array.prototype.slice.call(arguments);
            a.unshift(b);
            window.zhuge.push(a);
            return window.zhuge;
        }
    };
    for (var i = 0; i < window.zhuge.methods.length; i++) {
        var key = window.zhuge.methods[i];
        window.zhuge[key] = window.zhuge.factory(key);
    }
    window.zhuge.load = function(b, x) {
        if (!document.getElementById("zhuge-js")) {
            var a = document.createElement("script");
            var verDate = new Date();
            var verStr = verDate.getFullYear().toString()
                + verDate.getMonth().toString() + verDate.getDate().toString();

            a.type = "text/javascript";
            a.id = "zhuge-js";
            a.async = !0;
            a.src = (location.protocol == 'http:' ? "http://sdk.zhugeio.com/zhuge.min.js?v=" : 'https://zgsdk.zhugeio.com/zhuge.min.js?v=') + verStr;
             a.onerror = function(){  
             window.zhuge.identify = window.zhuge.track = function(ename, props, callback){                   
               if(callback && Object.prototype.toString.call(callback) === '[object Function]')callback();               
                };     
            };
            var c = document.getElementsByTagName("script")[0];
            c.parentNode.insertBefore(a, c);
            window.zhuge._init(b, x)
        }
    };
            window.zhuge.load('此处填写您在诸葛申请的APP KEY', {
                superProperty: {//全局的事件属性(选填)               
                   '应用名称': '诸葛io'           
                },           
                autoTrack: false, //启用全埋点采集(选填,默认false) 
                visualizer: false, //启用可视化埋点(选填,默认false)           
                singlePage: false //是否是单页面应用(SPA),启用autoTrack后生效(选填,默认false)       
           });
  })(); 
</script>

2.识别用户

为了保持对用户的跟踪,你需要为他们记录一个识别码,你可以使用用户id、email等唯一值:

zhuge.identify('0202033');

你也可以记录用户的更多信息,以便更详细的了解你的用户(推荐):

zhuge.identify('0202033', {
    name:  '张三',   //预定义属性
    avatar:  '头像地址',  //预定义属性
    '行业' :  '互联⽹网'    //⾃自定义属性 
 });

name和avatar属性为预定义属性,如果需要上传⽤用户名或头像,请确保属性名⽆无误 事件类型的属性建议以时间戳的形式上传 。

    通常identify打点是在用户登录或者注册操作时进行,当用户登录或注册后,通常我们会跳转到其它页面:首页\个人中心等等,这种时候如果页面跳转,identify请求可能会出现被浏览器中断而无法完成的情况,那么该用户的后续行为就会被统计为匿名用户行为。 

    为了避免这种情况发生,诸葛建议增加回调函数避免这种请求失败的情况。 用户常用的打点方式为:

zhuge.identify('0202033', {
    name:  '张三',   //预定义属性
    gender:  '男',  //预定义属性
    '行业' :  '互联网'    //自定义属性
});
location.href = 'http://www.xxx.com/index.html';

    这种情况identify调用之后立马进行页面跳转操作,页面操作时,由于大多数浏览器现有机制原因,可能会取消请求造成identify请求失败。 针对上诉的情况诸葛推荐的打点方式(此方法只针对当前页面跳转的方式):

zhuge.identify('0202033',{
    name:  '张三',   //预定义属性
    gender:  '男',  //预定义属性
    '行业' :  '互联网'    //自定义属性
}, function(){
    location.href = 'http://www.xxx.com/index.html';//执行用户标识成功后的代码,比如跳转页面
});

说明:用户属性如果为空可以不传。

3.记录事件

你可以在任意位置记录用户行为:

zhuge.track('购买手机');   //事件名称不能超过20个字符

也可以通过属性以记录更多的行为信息:

zhuge.track('购买手机', {
    '手机' : '小米4',
    '价格' : 1799,
    '运营商' : '移动'});   //属性名称不能超过255个字符,属性值不能超过200个字符

关于事件的打点时机诸葛有以下3点建议:

 1)尽量在目标页面进行打点,事件属性可以通过url传参形式传递到目标页面。

 2)无法在目标页面打点的情况下,使用track的回调函数,在回调函数中进行页面跳转。

zhuge.track('eventName', {
    'prop1': '这是自定义属性'//事件自定义属性
}, function(){
    location.href = 'http://www.xxx.com/b.html';//执行打点的后续操作,如页面跳转
});

3)如果是给页面的某些超链接布点,不同链接需要传递不同的参数,并且需要做到不破坏SEO友好(这里以jQuery语法为例)。

$(".menu-item").click(function(){
    var link = $(this);
    zhuge.track('菜单导航', {
        'menuName': link.text()
    }, function(){
        location.href = link.attr('href'); //继续跳转到目标页面
    });
    return false;
});

说明:事件属性如果为空可以不传。

4.实时调试

你可以使用实时调试功能实时看到所有的操作信息,以辅助开发者确认打点是否正确。(实时调试过程中的数据仅用于调试,不影响正式数据,调试完成后请关闭debug) 调用zhuge.load()时,加入debug参数,以开启实时调试:

window.zhuge.load('Your App Key', {debug:true});

5.设置事件通用属性

事件通用属性

zhuge.setSuperProperty({
  '属性名': '属性值'
});

若有一些属性对于您来说,每一个事件都要拥有,那么您可以调用setSuperProperty将它传入。

自定义环境信息

zhuge.setPlatform({
   '属性名': '属性值'
 })

诸葛默认展示的信息中包含一些环境信息,比如操作系统、分辨率等,若您希望在展示时展示一些额外的环境信息,那么可以调用setPlatform传入,我们会将这些信息添加在环境信息中。

6.其他可选API

您可以通过getDid接口来获取当前设备在诸葛体系下的设备标识。

var did = zhuge.getDid();

您可以通过getSid接口来获得当前的会话ID。

var sid = zhuge.getSid();

您可以通过getKey接口来获得当前的appKey。

var appKey = zhuge.getKey();

您可以通过setUserProperties接口来设置用户属性。

zhuge.setUserProperties({ 
  '属性名': '属性值'
  });



    您需要登录后才可以回复