本文會說明如何在您的網站使用自訂事件,觸發動態標籤管理 (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 中接聽的規則。

  1. 新增事件型規則。

  2. 為新增的規則命名。

  3. 選取自訂 事件類型,然後輸入在上述範例中定義為 addToCart 的事件名稱。

    Screen-Shot-2015-07-10-at-12.55.24-PM
  4. 定義會使用本事件的標籤或元素。使用 CSS 選取器,此處為 #minicart

    Screen-Shot-2015-07-10-at-12.56.44-PM
  5. 設定規則以觸發適當的指標。

有問題嗎?

若有任何關於本文或其他 DTM 主題的問題,可造訪 DTM 社群論壇。您可以在論壇詢問問題、參與討論,並取得各種解決方案的最新資訊。

特別感謝 Disruptive Advertising 的 Adam。他慷慨地允許我們在本文中使用他的部分部落格文章內容。 

此産品由 Creative Commons Attribution-Noncommercial-Share Alike 3.0 Unported License 授權  Creative Commons 條款未涵蓋 Twitter™ 與 Facebook 文章。

法律說明   |   線上隱私權政策