Show Menu
主題×

建立事件型規則條件

條件決定觸發事件型規則的時機。
  1. 選取您要追蹤的互動類型,例如滑鼠點按或表單提交。
    如需詳細資訊,請參 閱事件類型
  2. 視需要啟用下列選項:
    元素
    說明
    延遲連結啟動
    如果事件會啟動連結,但您想要將連結延遲到事件有時間引發才啟動,請啟用此選項。
    將事件處理常式直接套用至元素
    將事件處理常式套用至已定位的特定元素。 此設定與瀏覽器中的事件反昇與分層概念相連結。
    例如,當您按一下錨點標籤內的影像時 (例如 <a href="abc.html"><img src="xyz.png"/></a> ),因為標籤位於反昇資料流中,您可能預期此點按會與該錨點標籤相關聯。不過,當您在開發人員工具中檢查此點按時,該點按可能實際只影響 <img> 標籤。若要確保事件受到正確處理,請將點按與 <img> 標籤建立關聯,而不依賴瀏覽器將點按向上反昇至父級元素。事件 (如點按) 可能會向上反昇至 <body> 。請務必瞭解事件實際綁定到的位置,並明確鎖定此位置作為目標,以確保規則可正確引發。
    反升 :表示事件先由最內層元素擷取並處理,然後傳播至外層元素。
  3. 指定您要追蹤的標籤名稱,以及標籤中其他您要比對的屬性。
    如需 尋找正確元素標籤的相關資訊 ,請參閱使用CSS選擇器。
  4. Select and set up any additional criteria or condition types you wish to bind to the rule.
  5. 指定與事件反昇有關的偏好設定。
    事件反升是HTML DOM中事件傳播的一種方式。
    問題
    解決方法
    希望所識別之規則選擇器之子項元素上的相關互動要引發規則。
    允許子元素上的事件反升
    希望防止子元素已觸發其自身事件時反升。
    不允許子元素已觸發事件。
    不要讓您所識別的規則選擇器的事件超出事件階層中的元素本身。
    不允許事件向上泡泡至父項

事件類型

內建事件類型的清單,以及如何定義每種類型。
類別
事件
定義
滑鼠
click
在元件上按下和釋放指向裝置按鈕。
穆塞弗
將指點設備移動到具有監聽器的元素上或其子項上。
鍵盤
按鍵
按下鍵,該鍵通常會生成字元值(請改用輸入)。
表單
焦點
元素接收焦點(未氣泡)。
模糊
元素失去焦點(未泡泡)。
提交
會提交表格。
變更
元素會失去焦點,其值會隨著焦點而改變。
HMTL5視訊
結束
播放因到達媒體結尾而停止。
loadeddata
媒體的第一個畫格已載入完畢。
play
開始播放。
暫停
播放暫停。
停止
使用者代理正嘗試擷取媒體資料,但資料未預料到。
volumechange
卷已更改。
% 完成
發出指定百分比的事件,以佔總播放時間。 例如,輸入10%表示只有在播放視訊總長度的10%時,才會觸發此規則。
時間完成
發出指定播放時間長度的事件。 例如,輸入10表示只有在播放視訊總長度的10秒時,才會觸發此規則。
行動
方向變更
裝置的方向(縱向/橫向)已變更。
zoomchange
當在行動裝置上執行夾捏或展開手勢時。
瀏覽器
標籤焦點
當內容獲得焦點時觸發事件。
標籤模糊
當內容失去焦點時觸發事件。
其他
自訂
DOM上已觸發自訂事件。 Select Custom from the Event Type drop-down list, then specify the custom event name. For more information, see CustomEvent on the Mozilla Developer Network.
進入視區
元素首次進入訪客檢視時。 如果元素在頁面載入時立即在檢視中,規則會立即觸發。 如果元素在捲動後出現在檢視中,則會觸發規則。 可在規則中指定選擇性的延遲,以決定在觸發事件之前,元素必須檢視多久的時間(預設值為1秒)。
元素存在
當指定選擇器的元素出現時(因為它位於頁面標籤中或稍後動態插入)。 每個規則只觸發一次。
pushState或雜湊變更
URL路徑或URL結尾的雜湊(片段識別碼)已變更。 該 pushState 或事 hashchange 件可與單頁應用程式(SPA)搭配使用,其中頁面不會重新載入,但其內容會變更。 可用來建立SPA的常用開發架構包括Angular和React。 此事件類型可讓您建立事件型規則,而不需依賴開發人員。 當SPA中的常見函式發生時,會觸發這些規則,例如:URL 路徑會根據HTML5歷史記錄API的使用而 pushState 變更。 如需有關使用的詳細 pushState 資訊,請 參閱Mozilla Developer Network上的Adding and Modifying History Entries 雜湊因使用者變更頁面上的檢視或位置而變更。 如需使用的詳細資 hashchange 訊,請參 閱Mozilla Developer Network上的Hashchange
傳遞時間
以秒為單位的值。 在指定秒數過後觸發事件。
dataelementchanged
日期元素已變更。 此事件可讓您選取要用作觸發器的特定資料元素。 如需可能使用案例的詳細資訊,請參 閱「新增Adobe Experience Manager ContextHub工具」

使用CSS選擇器

使用 CSS Selector 快速輕鬆地選取CSS元素,以用作事件型規則的觸發器,而不需離開DTM規則產生器。
DTM的最大優點之一,就是能夠在您的網站上事件行為或頁面互動。 不過,尋找要包含在規則中的CSS元素有時很困難,而且很耗時。

具有唯一元素的示例

