nw-attribution
渠道归因SDK
原理
- 本SDK主要是根据随机生成的uuid组成设备的唯一token(设备指纹碰撞率太高,尤其IOS端,不再计算)
- 再自动获取H5页面的URL中的
channel
和uid
信息,得到渠道信息和分享人信息 - 本SDk还会收集URL中
channel
、uid
以外的其他信息,最终结合手动传入的extraData
作为全部的收集信息进行上报 - 提供2个方法,可以选择自动跳转到官网最新渠道包下载,也可以不下载只获取上报URL,自行处理上报逻辑
安装
$ npm install nw-attribution --save
注意事项
- 如果要收集渠道信息,页面的URL query中需用
channel
设置对应的渠道信息,比如:https://www.lofter.com/test.html?channel=banner1
- 如果URL中缺少
channel
字段,可以通过传入overwriteChannel
字段来覆盖URL中的channel
- 如果要收集分享人信息,页面的URL query中需用
uid
设置对应的分享人userId,比如:https://www.lofter.com/test.html?uid=123
- URL中
channel
、uid
外的其他信息,也会被自动收集,作为extraData
的一部分 - 如果当前页面还有一些需要代码计算,无法固化在URL中的附加信息,可以自行收集后通过
extraData
上报,最终会与URL中的其他信息综合在一起,比如URL中含有testValue=1
,手动传入了myUserId=2
,最终会组成testValue=1&myUserId=2
的上报信息 - 因为受浏览器安全限制,想要将文本自动复制到用户剪切板,必须有用户的直接点击操作,所以必须在初始化SDk时,传入将会触发点击的DOM元素,才能利用剪切板完成本次归因信息收集
- 页面的URL query中使用
incantation
设置对应的口令信息,比如:https://www.lofter.com/test.html?incantation=banner1
使用
- es6方式引用
<button id="download">点我下载</button>
import Attributon from 'nw-attribution';
const extraData = `testValue=testKey`; // 想要额外上报的信息,字符串格式,
const btn = document.querySelector('#download');
// 初始化SDK
const attribution = new Attributon({
button: btn,
extraData,
})
// 直接拷贝token到剪切板并跳转上报下载url
btn.addEventListener('click', () => {
log.sendLog('a1-1')
// 延时300ms,并且自动上报然后跳转下载
attribution.attributionDownload(300);
})
// 拷贝token到剪切板,传递callback获取url
btn.addEventListener('click', () => {
attributionUrl({
extraData,
noDownload: true,
callback: url => {
console.log(url);
}
})
})
- browser中直接使用(需要拷贝后bundle.js)
<script src="./bundle.js"></script>
<script>
var btn = document.querySelector('#btn');
var attribution = new NWAttribution.default({
button: app
});
btn.addEventListener('click', function () {
attribution.attributionDownload(300);
console.log('click');
// do something such as send a log
})
btn.addEventListener('click', () => {
NWAttribution.attributionDownload({
useCache: false,
extraData: 'test=1',
downloadTimeout: 2000
});
//NWAttribution.attributionUrl({
// useCache: true,
// extraData: 'test=1',
// callback: function (url) {
// console.log('url', url);
// }
});
})
</script>
发布
- 在根目录运行
npm run build nw-attribution
打包es module格式的代码 - 在当前
packages/nw-attribution
目录下运行npm run build
打包UMD格式的代码 - 提交Git信息
- 在根目录运行
npm run onlyPublish
,发布组件更新
API
track() ⇒ Promise.<void>
Kind: global function