5.6 JS SDK 接入说明

优质

小牛编辑

126浏览

2023-12-01

1. 添加通加代码

通加代码是及策 Web 监测的基础代码，需要添加到每个网站的公共域中(</head>之前)，以便每次每个页面都可以被引用。该代码为异步加载方式，不会影响网站的加载速度。

具体代码如下：

<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>

其中 APPID 为及策系统分配的应用ID，需要在及策系统中创建好应用后获取，如图中所示：

2. 监测自定义事件

Web 上任何一个按钮的互动、页面的浏览、表单的提交等都可以定义为一个事件。而对于事件的监测可以通过以下方式进行：

//有事件属性和回调处理
_jcq.push(['_track', eventname, {
  label1: "value",
  label2: "value",
  ...,
  ...,
  ...
}, function(error) {
  /** 数据发送成功回调函数 */
}]);

//没有事件属性 
_jcq.push(['_track', eventname]);

注意:

自定义事件代码可以通过在及策系统后台配置后导出使用：

常见场景1：页面监测

_jcq.push(['_pageview']);

如果需要监测每个页面，则直接将该部分内容添加到通加代码中，形如：

<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_pageview']); //自动监测页面

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>

常见场景2：登录监测

_jcq.push(['_track', "login"]);

常见场景3：立即购买

在用户点击立即购买的时候调用:

_jcq.push(['_track', 'buyNow, {
  pName: 'iPhone 7 亮黑色 128G', //商品名称   
  pNum: 1,   //商品数量   
  pPrice: 999.00  //商品价格    
}])

常见场景4：提交订单

在用户点击提交订单的时候调用:

_jcq.push(['_track','submitOrder', {
  pName: 'iPhone 7 亮黑色 128G', //商品名称   
  pNum: 2,   //商品数量   
  pPrice: '999.00'  //商品价格    
}])

常见场景5：立即支付

在用户点击立即支付的时候调用:

_jcq.push(['_track','payNow', {
  pName: 'iPhone 7 亮黑色 128G', //商品名称   
  pNum: 2,   //商品数量   
  pPrice: '899.00',  //商品价格  
  pCoupons: '100.00', //优惠金额
  orderId: '1352543435' //订单ID
}])

常见场景6：支付成功

在用户支付成功后调用:

_jcq.push(['_track','paySuccess', {
  pName: 'iPhone 7 亮黑色 128G', //商品名称   
  pNum: 2,   //商品数量   
  pPrice: '899.00',  //商品价格  
  pCoupons: '100.00', //优惠金额
  orderId: '1352543435' //订单ID
})

3.用户信息配置接口

及策作为用户分析运营工具，为了更高效的对用户进行多维分析和运营，因此建议将用户信息回传到该系统中来，具体可以通过以下方式进行实现：

_jcq.push(['_profile', {
  userid: "123456",
  name: "jice",
gender: "male"
   age: 36,
 email: "jice@admaster.com.cn"
}]);

注：

该方法建议在用户登录成功的时候调用和在用户更新用户信息的时候调用；
用户属性代码可以通过在及策系统后台配置后导出使用，如下图

4.用户信息绑定接口

如果网站有设置用户登录或者注册，则可以在用户登录成功之后调用以下接口，回传用户ID，则可以将用户的所有互动行为和账号关联分析。如果用户切换账号，则重新调用该接口，设置新用户即可，切换前后两个账号信息都会独立记录为两个用户。

_jcq.push(['_identify','UID']); //UID 可以是ID、邮箱、手机号等；

当用户登录或者注册后需先调用用户信息配置接口，然后再调用该接口，以便用户后续的所有互动行为都可以与该用户绑定，示例代码如下：

_jcq.push(['_profile', {
  userid: "123456",  
  name: "jice",
gender: "male"
   age: 36,
 email: "jice@admaster.com.cn"
}]);
_jcq.push(['_identify','123456']);  //绑定用户id

5.自定义配置数据上报地址

在监测代码部署成功后，数据默认上报到及策服务端，进行计算。如果数据不上报给及策，而是直接发送到自己服务器，则在通加代码中增加如下内容：

_jcq.push(['_remote', '//domain']);

比如数据上报到www.admaster.com.cn，则代码形如：

<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_remote', '//www.admaster.com.cn']);  //自定义上报地址   
_jcq.push(['_pageview']);

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>

6.多子域用户识别配置

当网站存在多个子域名时，用户在不同域名之间跳转，默认会记录为不同的用户。因为用户id生成在第一方域名下。因此，需要配置写用户id的域名，具体通加代码中增加如下内容：

_jcq.push(['_host', '//domain']);

比如域名为blog.jice.io和store.jice.io 则需要设置为jice.io，则代码形如：

<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_host', 'jice.io']);  //配置子域  
_jcq.push(['_pageview']);

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>

7.不同域来源打通和用户唯一识别配置

当网站存在多个不同域名时，用户在不同域名之间跳转，为了实现用户最初来源的识别和用户唯一的打通，需要配置以下内容，具体通加代码中增加如下内容：

_jcq.push(['_crossdomain',['domain1','domain2']]);
//如果有多个域名，则在后面追加即可；

比如域名为blog.tuice.io和store.jice.io 则代码形如：

//在 blog.tuice.io 下部署代码如下：
<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_crossdomain',['store.jice.io']]); //跨域打通设置，识别来自 store.jice.io 来源用户；
_jcq.push(['_pageview']);

...
</script>

//在 store.jice.io 下部署代码如下：
<script>
var _jcq = _jcq || [];
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_crossdomain',['blog.tuice.io']]); //跨域打通设置，识别来自 blog.tuice.io 来源用户；
_jcq.push(['_pageview']);

...
</script>

通过以上配置，当用户在多域名之间跳转，在始终为同一个人，且在一次浏览过程中流量来源始终为 Landing 时的来源信息；

同时，为了方便手动处理，用户id 和用户来源信息都已经设置为了全局变量。可通过_jcq.uid获取用户ID，通过_jcq.adid 获取来源信息；

8.热力图接口

热图分析发掘用户的点击偏好，从而帮助优化网站的布局。具体部署方式如下

_jcq.enableHeatmap = true;

完整代码示例：

<script>
var _jcq = _jcq || [];
_jcq.enableHeatmap = true;   //设置热图
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_pageview']);

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>

9.开启推送接口

自动化推送配置部署方式如下

 _jcq.enablePush = true;

完整代码示例：

<script>
var _jcq = _jcq || [];
_jcq.enablePush = true;      //开启推送
_jcq.push(['_setAccount', 'APPID']);
_jcq.push(['_pageview']);

(function() {
var jc = document.createElement('script'); jc.async = true;
jc.src = '//' + 'cdn.jice.io/js/jice.min.js';
var s = document.getElementsByTagName('script')[0];
s.parentNode.insertBefore(jc, s);
})();
</script>