「微信复制」转化埋码指南
最后更新时间：2019.12.25
oCPC JS SDK 无法监听到“长按复制”这种交互事件， 所以不能在用户长按复制时自动回传转化数据
由于原生的
copy事件存在兼容问题和基于保护隐私数据的考虑，SDK不会主动采集用户在网站中的复制行为的数据
但我们仍然可以使用「转化属性类」或「成功类」两种形式来实现转化数据的回传
如果您的页面是实现点击微信号复制的话可以参考转化属性类的方案
如果您是自己实现或使用第三方库实现复制的效果，可以参考成功类第三库实现例子
如果您是希望用户使用原生的长按复制效果的话，可以参考成功类原生事件实现例子，但这种实现的兼容性不够全面，建议改成转化属性类的实现
转化属性类
这种方式是实际是基于“转化属性埋码”的原理配合“微信复制按钮点击”这种转化类型来实现的
以下是一个简单的demo：
注：手机/PC等浏览器端的情况多种多样，demo可能无覆盖全部情况，demo只用于解释说明，切莫直接引用， 如需要更全面的支持，可以考虑clipboard.js等通用方案
<div>
加微信了解更多（点击微信号复制）：
<!-- 点击微信号之后复制，设置转化类型为35（微信复制按钮点击） -->
<strong class="weixin-id" data-agl-cvt="35">wxid_balabala</strong>
<p>
bala bala
......<br/>
......<br/>
......<br/>
</p>
<!-- 微信号存在多处，则每一处都需要埋码 -->
去微信了解更多（点击微信号复制）：<strong class="weixin-id" data-agl-cvt="35">wxid_balabala</strong>
</div>
<script>
// 选取DOM节点的方法，可以使用其它类似的api，比如document.getElementById
var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);
function copyWeixin(evt) {
// 新建一个“区域”，并把微信号的节点加到里面
var range = document.createRange();
range.selectNode(evt.currentTarget);
// 获取文档已选区域，
var selection = document.getSelection();
selection.removeAllRanges();
selection.addRange(range);
// 复制
document.execCommand('copy');
// 清除选中状态
selection.removeAllRanges();
// 提示用户复制成功
alert('微信复制成功');
}
// 给所有微信号节点增加点击事件的处理方法（点击时复制）
[].slice.call($$('.weixin-id')).forEach(function (dom) {
dom.addEventListener('click', copyWeixin);
});
</script>
成功类
为了解决兼容性问题(兼容原生的copy事件)，一些第三方库会使用mousedown/mouseup或touchstart/touchend事件来实现长按复制的功能，
而有的时候这些实现会使得click事件无法正常触发，
即无法使用添加转化属性的方式来回传转化数据，
那么此时可以在复制成功之后的回调方法里使用oCPC SDK的接口来回传数据
一般第三方库会提供一些事件来让你在复制成功之后做些自定义的行为
以下简单的demo：
注：手机/PC等浏览器端的情况多种多样，demo可能无覆盖全部情况， demo只用于解释说明，切莫直接引用
使用clipboardjs实现
<html>
<head>
<!-- 一个复制相关的第三方库，部分CDN可能会有访问缓慢的问题，这里直接下载到本地来引用 -->
<script src="./third/clipboard.min.js"></script>
</head>
<body>
<div>
加微信了解更多（点击微信号复制）：
<!-- 点击微信号之后复制 -->
<strong class="weixin-id2" data-clipboard-text="wxid_bilibili">wxid_bilibili</strong>
<p>
bala bala
</p>
<p>
......<br/>
......<br/>
......<br/>
</p>
去微信了解更多（点击微信号复制）：<strong class="weixin-id2" data-clipboard-text="wxid_bilibili">wxid_bilibili</strong>
</div>
<script>
// 使用第三方库复制
var clipboard = new ClipboardJS('.weixin-id2');
// 复制成功后回传数据，一般的第三方库会提供一些事件以实现复制之后的逻辑，
// 如果你使用的是其它第三方复制库，可以查询其相关的文档
clipboard.on('success', function (evt) {
// 复制成功，调用SDK回传转化类型为35（微信复制按钮点击）的数据
window._agl && window._agl.push(['track', ['success', {t: 35}]]);
// 清除文本选中状态
evt.clearSelection();
// 提示用户复制成功
alert('微信复制成功');
});
</script>
</body>
</html>
基于原生copy事件(这种实现的兼容性不够全面，建议改成转化属性类的实现)
<div>
加微信了解更多（长按之后复制）：
<!-- 长按微信号之后复制 -->
<strong class="weixin-id3">wxid_bilibili</strong>
<p>
bala bala
</p>
<p>
......<br/>
......<br/>
......<br/>
</p>
去微信了解更多（长按之后复制）：<strong class="weixin-id3">wxid_bilibili</strong>
</div>
<script>
// 这种实现的兼容性不够全面，建议改成转化属性类的实现
//
// 选取DOM节点的方法，可以使用其它类似的api，比如document.getElementById
var $ = document.querySelector.bind(document);
var $$ = document.querySelectorAll.bind(document);
// 微信复制成功后的回调方法
function weixinCopied(evt) {
// 复制成功，调用SDK回传转化类型为35（微信复制按钮点击）的数据
window._agl && window._agl.push(['track', ['success', {t: 35}]]);
}
// 给所有微信号节点增加复制事件的处理方法
[].slice.call($$('.weixin-id3')).forEach(function (dom) {
dom.addEventListener('copy', weixinCopied);
});
</script>