上週，全明星 Adob​​e 動態標籤管理團隊為 DTM 基於事件的規則添加了一些有吸引力的新功能。 您可以使用 2 種基於事件的規則的新事件類型。

1. 風俗
2. pushState 或 hashchange

閱讀以下部分以了解有關每種事件類型的更多信息。

基於事件的規則：自定義

首先，讓我們定義一個自定義事件。 讓我們看一下 DTM 中其他基於事件的規則的幾個示例。 以下是基於事件的規則的事件類型列表。

創建基於事件的規則時，您可以針對特定的默認事件進行設置。 每個瀏覽器（甚至 Internet Explorer）都有可以針對特定操作觸發的默認事件。 一些簡單的是：

• 鼠標點擊
• 鼠標懸停（懸停在頁面上的某處）
• 表單域焦點（光標進入表單域內部）
• 表單域模糊（光標離開表單域）
• 表單提交
• ETC。

這些都是有道理的； 它們是我們每天在網絡上所做的事情。 有時您需要跟踪某些內容，但幾乎不可能正確完成。 這就是我喜歡使用 JavaScript 事件的原因。 將事件想像成無線電波。 他們廣播給每個人都能聽到，但你必須調到正確的頻率才能聽到。 如果您廣播而沒有人在聽，沒什麼大不了的（不要告訴廣播廣告商）。 與事件相同：您可以觸發一個事件，如果沒有監聽它，它不會導致任何問題或拋出任何錯誤。 如果你監聽一個從未發生過的事件，它也不會導致任何問題或拋出任何錯誤。

為什麼這很重要？ 跟踪操作的一種舊方法是創建一個自定義 JavaScript 函數然後調用它，或者實現一組非常具體的代碼，這些代碼要么特定於標籤管理系統，要么特定於其他代碼庫。 但是，如果該功能以某種方式被刪除或重命名怎麼辦？ 您會遇到有時會破壞站點的 JavaScript 錯誤。 事件解決了這個問題。

如果您熟悉 DTM 的直接調用規則，您可能會問自己“為什麼不直接使用直接調用規則？” 一個有效的問題。 問題是直接調用規則建立了對 DTM 的依賴。 如果我是一名開發人員並且有人告訴我在我的代碼中放入一堆引用 _satellite.track 的代碼，我會質疑它並且很可能會拒絕！ 相反，您可以使用一個沒有依賴關係的事件。

為了能夠收聽一個事件，你必須先觸發一個。 事件應由您的開發人員在網站代碼中定義。 確定何時何地使用它可能有點棘手，但一個簡單的經驗法則是，如果它是您想要跟踪的東西，並且您無法使用預定義的 DTM 事件類型來跟踪它，請使用自定義事件。 我們可以從 Mozilla 找到一些關於如何執行此操作的有用信息。 有兩種基本事件類型：

• 事件——觸發某事發生而不發送任何關於該事件的額外數據
• CustomEvent——向事件中添加一些數據

我將使用帶有自定義事件的示例，因為它們允許您添加數據。 假設我們有一個購物車，當您向購物車添加商品時，它使用 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);

在上面的代碼中，您可以看到我正在引用名為“data”的對像中的數據。 我將自定義“詳細信息”數據定義為一個對象，然後我可以在偵聽事件時引用它。 構建事件後，我會在特定元素上觸發它，在本例中是頁面上 id 為“minicart”的元素。 現在我有一個自定義事件正在廣播給任何想听的人。

接下來，我將配置一個規則以在 DTM 中偵聽：

1. 添加新的基於事件的規則
2. 給它起個名字
3. 選擇事件類型“custom”並輸入事件名稱，我們定義為“addToCart”
   
4. 定義將要發生此事件的標籤或元素。 使用 CSS 選擇器，這將是“#minicart”
   
5. 配置規則。 這就是它變得很酷的地方。 您可以使用事件中提供的“細節”，甚至可以將其用作對象。 感謝 ADOBE！ 在這裡，我發送了一個包含我想要的數據的 Google Analytics（分析）事件。 您可以使用 %event.detail% 引用數據，或者如果您有一個對象，您可以將其引用為 %event.detail.<<name>>%。 請參見下面的示例。
   
   我可能永遠不會發送這樣的事件，但您了解如何使用它的要點。 如果您需要在自定義代碼中使用它，比如說 Adob​​e Analytics 工具，您可以將其引用為 _satellite.getVar(“%event.detail.product_id%”)。 很棒的醬！！！

這不是一本小說，但我想展示這個功能有多棒。 儘管我喜歡直接調用規則，但它們在我的實現中處於次要地位，而自定義事件則處於被動地位。

pushState 或 hashchange

推送狀態

現在讓我們看看 pushState。 它基本上允許您更新頁面/站點的 URL，而無需實際加載新頁面。 它本身什麼都不做，但它允許使用單頁應用程序。 有幾個框架利用了這個特性。 所以，如果您的站點是這樣構建的，那麼 pushState 功能會非常方便！

設置規則時，您當然會選擇新的事件類型。

不需要 CSS 選擇器來進一步定義它。 但是，您需要查看一些條件。 如果您只是查看新 URL，您將使用的主要一個是路徑。 就是這樣！

散列變化

感謝 Twitter 我們都知道哈希是什麼（哈希標籤），所以 hashchange 必須指的是對哈希的更改！ 散列的妙處在於您可以隨心所欲地更改它，而且它不會導致頁面加載。 哈希可以用於多種用途，因此我們不會深入探討為什麼會有人使用它。 在 pushState 出現之前，使用 AJAXy 或單頁站點的新內容更新散列並不少見。

要配置新規則，請選擇與 pushState 相同的事件類型。 唯一的區別是您現在可以將散列視為您的標準。 例如：

結論

Adobe DTM 是頂級標籤管理系統，幸運的是您的 Adob​​e 客戶，它是免費的！ 使用這些有用的技巧來幫助您利用它的力量和潛力，並經常回來查看更多信息！ 如果您正在尋求網站分析方面的幫助，請聯繫我們，我們將免費發送一份關於如何幫助您的建議！