公告:攜程招聘java、前端、測試、產品等,請發簡歷至[email protected],幫內推!

利用空白gif圖片,實現數據上報,數據埋點

1795次瀏覽

前言

利用空白gif圖片,實現數據上報,數據埋點。開發中經常需要統計頁面點擊,曝光,包括一些數據埋點。當然,埋點數據上報的方式有很多,下面介紹純css的方式和一句話js方式。

純css方式

純css方式實現數據上報很簡單。原理就是利用css屬性,但是弊端也比較明顯,就是點擊只能加載一次。例如如下代碼,實現跟蹤botton1和botton2的點擊事件

.button-1:active::after {
    content: url(./haorooms.gif?action=click&id=button1);
    display: none;
}
.button-2:active::after {
    content: url(./haorooms.gif?action=click&id=button2);
    display: none;
}

上面代碼僅僅能跟蹤一次,button1點擊第二次就跟蹤不了了。

因此,在統計按鈕點擊次數的時候,純css方式不是很好實現,除非你用css處理器,less或者sass來寫。每次點擊,動態改變一下gif,因為相同的圖片,瀏覽器僅僅渲染一次。詳情請看之前文章:http://www.sqnjmr.live/post/web_http_request

統計瀏覽器支持css3某個屬性

.any-element {
  background: url(./pixel.gif?grid=0);
}
@supports (display: grid) {
  .any-element {
    background: url(./pixel.gif?grid=1);
  }
}

如上,統計瀏覽器是否支持display: grid

retina屏幕占比統計

.any-element {
  background: url(./pixel.gif?retina=0);
}
@media screen and (-webkit-min-device-pixel-ratio: 2) {
  .any-element {
    background: url(./pixel.gif?retina=1);
  }
}

是否支持某字體

@font-face {
    font-family: anyFontName;
    src: url(../image/pixel.gif?font=unmatch&id=haorooms);
}
.element-with-text {
    font-family: 'Source Han Sans CN', 'anyFontName';
}

js方式數據埋點

上面純css方式比較雞肋,我們常用的方式是js方式,其實js方式實現很簡單,一句話就可以實現。

同樣是點擊埋點。如下:

<button onClick="aa()">haorooms</button>
  <script>
    function aa(){
      new Image().src = './haorooms.gif?ac=haorooms&'+Math.random() 
    }
  </script>

每點擊一次haorooms按鈕,都會通過haorooms.gif向服務器發送埋點數據。如下圖:

enter image description here

上面函數,我們可以改造一下,通過傳入key,value,來進行不同的埋點。最簡單的如下:

    function aa(key,value){
      new Image().src =`./haorooms.gif?${key}=${value}&${Math.random()} `
    }

當然,實際業務中,可能沒有這么簡單,還需要添加各種監控,因此,有時候隨機數就可以不要了~

因此通過這種最簡單的方法,可以精準的獲取用戶點擊的數據了。

同理,曝光數據等,也可以這么獲取。

查看案例,請點擊

注:haorooms.gif是一個真實的圖片,一般是1px*1px大小的空白圖。詳情請看上面案例。

Tags: css數據埋點

相關文章:

任选9场吧