Show Menu
主題×

建立事件型規則的條件

條件決定觸發事件型規則的時機。
  1. 選取您要追蹤的互動類型,例如滑鼠點按或表單提交。
    For more information, see Event Types .
  2. 視需要啟用下列選項:
    元素
    說明
    延遲連結啟動
    如果事件會啟動連結,但您想要將連結延遲到事件有時間觸發才啟動,請啟用此選項。
    將事件處理程式直接套用至元素
    將事件處理程式套用至已鎖定作為目標的特定元素。此設定受繫於瀏覽器中的事件反昇與分層概念。
    For example, when you click an image inside an anchor tag like <a href="abc.html"><img src="xyz.png"/></a> , you might expect the click to be associated with the anchor tag, because the tag is in the bubble stream. However, when you inspect the click in the developer tools, the click may actually affect only the <img> tag. To ensure that the event is handled correctly, associate the click with the <img> tag and do not depend on the browser to bubble up the click to a parent element. An event like a click can potentially bubble up to <body> . 請務必瞭解事件實際綁定到的位置,並明確鎖定此位置作為目標,以確保規則可正確觸發。
    事件反昇 ​意思是事件會先由最內層的元素擷取與處理,然後再傳播到外層元素。
  3. 指定您要追蹤的標籤名稱,以及標籤中其他您要比對的屬性。
    See Using the CSS Selector for information about finding the correct element tag.
  4. 選取並設定您想要綁定到規則的任何其他準則或條件類型。
  5. 指定與事件反昇有關的偏好設定。
    事件反昇是 HTML DOM 中傳播事件的一種方式。
    故障
    解決方法
    希望所識別之規則選擇器之子項元素上的相關互動要觸發規則。
    允許子項元素上的事件反昇
    希望在子項元素已自行觸發事件時防止事件反昇。
    若子項元素已觸發事件,則不允許。
    不希望所識別之規則選取器的事件超越事件階層中的元素本身。
    不允許事件向上反昇至父級

事件類型

內建事件類型的清單和每個類型的定義方式。
類別
事件
定義
滑鼠
click
在元素上按下並放開指標裝置按鈕。
mouseover
指標裝置移至已附加接聽器的元素或至它的其中一個子項。
鍵盤
keypress
按下某個按鍵,且該按鍵一般會產生字元值 (改為使用輸入)。
表單
focus
元素接收到焦點 (未出現氣泡)。
blur
元素失去到焦點 (未出現氣泡)。
提交
提交了表單。
變更
元素失去焦點,並且其值自取得焦點之後變更。
HMTL5 影片
已結束
因為已到達媒體的結尾,播放已停止。
loadeddata
媒體完成載入的第一個視訊框。
play
播放開始。
pause
播放已暫停。
stalled
使用者代理程式嘗試擷取媒體資料,但資料未如預期傳入。
volumechange
數量已變更。
% 完成
發出對總計播放時間的指定百分比指定的事件。例如,輸入 10% 指出僅在已播放了影片總長度的 10% 時觸發此規則。
完成時間
發出對播放時間的指定期間指定的事件。例如,輸入 10 指出僅在已播放了影片總長度的 10 秒時觸發此規則。
行動
orientationchange
裝置的方向 (直向/橫向) 已變更。
zoomchange
在行動裝置上執行收縮或擴大手勢時。
瀏覽器
tab focus
當內容取得焦點時觸發事件。
tab blur
當內容失去焦點時觸發事件。
其他
custom
DOM 上已觸發自訂事件。Select Custom from the Event Type drop-down list, then specify the custom event name. 如需詳細資訊,請參閱 Mozilla 開發人員網路上的 CustomEvent
enters viewport
當元素第一次進入訪客的視圖時。如果元素在頁面載入時立即在視圖中,則會立即觸發規則。如果元素在捲動之後進入視圖,之後會觸發規則。可以在規則中指定選用的延遲,決定元素必須在視圖中多久時間,才會觸發事件 (預設值為 1 秒)。
element exists
指定選擇器的元素變為存在時,因為它位於頁面標記中或稍後動態注入。每個規則僅會觸發一次。
pushState 或 hashchange
URL 結尾的 URL 路徑或雜湊 (片段識別碼) 變更。 pushState hashchange 事件可搭配單頁應用程式 (SPA) 使用,在其中頁面不會重新載入但其內容會變更。通用開發架構,可用來建立包括 Angular 和 React 的 SPA。此事件類型可讓您建立事件型規則,而不需仰賴於開發人員。這些規則會在 SPA 中的通用功能發生時觸發,例如: URL 路徑會根據使用的 HTML5 歷程記錄 pushState API 變更。 ​如需有關使用 pushState 的詳細資訊,請參閱 Mozilla 開發人員網路上的 新增和修改歷史項目 雜湊由於使用者變更在頁面上的視圖或位置變更。 ​如需有關使用 hashchange 的詳細資訊,請參閱 Mozilla 開發人員網路上的 hashchange
經過的時間
值 (以秒為單位)。在經過指定的秒數之後,會觸發事件。
dataelementchanged
日期元素已變更。此事件可讓您選取要用作觸發的特定資料元素。For more information on a possible use case, see Add Adobe Experience Manager ContextHub Tool .

Using the CSS selector

