Afilter Tracker 的自定义事件追踪很强大
你可以依据自己的理解，对访客所有的行为进行跟踪。
甚至可以依据访客的操作流程，进行沙漏追踪（了解什么是沙漏营销：https://www.useit.com.cn/thread-8967-1-1.html）。
比如说，有多少客户访客你的网站，然后点击了按钮，加入购物车，提交订单，支付等等。
事件有各种类型，这里我收录了一些较为常见的访客操作，大家可以依据例子，对自己的访客进行追踪。
案例一：追踪访客是否支持cookie
<!-- Afilter Tracker 追踪访客是否支持cookie -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
(function(){
let domain = 'yourdomain.com'; //替换成你的域名
let protocol = 'https'; //如果不支持https, 请改为 http
window.afilter = function(event,detail,token){
if(Number(event) <= 0) return;
var xhr = new XMLHttpRequest();
xhr.open('POST', protocol + '://' + domain +'/p/events', true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("et=" + event + "&v=" + detail + "&t=" + token);
};
window.atgo = function(url){
window.location.replace(protocol + '://' + domain + '/' + url);
};
}());
//定义绑定事件, 设置为0不做判断,
let at_support_cookie = 6; //访问支持cookie
if(window.navigator.cookieEnabled)
{
afilter(at_support_cookie);
}
</script>
</head>
<body>
这里是引导页内容
</body>
</html>
案例二：判断访客是否完全载入lander
<!-- Afilter Tracker 页面是否完全加载追踪 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
(function(){
let domain = 'yourdomain.com'; //替换成你的域名
let protocol = 'https'; //如果不支持https, 请改为 http
window.afilter = function(event,detail,token){
if(Number(event) <= 0) return;
var xhr = new XMLHttpRequest();
xhr.open('POST', protocol + '://' + domain +'/p/events', true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("et=" + event + "&v=" + detail + "&t=" + token);
};
window.atgo = function(url){
window.location.replace(protocol + '://' + domain + '/' + url);
};
}());
//定义绑定事件, 设置为0不做判断,
let at_onload = 1; //页面完全加载
window.onload = function () {
//页面完全加载了,这个时候回传页面完全加载事件.
afilter(at_onload);
};
</script>
</head>
<body>
这里是引导页内容
</body>
</html>
案例三：点击陷阱
<!-- Afilter Tracker 点击陷阱 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script>
let domain = 'yourdomain.com'; //替换成你的域名
let protocol = 'https'; //如果不支持https, 请改为 http
"use strict";!function(){var e={clicks:{clickCount:0,clickWrong:0,clickDetails:[]}};window.AtRequest=function(e="GET",t,n=null){var o=new XMLHttpRequest;o.open(e,t,!0),o.withCredentials=!0,n&&o.setRequestHeader("Content-Type","application/x-www-form-urlencoded"),o.send(n)},window.AtClickCheck=function(t=["p","button","a"],n=3,o=0){document.addEventListener("DOMContentLoaded",function(){document.addEventListener("mouseup",function(c){e.clicks.clickCount++,e.clicks.clickDetails.push({timestamp:Date.now(),node:c.target.nodeName,x:c.pageX,y:c.pageY}),o>0&&console.log(c.target.nodeName),t.indexOf(c.target.nodeName.toLowerCase())<0&&e.clicks.clickWrong++,e.clicks.clickWrong>n&&(o>0&&console.log("Bot"),AtRequest("GET",`${protocol}://${domain}/d/wrong`))})})}}();
// AtClickCheck 支持3个参数, 分别为
// AtClickCheck([支持的标签数组],最大错误点击次数,是否开启调试模式);
// 请将标签转为小写
AtClickCheck(['h3','span',,'img'],2,1);
//如果需要关闭调试模式, 请改为，即，第三个参数删除。
// AtClickCheck(['h3','span',,'img'],2);
</script>
</head>
<body>
<h1>点击陷阱示例</h1>
<p> 你可以点击以下任意标签，打开 F12 -> Console，查看日志输出。 </p>
<h3>允许点击的</h3>
<p> 不允许点击的 </p>
<p>
<span> 允许点击的 (在不允许的点击标签内也没关系) </span>
</p>
<p>
<button> 不允许点击的 （在不允许的标签内，也需要再进行一次配置） </button>
</p>
<img src="https://www.baidu.com/img/bd_logo1.png?qua=high&where=super" alt="允许点击的" title="允许点击的" width="100px">
</body>
</html>
案例四：追踪访客在当前页面停留时间
<!-- Afilter Tracker 追踪访客在当前页面停留时间 -->
<!DOCTYPE html>
<html lang="en">
<head>
<meta charset="UTF-8">
<title>Title</title>
<script src="time.js"></script>
<script>
(function(){
let domain = 'yourdomain.com'; //替换成你的域名
let protocol = 'https'; //如果不支持https, 请改为 http
window.afilter = function(event,detail,token){
if(Number(event) <= 0) return;
var xhr = new XMLHttpRequest();
xhr.open('POST', protocol + '://' + domain +'/p/events', true);
xhr.withCredentials = true;
xhr.setRequestHeader("Content-Type", "application/x-www-form-urlencoded");
xhr.send("et=" + event + "&v=" + detail + "&t=" + token);
};
window.atgo = function(url){
window.location.replace(protocol + '://' + domain + '/' + url);
};
}());
//定义绑定事件, 事件设置为0不做判断,
let at_live_five = 4; //访客停留5秒,
let at_live_ten = 5; //访客停留10秒,
TimeMe.initialize({
currentPageName: "my-lander", //当前页面
idleTimeoutInSeconds: 5, // 访客多久未操作后停止统计时间。
});
TimeMe.callAfterTimeElapsedInSeconds(5, function(){
//5秒
afilter(at_live_five);
});
TimeMe.callAfterTimeElapsedInSeconds(10, function(){
//10秒
afilter(at_live_ten);
});
</script>
</head>
<body>
</body>
</html>
time.js 在 ZIP 压缩包中
案例五：死链陷阱
<?php
/**
* Created by PhpStorm.
* User: Adzon
* Date: 2018/11/13
* Time: 4:45 PM
*
* 本文件为死链代码生成范例，死链代码批量生成目前仅提供php版本，并且要求php版本大于7.0
*
*/
$domain = 'yourdomain.com'; //替换成你的域名
$protocol = 'https'; //如果不支持https, 请改为 http
?>
<div style="display: none;">
<?php for ($i = 0; $i < 10; $i++) { ?>
<a href="<?php echo $protocol?>://<?php echo $domain?>/d/<?php echo session_create_id() ?>" style="position: absolute; left: -100px;">Start
Now</a>
<?php } ?>
</div>
这里是lp内容。
<div style="display: none;">
<?php for ($i = 0; $i < 10; $i++) { ?>
<a href="<?php echo $protocol?>://<?php echo $domain?>/d/<?php echo session_create_id() ?>" style="position: absolute; left: -100px;">Start
Now</a>
<?php } ?>
</div>
示例文件打包
AT 事件追踪示例.zip (9.4 KB)