Skip to content

用 CSS 實現 Tracking

Published: at 10:53 AM (1 min read)

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

#target:hover::after {
  content: url("track.php?action=hover");
}
#link:active::after {
  content: url("track.php?action=link_clicked");
}
@supports (-webkit-appearance: none) and (not (-ms-ime-align: auto)) {
  #chrome_detect::after {
    content: url("track.php?action=browser_chrome");
  }
}
/** Font detection **/
@font-face {
  font-family: Font1;
  src: url("track.php?action=font1");
}

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

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

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

參考資料: