JS集成开发指南

如需集成DeepShare,请参考DeepShare JS 集成文档补充集成DeepShare内容。

一、安装诸葛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 setWxProperties 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();
                            } else if (Object.prototype.toString.call(props) === '[object Function]') {
                props();
                        }
                };
            };
            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)            
        singlePage: false //是否是单页面应用(SPA),启用autoTrack后生效(选填,默认false)       
    });
})(); 
</script>

二、识别用户

为了保持对用户的跟踪,你需要为他们记录一个识别码,你可以使用用户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'; //执行用户标识成功后的代码,比如跳转页面
});

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

三、记录事件

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

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

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

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

注意:在添加事件属性时,需注意事件属性类型。如果事件属性类型为「数值型属性」,需要在上传数据时修改数据类型为「数值型」,并且在诸葛io后台埋点管理中修改为「数值型」。

关于事件的打点时机诸葛有以下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;
});

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

四、实时调试

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

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

五、设置事件通用属性

事件通用属性

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

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

六、设置UTM参数

您可以在window.zhuge.load()方法中添加自定义UTM参数,通过UTM参数来跟踪访问你网站的流量来自于哪些渠道、哪些媒介等。

UTM参数信息具体请参照UTM参数标识流量

具体使用方法如下:

 window.zhuge.load('Your App Key',{
         utm: {"utm_source":"baidu",         //广告来源
               "utm_medium":"cpc",           //广告媒介
               "utm_term":"datadriven",      //广告关键字
               "utm_content":"a",            //广告内容
               "utm_campaign":"doublescore"  //广告名称
               }
            });

说明:每次可以通过此方法设置UTM的5个参数中的1个或多个,自定义设置的UTM参数会覆盖掉SDK默认从URL中解析获取的UTM参数(设置几个覆盖几个,没有设置的不覆盖)。

七、关联微信公众号用户

你可以上传微信公众号appID和对应用户的openID,关联诸葛io用户。

具体使用方法如下:

zhuge.setWxProperties(appID,  openID)

上传后,可用于智能触达通过微信渠道对微信公众号用户进行触达。

八、其他可选API

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

var did = zhuge.getDid();

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

var sid = zhuge.getSid();

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

var appKey = zhuge.getKey();

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

zhuge.setUserProperties({
    '属性名': '属性值'
});
©zhugeio.com 京ICP备15049545号           文档更新时间 2018-07-12 19:20:12

results matching ""

    No results matching ""