例如,我們想要建立規則,當使用者按一下我們網站上的「登入或註冊」連結時觸發,如下圖所示。 此範例很簡單,因為「登入或註冊」連結在CSS中沒有任何類似的元素。
下面描述的更複雜範例說明如何使用頁面上有許多類似元素,例如頂端的標籤(「男性」、「女性」、「設備」等)。 CSS Selector

若要使用CSS選擇器:

  1. 建立規 CSS Selector 則時按一下圖示,以 Target 存取 DTM中的介面工具集
    在此範例中,我們建立事件型規則,當使用者按一下「登入或註冊」 Click 連結時,使用事件類型來觸發規則。
  2. 指定網站的URL,然後按一下 Load
    盡可能針對您要關閉的網頁加以特定處理。 請注意,CSS樣式表可能會依您的網站及其架構而從一個頁面變更。 嘗試檢視樣式表的變更頻率,會很有幫助。
    現在,網站已載入iFrame,並內嵌CSS選擇器介面工具集。 將滑鼠移至不同的元素上,即可體驗工具的運作方式。
    如果我們建立此規則時未使 CSS Selector用,我們會檢查所要的頁面元素,以判斷要使用的正確CSS。 使用 CSS Selector時,只需按一下要觸發規則之頁面上的元素。
  3. 按一下「 Sign In or Register 」。
    當您按一下想要選取器符合的頁面元素時,它會變成綠色。 然後 CSS Selector ,該元素會產生最小的CSS選擇器。
    請注意下方的面板,其中包含選取元素的相關資訊,以及將資訊傳送至DTM的按鈕。
    旁括弧中的數字 Clear 表示選取的項目數。 在此範例中,「登入或註冊」連結在指定的頁面上沒有類似的項目,因此會顯示「1」。 按一 Clear 下可移除選取的項目。 按一 Toggle Position 下,視需要將面板移至iFrame的頂端或底部。 按一下 ? 的雙曲餘切值 CSS Selector。
  4. 按一 Send to DTM 下,將CSS複製至DTM Element Tag or Selector 中的欄位。
  5. 依照建立事件型規則的條 件中所述,完成規則設定
    我們不需編寫任何程式碼或檢查元素,就可建立以事件為基礎的規則,讓使用者按一下時觸發 Sign In or Register

包含類似元素的範例

現在,假設您要建立規則,當使用者按一下頂端或您網站的「男性」標籤時,就會觸發此規則。 此範例與上述簡單範例之間的差異在於,「男性」標籤在頁面上有許多類似的元素。
  1. 建立規 CSS Selector 則時按一下圖示,以 Target 存取 DTM中的介面工具集
  2. 指定網站的URL,然後按一下 Load
  3. 按一下「男性」頁籤以選擇它。
    請注意,頁面上的許多元素都已選取,並以黃色反白顯示。 在此範例中, Clear 括弧旁的數字為28,這表示頁面上有28個元素使用"a"標籤。
    我們想要在使用者按一下「男性」連結時觸發規則,因此我們必須取消選取其他類似元素。
    將滑鼠指標暫留在任何類似、反白顯示的元素上(例如「Women's」),您會注意到元素周圍會顯示紅色方塊。
    當您按一下想要選取器符合的頁面元素時,它會變成綠色。 然後 CSS Selector ,該元素會產生最小的CSS選擇器。 此外,選擇器會以黃色反白顯示所有符合該元素的項目。 開始 CSS Selector 是廣泛的,然後可讓您縮小選擇範圍。
    按一下反白顯示的元素以拒絕它(紅色),或按一下未反白顯示的元素以新增它(綠色)。 透過這個選擇和拒絕的程式,您就可以根據自己的需求,提供最佳的CSS選擇器。 在移動滑鼠時按Shift可讓您在其他選定元素內選擇元素。
  4. 按一下帶有紅色方塊(女性)的元素,以取消選取它和所有其他類似元素。
    請注意,旁括弧中的數字 Clear 現在為1。
  5. 按一 Send to DTM 下,將CSS複製至DTM Element Tag or Selector 中的欄位。
  6. 依照建立事件型規則的條 件中所述,完成規則設定

CSS選擇器限制

測試 CSS Selector 版本中,由於技術限制,某些網站可能無法正常運作。

動態填入變數

您可以動態指派元素屬性至變數。
若要動態指派元素屬性至變數,請使用下列語法:
%this.attributeName%

例如,假設您有一個搜尋結果頁面,其中包含多個外部網站的連結。 您想要透過動態填入點按元素的eVar來追蹤點 id 按的連結。
範例連結: <a id='myFirstLink' href='www.exampleLink.com'>
若要完成此作業,請建立事件型規則,以觸發在頁面上點選連結。 然後,在規 Analytics 則的區段內,將eVar設為 %this.id%
對於非標準屬性,您也可以類似地將JavaScript函式 this.getAttribute() 封裝為'%'字元,如下所示:
%this.getAttribute(attributeName)%

例如,假設您有類似的搜尋結果頁面,如上例所示。 但是,這些連結包含非標準屬性, loc 您想根據點按的連結動態設定為eVar。
範例連結: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
若要完成此作業,請建立事件型規則,以觸發在頁面上點選連結。 然後,在規 Analytics 則的區段內,將eVar設為 %this.get Attribute(loc)%
如果您不確定所要的屬性是標準或非標準,請參考 w3schools.com ,以進一步瞭解標準HTML屬性。 但是,如果有疑問,您可以使用非標準格 getAttribute() 式,這在任何一種情況下都適用。
此功能可用於動態標籤管理規則欄位,包括:

Analytics 變數

  • Adobe Analytics:
    • 連結追蹤、頁面資料、階層
    • 全域變數和事件
  • Google Analytics
    • 頁面檢視、事件、自訂變數

自訂指令碼

標準屬性也可以在自訂程式碼中使用一般JavaScript來參考。