Web SDK 集成

1. 安装诸葛SDK

在每个页面的<head>和</head>标签中，嵌入下面代码，完成SDK的安装。

注意：一个页面只可引入一个js文件，且只能有一个App key。

<script type = "text/javascript">
  (function() {
    if (window.zhuge) return;
    window.zhuge = [];
    window.zhuge.methods = "_init identify track trackRevenue 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 = '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('002714230c264ddda7d94375a4d23e40', { //配置应用的AppKey
      superProperty: { //全局的事件属性(选填)
        '应用名称': '诸葛io'
      },
       adTrack:false,     //广告监测开关，默认为false
        autoTrack: false, //启用全埋点采集（选填，默认false）   
        singlePage: false //是否是单页面应用（SPA），启用autoTrack后生效（选填，默认false）,
        duration: false //页面停留时长采集开关，默认为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请求失败。因此，推荐在identify的回调中执行页面跳转（此方法只针对当前页面跳转的方式），具体打点方式如下：

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

3. 自定义事件

在你希望记录用户行为的位置，自定义事件，调用如下代码：

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

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

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

注意：

在添加事件时，如果事件名称为中文，当用户浏览器编码有问题时，事件会在自动生成时变成乱码；在分析平台中即会显示有乱码事件，又会显示原事件；建议事件名称使用英文；
在添加事件属性时，需注意事件属性类型。如果事件属性类型为「数值型属性」，需要在上传数据时修改数据类型为「数值型」，并且在诸葛io后台埋点管理中修改为「数值型」；
事件属性如果为空，可以不传。

建议：

关于事件的埋点时机有以下建议：

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

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

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

如果是给页面的某些超链接布点，不同链接需要传递不同的参数，并且需要做到不破坏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传入。

6. 设置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参数（设置几个覆盖几个，没有设置的不覆盖）。

7. 关联微信公众号用户

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

具体使用方法如下：

zhuge.setWxProperties(appID,  openID)

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

8. 收入数据采集

收入数据采集，需调用trackRevenue函数，自动记录收入事件以及事件属性；price(商品价格)、productID(商品ID)、productQuantity(商品数量)、revenueType(收入类型)为收入事件内置属性，必传项。

具体使用方法如下：

zhuge.trackRevenue({
   'price': 229,
   'productID':'小米NFC手环',
   'productQuantity':2,
   'revenueType':'手环'
});

9. 页面停留时长采集

停留时长默认不采集，如需采集，需要在load方法时，打开duration开关，代码示例如下：

duration: false // 页面停留时长采集，默认false

采集的页面停留时长单位为毫秒，打开页面到离开页面，即视为一次页面停留，时间差即为「页面停留时长」。

10. 元素曝光采集

用户使用约定的规则标记元素，元素由不可见变为可见时（页面滚动，显示隐藏）sdk会自动采集配置在元素上的自定义事件名称和事件属性，会以自定义事件的方式采上传数据。

将sdk配置exposure设置为true，在DOM元素中增加zhuge-expo-track类名，使用data-expo-xxx="yyy"的形式设置自定义事件名称和事件属性，其中data-expo-name="evt"会被识别为事件名其他标记会识别为事件属性。

zhuge.load('test-appkey', {
  exposure: true
})

<view 
  class="zhuge-expo-track" 
  data-expo-name="首页banner曝光" // 事件名称 “首页banner曝光”
  data-expo-pos="页头" // 事件属性 pos: "页头"
  data-expo-type="商品" // 事件属性 type: "商品"
>
  xxxx
</view>

11. 其他可选API

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

var did = zhuge.getDid();

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

var sid = zhuge.getSid();

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

var appKey = zhuge.getKey();

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

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

Web SDK 集成

Web SDK 集成

1. 安装诸葛SDK

2. 识别用户

3. 自定义事件

4. 实时调试

5. 设置事件通用属性

6. 设置UTM参数

7. 关联微信公众号用户

8. 收入数据采集

9. 页面停留时长采集

10. 元素曝光采集

11. 其他可选API

results matching ""

No results matching ""