利用空白gif圖片，實現資料上報，資料埋點

摘要： 前言 利用空白gif圖片，實現資料上報，資料埋點。開發中經常需要統計頁面點選，曝光，包括一些資料埋點。當然，埋點資料上報的方式有很多，下面介紹純css的方式和一句話js方式。 純css方式 純css方式實現資料上報很簡單。原理就是利用css屬性，但是弊端也比較明顯，就是點選只能載入...

前言

利用空白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，因為相同的圖片，瀏覽器僅僅渲染一次。詳情請看之前文章： https://www.haorooms.com/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向伺服器傳送埋點資料。如下圖：

這樣就可以精準的獲取使用者點選的資料了。

同理，曝光資料等，也可以這麼獲取。

檢視案例，請點選

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