背景

采集C用户的访问行为,如pv,uv,页面访问情况,商品页访问情况;

目前只采集 页面访问情况,如果是商品详情页面要带上商品的skuID spuID;便于后续分析;

TODO

1. 插件模式 事件收集插件

example

在网页中引入CDNjs文件

自动方式

<script type="text/javascript" src="//oss-hz.qianmi.com/qmfe/lib/ocean-sdk-h5/ocean-sdk-h5.js"></script>
<script>
    var oceanClient = OceanSdkH5.OceanClient({
                         system: {
                           key: 'pfbpcs2kSoog5FWQAqvKwj',
                           secret: 'yKTjexbqRxnFHJphwgS2TY'
                         },
                         env: {
                           qmId: 'qm10000',
                           shopId: 'A00000',
                           clientType: OceanSdkH5.EPlatform.H5 // PC| WEIXIN |APP | H5 | MINI
                         },
                         option: {
                            beforeSend: (request: OceanRequest, next) => {
                             if (request.url === '/#/goods-info') {
                               request.setGoodsInfo({
                                  spuId: 'g9165770',
                                  skuId: '3972990'
                                });
                              }
                             next();
                            }
                          }
                      })

</script>

手动方式

<script type="text/javascript" src="//oss-hz.qianmi.com/qmfe/lib/ocean-sdk-h5/ocean-sdk-h5.js"></script>
<script>
    var oceanClient = OceanSdkH5.OceanClient({
                         system: {
                           key: 'pfbpcs2kSoog5FWQAqvKwj',
                           secret: 'yKTjexbqRxnFHJphwgS2TY'
                         },
                         env: {
                           qmId: 'qm10000',
                           shopId: 'A00000',
                           clientType: OceanSdkH5.EPlatform.H5 // PC| WEIXIN |APP | H5 | MINI
                         },
                         option: {
                            auto:false,
                            beforeSend: (request: OceanRequest, next) => {
                             if (request.url === '/#/goods-info') {
                               request.setGoodsInfo({
                                  spuId: 'g9165770',
                                  skuId: '3972990'
                                });
                              }
                             next();
                            }
                          }
                      });


            //登录后才能知道QMID的情况
            client.setQmId('qm10000');

            //发送普通浏览记录;
            client.sendView({
                  url: window.location.pathname,
                });

            //发送商品浏览记录;
            client.sendView({
                  url: window.location.pathname,
                  attrs: {
                    spuId: 'g9165770',
                    skuId: '3972990'
                  }
                });

</script>

引入NPM模块;

npm install @qianmi/ocean-h5 --save --registry=http://registry.npm.qianmi.com

注:

建议使用CDN js,采集脚本升级不影响业务线; 具体操作及使用参考 自动模式 手动模式;

自动模式 自动发送浏览器记录; 首次加载时,及hash发生变化时;

import { OceanClient, EPlatform, OceanRequest } from '@qianmi/ocean-h5';
OceanClient({
  system: {
    key: 'pfbpcs2kSoog5FWQAqvKwj',
    secret: 'yKTjexbqRxnFHJphwgS2TY'
  },
  env: {
    qmId: 'qm10000',
    shopId: 'A00000',
    clientType: EPlatform.H5
  }
});

//or 如果要详细添加商品信息可在回调函数中设置商品信息

import { OceanClient, EPlatform, OceanRequest } from '@qianmi/ocean-h5';
OceanClient({
  system: {
    key: 'pfbpcs2kSoog5FWQAqvKwj',
    secret: 'yKTjexbqRxnFHJphwgS2TY'
  },
  env: {
    qmId: 'qm10000',
    shopId: 'A00000',
    clientType: EPlatform.H5
  },
  option: {
    beforeSend: (request: OceanRequest, next) => {
      if (request.url === '/#/goods-info') {
        request.setGoodsInfo({
          spuId: 'g9165770',
          skuId: '3972990'
        });
      }
      next();
    }
  }
});

手动模式 设置auto参数为false,即可关闭自动模式,根据业务需要发送记录;

import { OceanClient, EPlatform } from '@qianmi/ocean-h5';

let client = OceanClient({
    system : {
      key: 'pfbpcs2kSoog5FWQAqvKwj',
      secret: 'yKTjexbqRxnFHJphwgS2TY'
    },
    env : {
      qmId: 'qm10000',
      shopId: 'A00000',
      clientType: EPlatform.H5
    },
    option: {
      auto:false
    }
});

//登录后才能知道QMID的情况
client.setQmId('qm10000');

//发送普通浏览记录;
client.sendView({
      url: window.location.pathname,
    });

//发送商品浏览记录;
client.sendView({
      url: window.location.pathname,
      attrs: {
        spuId: 'g9165770',
        skuId: '3972990'
      }
    });

常见问题

测试环境数据过滤;

如果在测试环境,可以中断信息的发送,避免影响线上数据统计;

• 方式1: 避免加载oceanClientJS,或初始化oceanClient;
• 方式2: 在beforeSend方法中不调用next方法,中断请求信息发送;

用户如何唯一识别?

任何一个用户首次访问网站会生成一个随机数[clientId];用此id标识用户;

UV的判断依据?

如果没有qmid则根据clientID来判断,如果有qmid则根据qmid来判断;

clientID与qmid要有关联, 一个用户未登录前只有clientID sessionId 登录后有了qmid,这三者是有关系的; 如果 不关联,有些访问信息会丢失

一个客户端访问多个站点的情况?

与访问一个站点没区别; 每次请求中带了shopId,后台还是可以区分;clientId及qmid sessionID定义未变

session过期时间控制 为什么不入到sessionStorage里呢?

目前的过期时间控制是通过缓存中添加过期时间,让外部来控制; 放到localStorage不可取, 因为没有过期时间,localStorage存储的内容会一直存在; 放到sessionStorage 看似来可以,但一个用户长时间不操作, 但session并没有退出仍然会算做有效sesion,会影响最终的页面停留时间;

监控hash变化 自动发送浏览记录?需要额外的数据时怎么处理, 商品spu sku;

在自动模式中, 在发送浏览前会调用beforeSend 方法, 可以在这里完善spu sku信息; 手动模式中,发送信息带上spuID 与skuId即可! 参考 自动模式 与手动模式示例;

商城 订货key信息

{
    "id": 2,
    "name": "商城PV",
    "adder": "system",
    "addTime": "2018-05-15 09:17:47",
    "modifier": null,
    "lastModifyTime": null,
    "appKey": "YKZFBrFoNTt2TtRTLDE95T",
    "appSecret": "ymfTfp5D9ECeiuAkXsnCCf",
    "description": null,
    "level": 0,
    "type": 1,
    "notifyUrl": null,
    "featureTablesStr": "t_feature_view_pv"
}


{
    "id": 3,
    "name": "分销PV",
    "adder": "system",
    "addTime": "2018-05-15 09:18:05",
    "modifier": null,
    "lastModifyTime": null,
    "appKey": "uCG6fWgkqLbYFtZawMTSs5",
    "appSecret": "pjZwifnXkkibtSnVpdZrTe",
    "description": null,
    "level": 0,
    "type": 1,
    "notifyUrl": null,
    "featureTablesStr": "t_feature_view_pv"
}