@ked3/ktrace
Version:
跨平台埋点分析SDK
374 lines (339 loc) • 13.5 kB
HTML
<html lang="zh-CN">
<head>
<meta charset="UTF-8" />
<meta name="viewport" content="width=device-width, initial-scale=1.0" />
<title>KTrace Advanced Demo</title>
<style>
body { font-family: 'Segoe UI', Arial, sans-serif; max-width: 1000px; margin: 0 auto; padding: 20px; background-color: #f5f5f5; }
.header { text-align: center; background: linear-gradient(135deg, #667eea 0%, #764ba2 100%); color: white; padding: 30px; border-radius: 10px; margin-bottom: 30px; }
.card { background: white; padding: 20px; margin: 20px 0; border-radius: 8px; box-shadow: 0 2px 10px rgba(0,0,0,0.1); }
.button-group { display: flex; gap: 10px; flex-wrap: wrap; margin: 15px 0; }
button { padding: 12px 24px; border: none; border-radius: 6px; cursor: pointer; font-size: 14px; transition: all 0.3s; }
.btn-primary { background-color: #007bff; color: white; }
.btn-success { background-color: #28a745; color: white; }
.btn-warning { background-color: #ffc107; color: black; }
.btn-danger { background-color: #dc3545; color: white; }
.btn-info { background-color: #17a2b8; color: white; }
button:hover { transform: translateY(-2px); box-shadow: 0 4px 15px rgba(0,0,0,0.2); }
.stats-grid { display: grid; grid-template-columns: repeat(auto-fit, minmax(200px, 1fr)); gap: 15px; margin: 20px 0; }
.stat-card { background: linear-gradient(45deg, #f093fb 0%, #f5576c 100%); color: white; padding: 20px; border-radius: 8px; text-align: center; }
.form-group { margin: 15px 0; }
input, select, textarea { width: 100%; padding: 10px; border: 1px solid #ddd; border-radius: 4px; font-size: 14px; }
</style>
<script src="../../ktrace.min.js"></script>
</head>
<body>
<div class="header">
<h1>🚀 KTrace 高级功能演示</h1>
<p>完整的埋点追踪功能测试平台</p>
</div>
<div class="card">
<h3>📊 实时统计</h3>
<div class="stats-grid">
<div class="stat-card">
<h4>总事件数</h4>
<div id="totalEvents">0</div>
</div>
<div class="stat-card">
<h4>页面访问</h4>
<div id="pageViews">1</div>
</div>
<div class="stat-card">
<h4>用户交互</h4>
<div id="interactions">0</div>
</div>
<div class="stat-card">
<h4>错误次数</h4>
<div id="errors">0</div>
</div>
</div>
</div>
<div class="card">
<h3>🎯 基础事件追踪</h3>
<div class="button-group">
<button class="btn-primary" onclick="trackPageView()">页面访问</button>
<button class="btn-success" onclick="trackUserLogin()">用户登录</button>
<button class="btn-info" onclick="trackProductView()">商品浏览</button>
<button class="btn-warning" onclick="trackSearch()">搜索行为</button>
</div>
</div>
<div class="card">
<h3>💥 错误监控测试</h3>
<div class="button-group">
<button class="btn-danger" onclick="triggerJSError()">JS错误</button>
<button class="btn-danger" onclick="triggerPromiseError()">Promise错误</button>
<button class="btn-danger" onclick="triggerNetworkError()">网络错误</button>
</div>
</div>
<div class="card">
<h3>📝 表单交互追踪</h3>
<div class="form-group">
<input type="text" id="username" placeholder="用户名" onchange="trackFormField('username')">
</div>
<div class="form-group">
<input type="email" id="email" placeholder="邮箱" onchange="trackFormField('email')">
</div>
<div class="form-group">
<select id="category" onchange="trackFormField('category')">
<option value="">选择分类</option>
<option value="tech">技术</option>
<option value="business">商务</option>
<option value="design">设计</option>
</select>
</div>
<div class="button-group">
<button class="btn-success" onclick="submitForm()">提交表单</button>
</div>
</div>
<div class="card">
<h3>⚡ 性能监控</h3>
<div class="button-group">
<button class="btn-info" onclick="trackPerformance()">测量性能</button>
<button class="btn-info" onclick="trackMemoryUsage()">内存使用</button>
<button class="btn-info" onclick="trackNetworkSpeed()">网络速度</button>
</div>
</div>
<div class="card">
<h3>📱 设备信息追踪</h3>
<div class="button-group">
<button class="btn-warning" onclick="trackDeviceInfo()">设备信息</button>
<button class="btn-warning" onclick="trackBrowserInfo()">浏览器信息</button>
<button class="btn-warning" onclick="trackScreenInfo()">屏幕信息</button>
</div>
</div>
<script>
// 统计计数器
let stats = {
totalEvents: 0,
pageViews: 1,
interactions: 0,
errors: 0
};
// 初始化追踪器
const tracker = new KTrace.HtmlAdapter({
project_id: "advanced_demo_001",
enable_auto_track: true,
debug: true
});
tracker.init();
// 更新统计
function updateStats() {
document.getElementById('totalEvents').textContent = stats.totalEvents;
document.getElementById('pageViews').textContent = stats.pageViews;
document.getElementById('interactions').textContent = stats.interactions;
document.getElementById('errors').textContent = stats.errors;
}
// 基础事件追踪
function trackPageView() {
tracker.trackEvent('page_view_manual', {
page_type: 'demo_page',
visit_duration: Date.now() - window.loadTime,
referrer: document.referrer
});
stats.totalEvents++;
stats.pageViews++;
updateStats();
console.log('✅ 页面访问事件已追踪');
}
function trackUserLogin() {
tracker.trackEvent('user_login', {
login_method: 'demo',
user_type: 'test_user',
timestamp: new Date().toISOString()
});
stats.totalEvents++;
stats.interactions++;
updateStats();
console.log('✅ 用户登录事件已追踪');
}
function trackProductView() {
tracker.trackEvent('product_view', {
product_id: 'demo_product_' + Math.floor(Math.random() * 1000),
category: 'electronics',
price: 999.99,
currency: 'CNY'
});
stats.totalEvents++;
stats.interactions++;
updateStats();
console.log('✅ 商品浏览事件已追踪');
}
function trackSearch() {
const searchTerms = ['手机', '电脑', '耳机', '键盘', '鼠标'];
const randomTerm = searchTerms[Math.floor(Math.random() * searchTerms.length)];
tracker.trackEvent('search', {
search_term: randomTerm,
search_results: Math.floor(Math.random() * 100),
search_type: 'product_search'
});
stats.totalEvents++;
stats.interactions++;
updateStats();
console.log(`✅ 搜索事件已追踪: ${randomTerm}`);
}
// 错误测试
function triggerJSError() {
try {
throw new Error('这是一个测试JavaScript错误');
} catch (error) {
tracker.trackError(error, {
error_source: 'manual_trigger',
test_scenario: 'js_error_demo'
});
stats.totalEvents++;
stats.errors++;
updateStats();
console.log('❌ JavaScript错误已追踪');
}
}
function triggerPromiseError() {
Promise.reject(new Error('这是一个测试Promise错误'))
.catch(error => {
tracker.trackError(error, {
error_source: 'promise_rejection',
test_scenario: 'promise_error_demo'
});
stats.totalEvents++;
stats.errors++;
updateStats();
console.log('❌ Promise错误已追踪');
});
}
function triggerNetworkError() {
// 模拟网络请求错误
fetch('https://nonexistent-api-endpoint-demo.com/data')
.catch(error => {
tracker.trackError(error, {
error_source: 'network_request',
test_scenario: 'network_error_demo',
endpoint: 'https://nonexistent-api-endpoint-demo.com/data'
});
stats.totalEvents++;
stats.errors++;
updateStats();
console.log('❌ 网络错误已追踪');
});
}
// 表单追踪
function trackFormField(fieldName) {
const value = document.getElementById(fieldName).value;
tracker.trackEvent('form_field_change', {
field_name: fieldName,
field_value_length: value.length,
has_value: value.length > 0
});
stats.totalEvents++;
stats.interactions++;
updateStats();
console.log(`ℹ️ 表单字段变更: ${fieldName}`);
}
function submitForm() {
const formData = {
username: document.getElementById('username').value,
email: document.getElementById('email').value,
category: document.getElementById('category').value
};
tracker.trackEvent('form_submit', {
form_type: 'demo_form',
fields_filled: Object.values(formData).filter(v => v).length,
total_fields: Object.keys(formData).length
});
stats.totalEvents++;
stats.interactions++;
updateStats();
console.log('✅ 表单提交事件已追踪');
}
// 性能监控
function trackPerformance() {
const performanceData = {
load_time: performance.now(),
memory_used: performance.memory ? performance.memory.usedJSHeapSize : 'unknown',
navigation_type: performance.navigation ? performance.navigation.type : 'unknown'
};
tracker.trackEvent('performance_check', performanceData);
stats.totalEvents++;
updateStats();
console.log(`ℹ️ 性能数据已追踪: 加载时间 ${performanceData.load_time.toFixed(2)}ms`);
}
function trackMemoryUsage() {
if (performance.memory) {
tracker.trackEvent('memory_usage', {
used_heap: performance.memory.usedJSHeapSize,
total_heap: performance.memory.totalJSHeapSize,
heap_limit: performance.memory.jsHeapSizeLimit
});
stats.totalEvents++;
updateStats();
console.log(`ℹ️ 内存使用情况已追踪: ${(performance.memory.usedJSHeapSize / 1024 / 1024).toFixed(2)}MB`);
} else {
console.log('⚠️ 浏览器不支持内存监控');
}
}
function trackNetworkSpeed() {
const connection = navigator.connection || navigator.mozConnection || navigator.webkitConnection;
if (connection) {
tracker.trackEvent('network_info', {
effective_type: connection.effectiveType,
downlink: connection.downlink,
rtt: connection.rtt
});
stats.totalEvents++;
updateStats();
console.log(`ℹ️ 网络信息已追踪: ${connection.effectiveType}`);
} else {
console.log('⚠️ 浏览器不支持网络信息API');
}
}
// 设备信息追踪
function trackDeviceInfo() {
tracker.trackEvent('device_info', {
platform: navigator.platform,
language: navigator.language,
cookie_enabled: navigator.cookieEnabled,
online: navigator.onLine,
hardware_concurrency: navigator.hardwareConcurrency
});
stats.totalEvents++;
updateStats();
console.log('ℹ️ 设备信息已追踪');
}
function trackBrowserInfo() {
tracker.trackEvent('browser_info', {
user_agent: navigator.userAgent,
vendor: navigator.vendor,
app_name: navigator.appName,
app_version: navigator.appVersion
});
stats.totalEvents++;
updateStats();
console.log('ℹ️ 浏览器信息已追踪');
}
function trackScreenInfo() {
tracker.trackEvent('screen_info', {
screen_width: screen.width,
screen_height: screen.height,
color_depth: screen.colorDepth,
pixel_depth: screen.pixelDepth,
viewport_width: window.innerWidth,
viewport_height: window.innerHeight
});
stats.totalEvents++;
updateStats();
console.log(`ℹ️ 屏幕信息已追踪: ${screen.width}x${screen.height}`);
}
// 初始化
window.loadTime = Date.now();
console.log('✅ KTrace 高级演示已就绪！');
updateStats();
// 页面可见性变化追踪
document.addEventListener('visibilitychange', () => {
tracker.trackEvent('page_visibility_change', {
visibility_state: document.visibilityState,
hidden: document.hidden
});
console.log(`ℹ️ 页面可见性变更: ${document.visibilityState}`);
});
</script>
</body>
</html>