jppreusdev/interactor

一个简单的网站用户交互跟踪器。

维护者

详细信息

github.com/JPPreusDev/interactor

源代码

安装: 14

依赖者: 0

建议者: 0

安全性: 0

星标: 0

关注者: 1

分支: 52

语言:JavaScript

v1.1.0 2017-05-01 02:55 UTC

MIT 6f1265d81479b1b42a2a83ed44ea0be36ce4f565

  • James Preus Jr <@JPPreusDev> <james.woop@jppreusdev.com>

This package is auto-updated.

Last update: 2024-09-29 04:42:43 UTC

README

一个简单、轻量级（< 5KB 最小化），无依赖的前端网站交互跟踪器。

在beforeunload事件中收集使用数据并将其提交到用户定义的服务器端点。

非常适合创建数据库以驱动分析、告知A/B测试和指导其他网站优化决策。

这些数据可以帮助您分析

  • 您的用户如何浏览您的网站
  • 每页和整个网站的用户参与度
  • 您的用户使用的平台、语言设置和浏览器尺寸
  • 跳出率、页面和网站瓶颈、曝光和转化率

文档

目前正在编写文档。有一个工作（前端）Interactor示例。要探索它，请打开浏览器的控制台并点击交互和转化按钮。

Interactor目前支持现代浏览器：Chrome、Firefox和Safari。欢迎进行额外的测试和反馈。

提供哪些数据？

一般数据

  • 加载的页面是哪个
  • 用户何时加载页面
  • 用户何时离开页面
  • 加载的页面的URL
  • 前一个页面位置
  • 页面的标题
  • 用户的语言设置
  • 用户平台
  • 访问Web服务器的端口
  • 浏览器内宽度和高度

交互/转化数据

  • 交互类型（即通用交互或转化）
  • 交互时间
  • 触发交互的事件
  • 目标HTML元素标签
  • 目标HTML元素类
  • 目标HTML元素内容（例如文本等）
  • 相对于客户端的鼠标指针位置
  • 相对于屏幕的鼠标指针位置

示例用法

将脚本包含到您的HTML中并调用它。

<!DOCTYPE html>
<html>
	<head>
		<title>Interaction Tracker Example</title>
	</head>
	<body>
		<div class="interaction"></div>
		<div class="interaction"></div>
		<div class="interaction"></div>
		<div class="conversion"></div>
		<script src="interactor.min.js" type="application/javascript"></script>
		<script>
			// An example instantiation with custom arguments
			var interactions = new Interactor({
				interactions            : true,
				interactionElement      : "interaction",
				interactionEvents       : ["mousedown", "mouseup", "touchstart", "touchend"],
				conversions             : true,
				conversionElement       : "conversion",
				conversionEvents        : ["mouseup", "touchend"],
				endpoint                : '/usage/interactions',
				async                   : true,
				debug                   : false
			});
		</script>
	</body>
</html>

要跟踪用户与元素的交互，只需将该元素添加'interaction' CSS类。

在您的页面上有转化点？您也可以添加它，只需将'conversion' CSS类添加到转化HTML元素上。

想跟踪用户与页面上不同元素类别的交互和/或转化？创建多个实例，并允许每个实例针对特定元素进行跟踪。无需更新HTML！

示例

var elementsToTrack = [
	{
		element: "element1",
		events : ["mouseup", "touchend"]
	}, 
	{
		element: "element2",
		events : ["mouseup"]
	},
	{ 
		element: "element3",
		events : ["mouseup"]
	}
];

for (var i = 0; i < elementsToTrack.length; i++) {
	var e = elementsToTrack[i];
	new Interactor({
		interactionElement 	: e.element,
		interactionEvents 	: e.events
	});
}

默认参数

{
	interactions            : true,
	interactionElement      : 'interaction',
	interactionEvents       : ['mouseup', 'touchend'],
	conversions             : false,
	conversionElement       : 'conversion',
	conversionEvents        : ['mouseup', 'touchend'],
	endpoint                : '/interactions',
	async                   : true,
	debug                   : true
}

贡献

欢迎贡献！

接下来：添加WebSocket模式。