Html網頁標籤曝光埋點

移動開發過程中經常要用埋點來促進產品的改進,在native端做埋點相對來說簡單一點,比如曝光,在view的類中可以使用顯示回撥來做,但在網頁中要如何做埋點呢,比如要知道一個div標籤的曝光次數應該怎麼做,類比客戶端自然是想知道有沒有類似顯示的回撥,很不幸,Html裡沒有這個事件回撥,但onload是有的,要實現曝光埋點,需要自己實現曝光事件的檢測.以下是實現思路:

曝光,即是標籤從瀏覽器中不可見到可見區域內時觸發,關鍵就是要檢測標籤當前的位置還有當前可見區域的位置.如果這標籤的所表示的區域矩形和可見區域相交,則可以認為標籤被看到.那麼就要分別計算標籤區域大小和座標和可見區域大小和座標.
可見區域座標和大小可以使用window物件獲取scrollTop,scrollLeft和clientWidth,clientHeight來得到.標籤的大小可以通過getElementById來獲取到div物件然後得到相應屬性.為了效率,我們可以先在body載入完後先獲得好標籤的大小和位置,然後在視窗的滾動時實時計算可見區域,並且計算可見區域是否和各個標籤區域相交由此得到標籤是否可見,以下是程式碼:

<!DOCTYPE html>
<html lang="en">
<head>
    <meta charset="UTF-8">
    <title>Title</title>
    <script type="text/javascript">
    // 為window設定滑動監聽
    window.onscroll = function() {
        // 可見區域頂部座標
        var scrollTop = document.body.scrollTop || document.documentElement.scrollTop;
        // 可見區域底部座標
        var scrollBottom = scrollTop + window.innerHeight;
        // 計算哪些標籤在可見區域
        var found = "";
        for (var i = 0; i < positions.length; i++) {
            var item = positions[i];
            // 移動端一般內容沒有左右滑,簡單起見,不考慮寬度,只考慮豎直方向是否相交
            if ( scrollTop < (item[1] + item[3]) && scrollBottom > item[1]) {
                console.log((i + 1) + " in screen")
                found += ((i + 1) + ",")
            } 
        }
        // 將結果顯示在頁面上
        document.getElementById("info").innerHTML = found + "in screen";
    }
</script>
<style type="text/css">
    .span {
        text-align: center;
        font-size: 50pt;        
    }
</style>
</head>

<body id="body">
    <div id="0" style="width: 200px; height: 500px; background-color: #FF00FF"><div align="center"><span class="span">1</span></div></div>
    <div id="1" style="width: 200px; height: 500px; background-color: #00FFFF"><div align="center"><span class="span">2</span></div></div>
    <div id="2" style="width: 200px; height: 500px; background-color: #FFFF00"><div align="center"><span class="span">3</span></div></div>
    <div id="3" style="width: 200px; height: 500px; background-color: #EE00EE"><div align="center"><span class="span">4</span></div></div>
    <div id="4" style="width: 200px; height: 500px; background-color: #EEEE00"><div align="center"><span class="span">5</span></div></div>
    <div id="5" style="width: 200px; height: 500px; background-color: #EE00EE"><div align="center"><span class="span">6</span></div></div>
    <div id="6" style="width: 200px; height: 500px; background-color: #DD00DD"><div align="center"><span class="span">7</span></div></div>
    <div id="7" style="width: 200px; height: 500px; background-color: #DDDD00"><div align="center"><span class="span">8</span></div></div>
    <div id="8" style="width: 200px; height: 500px; background-color: #00DD00"><div align="center"><span class="span">9</span></div></div>
    <div id="info" style="position: fixed; bottom: 0px; right: 0px; font-size: 30pt; width: auto; height: auto; background-color: #AAAAAA"></div>
</body>
<script type="text/javascript">
    // 獲取各個標籤位置和大小 
    var positions = [];
    for (var i = 0; i < 9; i++) {
        //console.log(i.toString());
        var div = document.getElementById(i.toString());
        console.log(div.scrollWidth)
        positions.push([div.offsetLeft, div.offsetTop, div.clientWidth, div.clientHeight]);
    }
    console.log(positions)

</script>
</html>

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59

Html網頁標籤曝光埋點

相關文章