滑鼠
上次更新時間
2021年4月29日
本文會說明如何在您的網站使用自訂事件，觸發動態標籤管理 (DTM) 規則。
瀏覽器事件
事件是代表網頁發生某種狀況的訊號。開發人員可以利用這些訊號來回應或採取行動。
不妨把事件想像成無線電波。無線電波能廣播給所有人收聽，但您需要調整到正確頻率才可聽到廣播。如果廣播時沒人收聽，那就不會有任何影響。事件也是如此。如果沒有任何事物接聽到事件，即使觸發事件也不會產生任何錯誤。您也可以接聽從來不曾發生的事件，而不會造成任何問題或錯誤。
以下是一些關於 HTML 事件的資源:
在 DTM 中使用事件型規則
建立事件型規則時，您可以將其設定為特定預設事件專用。每個瀏覽器都設有會受特定動作觸發的預設事件，常見事件範例如下:
- 按滑鼠按鍵
- 滑鼠經過 (暫留在頁面項目上方)
- 表格欄位聚焦 (游標移動到表格欄位內)
- 表格欄位模糊 (游標移動到表格欄位外)
- 提交表格
這些事件很好理解，畢竟每天都會有人在網頁中執行這些事件。如果瀏覽器預設事件不允許您追蹤希望追蹤的項目，您可以改用 JavaScript 事件。
DTM 中內建有哪些事件?
以下為 DTM 事件型規則中內建的事件:
|
|
鍵盤 |
論壇 (僅限英文) |
HTML5 視訊 |
行動裝置 |
其他 |
|---|---|---|---|---|---|
|
click mouseover |
keypress |
focus blur submit change |
ended loadeddata play pause stalled volumechange % complete time complete |
orientationchange zoomchange |
custom enters viewport element exists pushState or hashchange |
自訂事件
您必須先觸發一個事件後才能接聽事件。您的開發人員會在網站代碼中定義事件。有時不容易識別要在何時或何處使用事件。但我們可以遵守一個簡單規則: 如果您想追蹤某個項目，但無法透過預先定義的 DTM 事件類型來追蹤，請使用自訂事件。
觸發事件
如果遇到以下範例中的狀況，請考慮使用能新增資料的自訂事件。假設現在有一個購物車，當您新增項目到其中時會用到 AJAX。此時系統並未載入新的頁面，只是透過快顯視窗或訊息通知您已成功新增項目到購物車。發生這種情形時，您可以建立自訂事件來通知自己精確的新增項目資訊:
var addToCart = new CustomEvent('addToCart', 'detail': {'product_id': data.product.sku, 'quantity': data.product.quantity, 'price': data.product.price.fullPrice});
document.getElementById('minicart').dispatchEvent(addToCart);
以上代碼參考資料取自名為「資料」的物件。自訂「詳細資料」資料定義為物件，可供您在接聽事件時參考。建立事件後，您可以在特定元素上將其觸發。在此案例中，我們選擇頁面上 ID 為「minicart」的元素。如此您就能自訂一個事件，為所有人廣播他們希望瞭解的資訊。
新增自訂事件接聽程式
在 DTM 中，新增自訂事件接聽程式和新增事件型規則一樣簡單。
以下步驟可設定在 DTM 中接聽的規則。
-
新增事件型規則。
-
為新增的規則命名。
-
選取自訂 事件類型，然後輸入在上述範例中定義為 addToCart 的事件名稱。
-
定義會使用本事件的標籤或元素。使用 CSS 選取器，此處為 #minicart。
-
設定規則以觸發適當的指標。
有問題嗎?
若有任何關於本文或其他 DTM 主題的問題，可造訪 DTM 社群論壇。您可以在論壇詢問問題、參與討論，並取得各種解決方案的最新資訊。
特別感謝 Disruptive Advertising 的 Adam。他慷慨地允許我們在本文中使用他的部分部落格文章內容。
