@ked3/ktrace
Version:
跨平台埋点分析SDK
138 lines (118 loc) • 4.7 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>KTrace Demo - HTML 原生项目</title>
<style>
body { font-family: Arial, sans-serif; max-width: 800px; margin: 0 auto; padding: 20px; }
.container { margin: 20px 0; }
button { margin: 10px; padding: 10px 20px; font-size: 16px; }
.error-trigger { background-color: #ff4444; color: white; }
.normal-btn { background-color: #4CAF50; color: white; }
.input-group { margin: 10px 0; }
input, textarea { margin: 5px; padding: 8px; font-size: 14px; }
</style>
<!-- 引入SDK -->
<script src="../../ktrace.min.js"></script>
</head>
<body>
<h1>KTrace HTML 原生项目演示</h1>
<div class="container">
<h3>基础功能测试</h3>
<button class="normal-btn" onclick="trackButtonClick()">追踪按钮点击</button>
<button class="normal-btn" onclick="trackCustomEvent()">追踪自定义事件</button>
<button class="error-trigger" onclick="triggerError()">触发错误</button>
<div class="input-group">
<input type="text" id="userInput" placeholder="输入用户名">
<button class="normal-btn" onclick="trackUserInput()">追踪用户输入</button>
</div>
<div class="input-group">
<textarea id="feedback" placeholder="输入反馈内容"></textarea>
<button class="normal-btn" onclick="trackFeedback()">提交反馈</button>
</div>
</div>
<script>
// 初始化追踪器
const tracker = new KTrace.HtmlAdapter({
project_id: "demo_project_001",
enable_auto_track: true,
debug: true
});
// 启动追踪
tracker.init();
console.log("[Demo] KTrace 已初始化完成");
// 按钮点击追踪
function trackButtonClick() {
tracker.trackEvent(KTrace.EventKey.BUTTON_CLICK, {
button_type: 'basic_button',
page_section: 'demo_section',
timestamp: Date.now()
});
console.log('✅ 已追踪按钮点击事件');
}
// 自定义事件追踪
function trackCustomEvent() {
tracker.trackEvent(KTrace.EventKey.CUSTOM_INTERACTION, {
action_type: 'demo_action',
user_agent: navigator.userAgent,
screen_resolution: `${screen.width}x${screen.height}`,
page_title: document.title
});
console.log('✅ 已追踪自定义事件');
}
// 错误触发
function triggerError() {
try {
// 故意触发一个错误
const nonExistentObject = null;
nonExistentObject.someProperty.anotherProperty = "这会报错";
} catch (error) {
tracker.trackError(error, KTrace.EventKey.JAVASCRIPT_ERROR, {
error_context: 'demo_error_trigger',
user_action: 'button_click'
});
console.log('❌ 已追踪错误事件: ' + error.message);
}
}
// 用户输入追踪
function trackUserInput() {
const userInput = document.getElementById('userInput').value;
if (userInput.trim()) {
tracker.trackEvent(KTrace.EventKey.USER_INPUT, {
input_type: 'username',
input_length: userInput.length,
has_special_chars: /[^a-zA-Z0-9]/.test(userInput)
});
console.log(`✅ 已追踪用户输入: ${userInput}`);
} else {
console.log('⚠️ 请先输入内容');
}
}
// 反馈提交追踪
function trackFeedback() {
const feedback = document.getElementById('feedback').value;
if (feedback.trim()) {
tracker.trackEvent(KTrace.EventKey.FEEDBACK_SUBMIT, {
feedback_length: feedback.length,
word_count: feedback.split(' ').length,
submission_time: new Date().toISOString()
});
console.log('✅ 已追踪反馈提交');
document.getElementById('feedback').value = '';
} else {
console.log('⚠️ 请先输入反馈内容');
}
}
// 页面加载完成时的追踪
window.addEventListener('load', () => {
console.log('🎉 页面加载完成，自动追踪已激活');
});
// 页面离开时的追踪
window.addEventListener('beforeunload', () => {
console.log('👋 用户即将离开页面');
});
console.log('🚀 KTrace Demo 已就绪，开始测试吧！');
</script>
</body>
</html>