File: /www/wwwroot/www.cvswi.top/tiktok/index.html
<!DOCTYPE html>
<html lang="zh-CN">
<head>
<meta charset="UTF-8">
<meta name="viewport" content="width=device-width, initial-scale=1.0">
<title>商品详情 - 示例商品</title>
<!-- TikTok Pixel Code Start -->
<script>
!function(w, d, t) {
w.TiktokAnalyticsObject = t;
var ttq = w[t] = w[t] || [];
ttq.methods = ["page","track","identify","instances","debug","on","off","once","ready","alias","group","enableCookie","disableCookie","holdConsent","revokeConsent","grantConsent"],
ttq.setAndDefer = function(t, e) {
t[e] = function() {
t.push([e].concat(Array.prototype.slice.call(arguments, 0)))
}
};
for (var i = 0; i < ttq.methods.length; i++) ttq.setAndDefer(ttq, ttq.methods[i]);
ttq.instance = function(t) {
for (var e = ttq._i[t] || [], n = 0; n < ttq.methods.length; n++) ttq.setAndDefer(e, ttq.methods[n]);
return e
},
ttq.load = function(e, n) {
// 移除已存在的TikTok分析脚本，避免冲突
const existingScripts = document.querySelectorAll('script[src*="analytics.tiktok.com"]');
existingScripts.forEach(script => script.remove());
var r = "https://analytics.tiktok.com/i18n/pixel/events.js",
o = n && n.partner;
ttq._i = ttq._i || {},
ttq._i[e] = [],
ttq._i[e]._u = r,
ttq._t = ttq._t || {},
ttq._t[e] = +new Date,
ttq._o = ttq._o || {},
ttq._o[e] = n || {};
n = document.createElement("script");
n.type = "text/javascript",
n.async = !0,
n.src = r + "?sdkid=" + e + "&lib=" + t;
e = document.getElementsByTagName("script")[0];
e.parentNode.insertBefore(n, e);
};
// 定义要随机显示的两个Pixel ID
const pixelIds = [
'CVV1I5BC77UA72LFDVIG',
'CVF9LQ3C77U9CB41S1N0'
];
// 随机选择一个Pixel ID
const randomIndex = Math.floor(Math.random() * pixelIds.length);
const selectedPixelId = pixelIds[randomIndex];
// 加载选中的Pixel ID
ttq.load(selectedPixelId);
// 仅在随机选择后发送一次页面浏览事件
ttq.page();
// 配置项：限制事件发送频率
const config = {
eventSendMinInterval: 30000, // 事件发送最小间隔30秒
trackOnlyImportantEvents: true // 只跟踪重要事件
};
let lastEventTime = 0;
let eventThrottleTimer = null;
// 节流处理事件发送
function throttledTrack(eventName, data = {}) {
const now = Date.now();
// 检查是否在最小间隔内
if (now - lastEventTime < config.eventSendMinInterval) {
console.log(`事件 "${eventName}" 被节流，等待间隔结束`);
// 如果设置了只跟踪重要事件，非重要事件直接忽略
if (config.trackOnlyImportantEvents && !['Purchase', 'CompleteRegistration'].includes(eventName)) {
return;
}
return;
}
ttq.track(eventName, data);
lastEventTime = now;
}
// 暴露全局方法用于发送重要事件
window.trackImportantEvent = function(eventName, data) {
throttledTrack(eventName, data);
};
}(window, document, 'ttq');
</script>
<style>
body {
font-family: 'Arial', sans-serif;
max-width: 800px;
margin: 0 auto;
padding: 20px;
color: #333;
}
.product-container {
display: flex;
gap: 30px;
margin-top: 20px;
}
.product-image {
width: 300px;
height: 300px;
object-fit: cover;
border: 1px solid #ddd;
border-radius: 5px;
}
.product-info {
flex: 1;
}
.product-title {
font-size: 24px;
margin-bottom: 10px;
}
.product-price {
font-size: 28px;
color: #e74c3c;
margin: 15px 0;
}
.product-description {
line-height: 1.6;
margin-bottom: 20px;
}
.add-to-cart {
background-color: #3498db;
color: white;
border: none;
padding: 12px 25px;
font-size: 16px;
border-radius: 4px;
cursor: pointer;
transition: background-color 0.3s;
}
.add-to-cart:hover {
background-color: #2980b9;
}
.quantity-selector {
margin-bottom: 20px;
}
.quantity-selector label {
margin-right: 10px;
}
.quantity-selector input {
width: 60px;
padding: 8px;
border: 1px solid #ddd;
border-radius: 4px;
}
</style>
</head>
<body>
<div class="product-container">
<div class="product-image-container">
<img src="https://via.placeholder.com/300" alt="示例商品" class="product-image">
</div>
<div class="product-info">
<h1 class="product-title">示例商品名称</h1>
<div class="product-price">¥99.00</div>
<div class="quantity-selector">
<label for="quantity">数量:</label>
<input type="number" id="quantity" name="quantity" min="1" value="1">
</div>
<button class="add-to-cart" onclick="addToCart()">加入购物车</button>
<div class="product-description">
<h3>商品描述</h3>
<p>这里是商品的详细描述内容。这里可以介绍商品的特点、功能、材质等信息。商品描述应该详细准确，帮助消费者了解商品的全部特性。</p>
<p>示例商品是一款高品质的产品，采用环保材料制作，经过严格的质量检测，确保用户获得最佳的使用体验。</p>
</div>
</div>
</div>
<script>
function addToCart() {
const quantity = document.getElementById('quantity').value;
alert(`已成功将 ${quantity} 件商品加入购物车！`);
// 这里可以添加实际的购物车逻辑，如发送AJAX请求到后端等
ttq.track('Contact');
}
</script>
</body>
</html>