Use the CSS Selector to quickly and easily select CSS elements to use as triggers for event-based rules without leaving the DTM rule builder.
DTM 的一個最大優點是可以在您的網站上將行為或頁面互動的事件關閉。不過,尋找需要的 CSS 元素以併入在您的規則中,有時既困難又耗時。

Example with unique element

做為範例,我們要建立可在使用者按一下網站頂端的「登入或註冊」連結時觸發的規則,如下圖示所。此範例很簡單,因為「登入或註冊」連結在 CSS 中沒有類似的元素。
The more complex example described below illustrates how to use the CSS Selector when there are many similar elements on the page, such as the tabs along the top ("Men's," "Women's," "Equipment," and so forth).

若要使用 CSS 選擇器:

  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
    In this example, we are creating an event-based rule that uses the Click event type to trigger the rule when users click the "Sign in or Register" link.
  2. Specify the website's URL, then click Load .
    盡量將您要關閉的網頁專屬。請注意,視您的網站和其架構而定,CSS 樣式表可能從一個頁面變更為另一個。進行實驗來瞭解樣式表變更的頻率很有幫助。
    網站現在會在 iFrame 中載入,並將 CSS 選擇器介面工具集內嵌。移至不同的元素來取得工具運作情況的外觀。
    If we were creating this rule without using the CSS Selector, we would inspect the desired page element to determine the proper CSS to use. Using the CSS Selector, simply click the element on the page that we want to trigger the rule.
  3. Click Sign In or Register .
    當您按一下要選擇器符合的頁面元素時,它會轉變為綠色。The CSS Selector then generates a minimal CSS selector for that element.
    請注意,底端的面板包含所選取元素的相關資訊和一個按鈕,用於傳送資訊至 DTM。
    The number in parenthesis next to Clear indicates the number of items selected. 在此範例中,「登入或註冊」連結在指定的頁面上沒有任何與其類似的項目,因此顯示「1」。Click Clear to remove selected items. Click Toggle Position to move the panel to the top or bottom of the iFrame as desired. 按一下 ? to view help information about the CSS Selector.
  4. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  5. Finish configuring the rule as described in Create conditions for event-based rules .
    Without writing any code or inspecting elements, we have created an event-based rule that triggers when users click Sign In or Register .

Example with similar elements

現在,假設您想要建立規則,當使用者按一下頂端或您的網站上的「男性」索引標籤時,就會觸發此規則。此範例與以上討論的簡單範例之間的差別為,「男」索引標籤在頁面上有許多類似元素。
  1. Access the CSS Selector widget within DTM by clicking the Target icon while creating a rule .
  2. Specify the website's URL, then click Load .
  3. 按一下「男」索引標籤來選取它。
    請注意,已選取頁面上的許多元素,並且以黃色強調顯示。The number next to Clear in parenthesis is 28 in this example, which means there are 28 elements on the page that use the "a" tag.
    我們要在使用者按一下「男」連結時觸發規則,因此我們需要取消選取其他類似元素。
    移至任何類似、強調顯示的元素 (例如「女」),您將注意到元素周圍顯示紅色方塊。
    當您按一下要選擇器符合的頁面元素時,它會轉變為綠色。The CSS Selector then generates a minimal CSS selector for that element. 此外,選擇器會以黃色將符合該元素的項目強調顯示。The CSS Selector starts out broad and then lets you narrow your selection.
    按一下強調顯示的元素來拒絕它 (紅色),或按一下未強調顯示的元素來新增它 (綠色)。透過選取和拒絕的這個程序,最終可以得到適合您的需求的理想 CSS 選擇器。按下 Shift 同時移動滑鼠,可讓您在其他已選取元素內選取元素。
  4. 按一下具有紅色方塊的元素 (Women's) 來取消選取它和所有其他類似元素。
    Notice that the number in parenthesis next to Clear is now 1.
  5. Click Send to DTM to copy the CSS into the Element Tag or Selector field within DTM.
  6. Finish configuring the rule as described in Create conditions for event-based rules .

CSS Selector limitations

The CSS Selector is in Beta and might not work well for some sites due to technical limitations.

Dynamically populate variables

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

例如,假設您的搜尋結果頁面具有外部網站的多個連結。您想要追蹤按下的是哪一個,方法為動態填入所按下元素的​ id
Example Link: <a id='myFirstLink' href='www.exampleLink.com'>
若要實現此目標,請建立事件型規則,在頁面上觸發按一下連結的動作。Then, within the Analytics section of the rule, set the eVar to %this.id% .
For non-standard attributes, you can similarly leverage the JavaScript function this.getAttribute() by wrapping it in '%' characters, as follows:
%this.getAttribute(attributeName)%

例如,假設您有與先前範例所示類似的搜尋結果頁面。不過,這些連結包含非標準屬性, loc ​您想要動態地根據按下的連結將它設為 eVar。
Example link: <a id='myFirstLink' loc='top' href='www.exampleLink.com'>
若要實現此目標,請建立事件型規則,在頁面上觸發按一下連結的動作。Then, within the Analytics section of the rule, set the eVar to %this.get Attribute(loc)% .
如果您不確定需要的屬性為標準或非標準,請參考 w3schools.com 以瞭解標準 HTML 屬性的詳細資訊。不過,若有疑問,您可以使用非標準​ getAttribute() ​格式,其在兩種情景中都可行。
此功能可用於動態標籤管理規則欄位中,包括:

Analytics variables

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

Custom script

亦可以在自訂代碼中使用一般 JavaScript 參考標準屬性。