JavaScript 動態生成二維碼：如何實現友盟統計「每個字符顯示一次、複製一次上報一次」

頁面動態生成微信號、二維碼，需對「展示」與「複製」行為分別上報友盟事件。本文剖析原始代碼中隨機選號、DOM 操作、時間戳拼接的邏輯，並給出基於事件代理的精準統計方案。

原始代碼邏輯梳理

// 1. 隨機選取微信號
var arr_wx = ['76999','72999','73999','75999'];
var wx_index = Math.floor(Math.random() * arr_wx.length);
var stxlwx = arr_wx[wx_index];  // 當前顯示的微信號

// 2. 生成二維碼圖片 URL
var stxlewm = "ysj";
function ewmtp() {
    var xhtml = '<img src="qrcodes/' + stxlewm + '.jpg">';
    $(".ewm").html(xhtml);
}
$(function(){
    document.getElementById('qrcode').src = 'qrcodes/'+ stxlewm +'.jpg';
});

// 3. 頁面渲染微信號
document.write(stxlwx);

業務痛點

• 四個微信號輪播展示，但統計上報時「四個一起上報」，無法區分用戶實際看到/複製的是哪個。
• 需求：每個字符（微信號）展示一次上報一次，複製一次上報一次。

解決方案：事件代理 + 動態屬性綁定

步驟 1：賦予每個微信號唯一標識

<b id="weixin1" class="wx-account" data-wx="<%= stxlwx %>"><%= stxlwx %></b>

步驟 2：曝光上報（IntersectionObserver）

const observer = new IntersectionObserver((entries) => {
    entries.forEach(entry => {
        if (entry.isIntersecting) {
            const wx = entry.target.dataset.wx;
            // 友盟曝光事件
            _czc.push(['_trackEvent', '微信號曝光', '展示', wx]);
            observer.unobserve(entry.target); // 只上報一次
        }
    });
}, { threshold: 0.5 });

document.querySelectorAll('.wx-account').forEach(el => observer.observe(el));

步驟 3：複製上報（Clipboard API + 防抖）

document.querySelectorAll('.wx-account').forEach(el => {
    el.addEventListener('click', async () => {
        const wx = el.dataset.wx;
        try {
            await navigator.clipboard.writeText(wx);
            // 友盟複製事件
            _czc.push(['_trackEvent', '微信號複製', '複製', wx]);
            alert('已複製：' + wx);
        } catch (err) {
            // 降級方案
            const textarea = document.createElement('textarea');
            textarea.value = wx;
            document.body.appendChild(textarea);
            textarea.select();
            document.execCommand('copy');
            document.body.removeChild(textarea);
            _czc.push(['_trackEvent', '微信號複製', '複製(降級)', wx]);
        }
    });
});

關鍵點總結

友盟統計代碼接入提醒

• 確保頁面已載入 _czc 對象（友盟異步加載）。
• 事件名稱、標籤統一命名規範，如 ['微信號', '曝光', '76999']。
• 上報前做采樣率控制，避免高並發衝擊統計服務。

通過「數據屬性綁定當前值 + 瀏覽器原生觀察/剪貼板 API」，即可精準實現「所見即所報、所複製即所報」，徹底解決動態內容統計模糊問題。