用 CSS 實現 Tracking

最近看到幾個使用 CSS 做追蹤的小技巧,在這也記錄一下 XD

  • 使用者滑鼠移動到特定元素時
#target:hover::after {
    content: url("track.php?action=hover");
}
  • 使用者點擊特定連結時
#link:active::after {
    content: url("track.php?action=link_clicked");
}
  • 特定 browser 偵測(e.g. chrome)
@supports (-webkit-appearance:none) and (not (-ms-ime-align:auto)){
    #chrome_detect::after {
        content: url("track.php?action=browser_chrome");
    }
}
  • 字體支援度偵測 (e.g. 如果不支援 Calibri 字體)
/** Font detection **/
@font-face {
    font-family: Font1;
    src: url("track.php?action=font1");
}

#font_detection1 {
    font-family: Calibri, Font1;
}
  • checkbox 被選取時
#checkbox:checked {
    content: url("track.php?action=checkbox");
}

以上是幾個可能比較常用的追蹤時機,比較適用在特定環境偵測的情境下.

實務上通常是配上一個 unique 的使用者識別代號,相較於普遍使用的 js 追蹤技術還是有些地方需要修改及調整 XD

參考資料:

Leave a Reply