觸發條件

「觸發條件」是在執行階段時由系統判斷為 true 或 false 的條件。觸發條件可附加在代碼中,控制代碼的啟動時機。

簡介

每個代碼都需要至少一個觸發條件才能啟動。系統會在執行階段評估觸發條件;如果符合觸發條件,就會啟動 (或不啟動) 相關代碼。舉例來說,如果代碼的觸發條件為網頁瀏覽事件並設有下列篩選器,那麼代碼會在 example.com 首頁上啟動:

網址等於 example.com/index.html

觸發條件包含一個事件和一或多個篩選器 (不需要使用篩選器的自訂事件則不包含在內)。每個篩選器的形式如下:[變數] [運算子] [值]

變數 運算子
選項包括「網址」和「參照網址」等。 選項包括「等於」和「包含」等。 請提供所需的值。Google 代碼管理工具會比較您提供的值與變數中的執行階段值。

在我們的範例中,系統會在執行階段評估「網址」這個變數。系統已將該變數定義為只包含目前網頁網址,因此會在執行階段比較目前網頁網址與您提供的值「example.com/index.html」,以便決定是否符合觸發條件。

在網頁容器中,您可以啟用內建的變數,例如網頁網址、網頁主機名稱或參照網址。此外,設定點擊的觸發條件時,Google 代碼管理工具會利用內建變數,按照獲得點擊的元素 ID 和類別等項目自動填入變數。有了這些變數後,您就能建構自己最常需要的觸發條件。不過,您也可以自行定義變數,並將其值用於觸發條件篩選器中。詳情請參閱「變數」一文。

代碼管理工具有許多內建的變數可因應常見需求 (例如收集網址、點擊 ID 等)。請務必先在代碼管理工具中啟用內建變數,才能在下拉式選單存取這些變數。瞭解詳情

您可以在一項觸發條件中提供多個篩選器 ([變數] [運算子] [值])。所謂符合觸發條件,是指符合觸發條件中的所有條件。

啟動/封鎖代碼觸發條件

只要符合任一項觸發條件,代碼就會啟用。舉例來說,如果代碼有兩項觸發條件,其中一項用於「所有網頁」,另一項用於「僅限網頁 ABC」,代碼就會在所有網頁上啟用。

如果觸發條件會防止代碼啟用,就會永遠取代另一項觸發條件。舉例來說,如果代碼具有觸發條件「所有網頁」和封鎖觸發條件「網址等於 thankyou.html」,就永遠不會在網頁「thankyou.html」上啟用。

觸發條件類型

在代碼管理工具中啟用的所有代碼都是以事件為基礎。每次代碼管理工具記錄到事件時,就會評估容器中的觸發條件,並據此啟用代碼。代碼只有在發生事件時才能啟用。

事件可以是瀏覽量、按鈕點擊、表單提交或您定義的任何自訂事件。代碼管理工具提供了 6 個內建事件類型,外加一個自訂事件選項。設定觸發條件時,第一個步驟是選取相關的事件類型。內建事件包括:

瀏覽量 (網頁)

這個事件與使用者網路瀏覽器中的顯示網頁相關。您可以透過觸發條件類型下拉式選單進一步設定這個事件,這樣代碼管理工具就會得知是否必須在瀏覽器開始剖析網頁時 (網頁瀏覽)、瀏覽器建構完整個網頁 DOM (DOM 就緒) 後,或網頁完全載入後 (圖片和指令碼等內嵌資源也包含在內) (Window 載入) 立即啟用代碼。如果您的代碼是使用 DOM 或 JavaScript 變數擷取動態值,建議針對採用瀏覽量的觸發條件調整時間。凡是以瀏覽量為基礎並與 DOM 互動來填入變數的代碼,都必須使用「DOM 就緒」做為觸發條件類型,以確保變數設定一致。

點擊 (網頁)

如要在使用者點擊連結或網頁元素時啟用代碼,請選用「點擊」事件類型。

在觸發條件篩選器中,建議您針對預期點擊會發生的網頁指定網址 (或網址模式),以便改善代碼管理工具的成效。

當使用者在符合篩選器的網頁上點擊任何元素時,代碼管理工具將會自動填入下列變數 (前提是您已啟用這些內建變數):

  • 「點擊元素」:獲得點擊的 HTML 元素。
  • 「點擊類別」:元素類別屬性所包含的一組值。
  • 「點擊編號」:獲點擊元素的 ID 屬性。
  • 「點擊目標」:獲點擊元素的目標屬性。
  • 「點擊網址」:獲點擊元素的 HREF 屬性 (如果有的話)。
  • 「點擊文字」:獲點擊元素內的可見文字。

接著,您就可以在點擊觸發條件篩選器中加入這些變數。比方說,如果您在網頁 www.example.com/cart.html 上的按鈕含有下列代碼:

<button type="submit" id="cart-add" class="addToCart" >ADD TO CART</button>

下列觸發條件設定會在使用者點擊代碼所屬按鈕時啟動代碼:

觸發條件設定

「觸發條件類型」:點擊-所有元素
「這項觸發條件的啟動時機」:部分點擊
「點擊 ID」等於 cart-add
「網頁網址」包含 example.com/cart.html

您可以進一步設定採用點擊的觸發條件,指定只監聽一般連結獲得的點擊 (「僅限連結」選項),或是監聽網頁上任何 HTML 元素獲得的點擊 (「所有元素」選項)。

由於瀏覽器通常會在連結獲得點擊後載入新網頁並中斷任何待處理的 HTTP 請求,因此您可以選擇加入一小段間隔時間,讓代碼管理工具啟用的代碼在重新導向至下一頁前能正常執行。「等待代碼」選項會將開啟連結的動作延後至所有代碼都已啟用,或是指定逾時過完為止 (兩者取其先)。

「檢查驗證」選項讓您只在開啟連結的動作有效時才啟用代碼。如果沒有選取該選項,系統就會在每次使用者嘗試點擊連結時啟用代碼。詳情請參閱下方「檢查驗證選項」一節。

元素可見度 (網頁)

使用元素可見度觸發條件,即可在特定一或多個元素進入可見狀態時啟用代碼。所選元素在可視區域進入可見狀態,或是其樣式設為可見 (也就是不隱藏) 時,觸發條件就會啟動。可能會使元素進入可見狀態的動作包括:載入網頁、捲動網頁、在瀏覽器視窗中切換到背景分頁,或是在程式碼中變更元素位置/樣式。

元素可見度觸發條件可根據一或多個元素的可見度啟動。透過「選取方式」選單,您可以決定要使用 ID 屬性還是 CSS 選擇器來選取元素:

  • 「ID」:根據元素的 ID 屬性值選取單一元素。
  • 「CSS 選擇器」:根據指定的 CSS 選擇器模式選取一或多個元素。

接著,決定觸發條件的啟動時機:

  • 「每個網頁一次」:對於每個網頁,觸發條件只會啟動一次。如果在指定的網頁上有多個元素與 ID 或 CSS 選擇器相符,則觸發條件只會在該網頁其中一個元素首次進入可見狀態時啟動。

    如果使用者重新載入網頁或前往其他網頁,則觸發條件會重設,並可根據所選元素的可見度而再次啟動。

  • 「每個元素一次」:對於每個網頁上的每個所選元素,觸發條件只會啟動一次。如果一個網頁有多個元素與 CSS 選擇器相符,這個觸發條件則會在其中一個元素首次在該網頁上進入可見狀態時啟動。

    採用 ID 選取方式時,「每個元素一次」這個選項的運作方式通常與「每個網頁一次」選項相同。如果網頁有多個元素的 ID 都相同,則只有第一個相符元素會啟動這個觸發條件。不過,當您在「進階」設定中啟用了「觀察 DOM 改變情形」選項,而網頁有多個元素的 ID 也都相同時,如果觀察到的 DOM 改變情形是將第一個相符元素移除,這個選項就會使觸發條件再次啟動。

    如果使用者重新載入網頁或前往其他網頁,則觸發條件會重設,並可根據所選元素的可見度而再次啟動。

  • 「每次元素在畫面上顯示時」:每當有相符元素進入可見狀態時,觸發條件就會啟動。舉例來說,如果觸發條件已設為根據 ID 為 foo 的元素可見度來啟動,而使用者向下捲動網頁,讓元素 foo 進入可見狀態,那麼觸發條件就會啟動。如果使用者向上回捲網頁,使得 foo 回到需捲動位置,然後他又再次向下捲動,那麼觸發條件就會再啟動一次。

進階選項

  • 「最低可見百分比」:指定所選元素在畫面中要有多大的部分 (以百分比表示) 處於可見狀態,觸發條件才會啟動。根據預設,元素必須有 50% 的部分位於畫面中,觸發條件才會啟動。舉例來說,如果使用者向下捲動網頁,使得所選元素有一部分進入可視區域,那麼當元素有 50% 的部分位於畫面上時,觸發條件就會啟動。如果將這個欄位的值改成 100,則要等到元素在可視區域中完全 (100%) 處於可見狀態時,觸發條件才會啟動。

  • 「設定畫面持續時間下限」:勾選這個方塊可指定所選元素必須在畫面中顯示多久 (面積比例則以指定的最低可見百分比為準),觸發條件才會啟動。這個選項預設為不啟用,只要所選元素一進入可見狀態,觸發條件就會立即啟動。

    注意:所選元素的畫面持續時間在單一網頁上會累積計算。也就是說,如果某元素在顯示了 5,000 毫秒後離開畫面,然後又回到畫面中停留了 5,000 毫秒,總畫面持續時間就是 10,000 毫秒。要是使用者重新載入網頁或前往其他網頁,觸發條件和畫面持續時間都會重設。

  • 「觀察 DOM 改變情形」:勾選這個方塊,即可讓觸發條件追蹤隨 DOM 改變而顯示的相符元素。

注意:想要設定畫面持續時間下限或觸發條件來觀察 DOM 改變情形,Google 代碼管理工具就必須監控所選元素的狀態。如果一個網頁有多個元素相符,網站效能 (在網頁載入後) 可能會受到影響。為求最佳效能,請確定您的 CSS 選擇器不會比對大量元素,或是改用 ID 做為選取方法。

元素可見度觸發條件啟動後,系統就會自動為下列內建變數填上值:

  • 「可見百分比」:這個數值 (0 到 10) 用來表示觸發條件啟動時,所選元素有多大的比例處於可見狀態。

  • 「畫面持續時間」:這個數值用來表示觸發條件啟動時,所選元素處於可見狀態多久 (以毫秒計)。

注意:您必須先在「變數」畫面中啟用這些內建變數。

此外,您還可以另外設定使用者定義的自動事件變數,在觸發條件啟動時擷取所選元素的相關資訊。

提交表單 (網頁)

如要在使用者提交表單時啟用代碼,請選用「表單」做為觸發條件事件。

在觸發條件篩選器中,建議您針對預期會提交表單的網頁指定網址 (或網址模式),以便改善代碼管理工具的成效。

執行表單提交觸發條件時,系統會自動填入下列變數:

  • 「表單元素」:獲得點擊的表單元素。
  • 「表單類別」:表單類別屬性所包含的一組值。
  • 「表單編號」:表單元素的 ID 屬性。
  • 「表單目標」:表單元素的目標屬性。
  • 「表單網址」:表單元素的 HREF 屬性 (如果有的話)。
  • 「表單文字」:表單內的可見文字。

「等待代碼」選項可讓您將送出表單的動作延後到需要這項觸發條件的所有代碼都已啟用,或是指定逾時過完為止 (兩者取其先)。如果沒有選取該選項,執行速度較慢的代碼可能就無法在系統因使用者提交表單而載入下一頁前啟用。

「檢查驗證」選項可讓您只在表單將成功提交時才啟動代碼。如果沒有選取該選項,系統就會在每次使用者嘗試提交表單時啟動代碼。

記錄變更 (網頁)

以記錄變更事件為基準的觸發條件,會在網址片段 (雜湊) 變更或網站使用 HTML5 pushState API 時啟用代碼。舉例來說,這項觸發條件可在 Ajax 應用程式中啟用追蹤虛擬網頁瀏覽的代碼。

記錄變更事件發生時,代碼管理工具會填入下列變數:

  • 「記錄舊網址片段」:過去的網址片段。
  • 「記錄新網址片段」:現在的網址片段。
  • 「記錄舊狀態」:舊記錄狀態物件,由網站的 pushState 呼叫控制。
  • 「記錄新狀態」:新記錄狀態物件,由網站的 pushState 呼叫控制。

JavaScript 錯誤 (網頁)

發生系統沒有偵測到的 JavaScript 例外 (使用 window.onError) 時,可使用這類觸發條件來啟用代碼;一旦觸發條件啟動,系統就會填入下列變數:

  • 「錯誤訊息」:包含 JavaScript 錯誤訊息文字的字串。
  • 「錯誤網址」:發生錯誤的網址。
  • 「錯誤行號碼」:程式碼中發生錯誤的行號碼。

請注意,「JavaScript 錯誤」觸發條件不會回報 Google 代碼管理工具載入前發生的錯誤,只會回報未偵測到的例外狀況。

捲動深度 (網頁)

若想讓代碼在使用者捲動網頁達一定幅度時啟動,您可以使用捲動深度觸發條件。可用的選項包括:

  • 「垂直捲動深度」:根據使用者「向下」捲動網頁的幅度來啟動。

  • 「水平捲動深度」:根據使用者「向右」捲動網頁的幅度來啟動。

您可以根據垂直捲動深度和水平捲動深度兩者,使用同一個觸發條件來啟動代碼。方法很簡單,只要在設定足以啟動觸發條件的捲動深度時 (以像素或網頁高度和寬度百分比來表示),輸入一或多個正整數 (以半形逗號分隔) 來代表百分比或像素值就行了。

舉例來說,如果您選擇以百分比做為垂直捲動深度,就可以輸入 10、50 和 90,將 10%、50% 和 90% 的網頁高度設為觸發條件的啟動點。如果這個觸發條件是套用到代碼,而使用者從網頁頂端一直捲動到 90% 的位置,代碼就會啟用三次 (每達到一個門檻就啟用一次)。每在一個網頁上達到一個門檻時,觸發條件都只會啟動一次。如果使用者之後上下捲動網頁,觸發條件也不會再次啟動,除非網頁重新載入,或是使用者前往其他網頁。

如果是可以無限捲動的網頁,或是大小相差甚遠的網頁,採用元素可見度觸發條件可能是較理想的做法。

注意:如果使用者在載入網頁時就能在可視區域看到指定的捲動深度,就算他們沒有捲動網頁,觸發條件也一樣會啟動。每個觸發條件在每個網頁上達到每個門檻時,都只會啟動一次。

捲動深度觸發條件啟動後,系統就會自動為下列變數填上值:

  • 「捲動深度門檻」:這個數值代表導致觸發條件啟動的捲動深度。以百分比做為門檻時,該數值在 0 到 100 之間;以像素做為門檻時,該數值則代表指定的像素數量。

  • 「捲動深度單位」:可以是「像素」或「百分比」,這代表您為導致觸發條件啟動的門檻所指定的單位。

  • 「捲動方向」:可以是「垂直」或「水平」,這代表導致觸發條件啟動的門檻方向。

計時器 (網頁)

您可以利用以這個事件為基準的觸發條件,按照自訂間隔將事件傳送給代碼管理工具,使代碼管理工具事件按照您指定的頻率發生。使用這項觸發條件時,代碼管理工具就會啟動倒數計時器,按照您指定的間隔 (以毫秒表示) 啟用事件。間隔 5000 代表每 5 秒會啟動一個事件。事件名稱是您在 [事件名稱] 欄位中指定的任何名稱;接著,您就可以使用這個事件名稱建立自訂事件觸發條件。舉例來說,如果您在採用計時器的觸發條件中將事件名稱指定為「timer5」,就必須建立一項採用自訂事件的觸發條件,其中事件條件為「事件等於 timer5」。如需範例,請參閱「Google Analytics (分析) 事件」一文。限制是指觸發事件的次數上限。如果將 [限制] 欄位留白,系統就會持續啟用事件,直到使用者離開網頁為止。

自訂事件 (網頁與行動應用程式)

對於並非以標準方法處理的網站或行動應用程式,可以使用自訂事件追蹤可能在其中發生的互動。最常見的用途是,當您想要追蹤表單提交時,表單的預設行為卻已經重新轉送 (例如提交瀏覽器事件已遭到覆寫。)

以下範例說明了如何將網頁設定為在「button1-click」自訂事件推送至資料層時,啟用代碼:

  1. 新增程式碼,用來在點擊按鈕時將事件推送至資料層。
    範例:<a href="#" name="button1" onclick="dataLayer.push({'event': 'button1-click'});" >Button 1</a>
  2. 建立代碼。在新代碼設定的 [觸發條件設定] 區段中,使用下列設定值來建立新事件:
    「觸發條件類型」:自訂事件
    「事件名稱」:button1-click
    「這項觸發條件的啟動時機」:所有自訂事件

完成這項設定後,即便預設提交事件遭到覆寫,還是能啟用您的代碼:點擊按鈕時,擁有 button1-click 值的自訂事件便會推送至資料層。接著,代碼管理工具就會將 button1-click 偵測為自訂事件值,然後繼續啟用代碼。

提示:標準事件和自訂事件同樣都會推送到資料層佇列。若要查看已推送至特定網頁上資料層的事件序列,請在網路瀏覽器上開啟 JavaScript 主控台,然後輸入「dataLayer」。

data layer screenshot from Google Chrome
提示:您可以使用 dataLayer.push() 將多個變數與事件一起傳送,例如在點擊按鈕時推送轉換價值 (範例:dataLayer.push({'event':'button1-click','conversionValue':25});)。然後,您就可以在代碼管理工具中建立資料層變數,並在 AdWords 轉換追蹤代碼的轉換值欄位中使用此變數。

YouTube 影片 (網頁)

使用 YouTube 影片觸發條件,可以在網站上根據嵌入式 YouTube 影片的各種互動情形啟用代碼。

在每項互動中,影片資料和播放狀態都會推送至資料層。您可以使用內建影片變數來擷取這類影片資料。

基本擷取選項

  • 「開始」:開始播放影片時啟動。
  • 「完成」:影片播畢時啟動。
  • 「暫停」、「跳轉」和「緩衝」:如果使用者暫停播放影片、移動影片的播放進度控制列來跳轉或重新調整時間,或是影片正在緩衝處理,觸發條件就會啟動。
  • 「進度」:以百分比或時間戳記 (以秒為單位) 來表示影片進度,達到指定進度時即啟動:
    • 「百分比」:以逗號分隔的清單輸入一或多個整數的百分比,代表影片已經播放的百分比。例如:5, 20, 50, 80,分別代表 5%、20%、50% 及 80%。
    • 「時間門檻」:以逗號分隔清單輸入一或多個整數的時間門檻,代表影片已經播放的秒數。例如:5, 15, 60, 120,分別代表 5 秒、15 秒、60 秒及 120 秒。
注意:只有在首次達到特定百分比和時間門檻時,觸發條件才會啟動。如果使用者跳轉影片而導致超過該百分比或時間門檻,觸發條件就不會啟動。

進階選項

  • 「在所有影片中加入 JavaScript API 支援功能」:勾選這個方塊即可啟用 YouTube iFrame Player API。這會確保 enablejsapi 參數將附加到 YouTube 影片播放器網址,而且指定值為 1,這樣就能透過 iFrame 或 JavaScript 控制播放器。注意:如果 Google 代碼管理工具載入時影片正在播放,則影片會重新載入。

注意:YouTube 影片觸發條件適用於載入網頁當下和之後載入的影片,因此在載入 Google 代碼管理工具時,只要出現下列任一個項目條件即成立:

  • 嵌入式 YouTube 影片
  • YouTube IFrame API <script>
  • 建立 YouTube iFrame API <script> 的程式碼,如此例所示

使用 RegEx 和 CSS 選取器運算子

設定觸發條件時,您可以使用規則運算式和 CSS 選取器做為運算子。設定觸發條件的規則運算式或 CSS 選取器運算子時,可以指定觸發條件符合或不符合目前套用的規則。舉例來說,套用至網址或網址路徑變數的規則運算式:

/pro/

可符合網址路徑中包含字串「pro」的所有網頁,包括「products」、「promotions」、「professionals」和「processes」。

CSS 選取器可用於指定特定 HTML 元素。舉例來說,這個套用至「點擊元素」變數的選取器:

#promo .purchase

可符合類別屬性值為「purchase」的任何元素所獲得的點擊,「purchase」則是 ID 屬性值為「promo」的父項所含的子元素。

在觸發條件中加入篩選器

選取會啟動觸發條件的事件後,您可以進一步指定條件,讓觸發條件必須根據代碼管理工具變數的值啟動代碼。代碼管理工具會自動為每個內建事件的一或多個變數填上值,例如網頁瀏覽的網頁網址,或點擊事件的點擊元素 ID。為觸發條件建立篩選器時,您必須使用與所選事件類型相關的變數,或是已建立的所有其他自訂變數。

除了採用自訂事件的觸發條件,您在建立其他觸發條件時都必須指定至少一個篩選器。

最後,您可以為觸發條件命名並設定其他設定選項 (因所選觸發條件類型而異)。

觸發條件和變數

如果您的代碼使用變數,會傳送到代碼的就是這些變數在代碼觸發事件發生當下的值。

建議您參考以下連續資料層更新的範例:

Screenshot of chrome devtools showing objects in data layer

如果代碼的觸發條件會在發生事件 productView 時啟用,該代碼就會啟用兩次。如果代碼使用的變數對應到資料層變數 productId,其值在第一個代碼啟用時將為「ABCD」,在第二個代碼啟用時則為「EFGH」。如果代碼使用的資料層變數對應到 loggedInUser,其值在兩個代碼啟用時都會是「no」,因為該值一開始就已設為「no」,且在第二個代碼啟用時未被覆寫。

如果代碼的觸發條件會在發生「addToCart」事件時啟動,該代碼也會在 productId 的值為「XYZ」且 loggedInUser 的值為「yes」時啟動,因為 loggedInUser 變數在 addToCart 事件發生前的 dataLayer 更新中,是由其原值「no」修改而得。請注意,將 loggedInUser 變數設定成「yes」的資料層更新無法用來觸發代碼啟動,因為沒有任何事件與該項更新相關。

暫停代碼

暫停代碼可用來暫時停用某個代碼,也就是藉由封鎖與其關聯的觸發條件,以避免啟動該代碼。這項功能可在疑難排解、設置定時廣告活動,和其他類似情況中派上用場。您可以讓某個代碼暫時無法啟動,卻又不必在容器設定中刪除該代碼,或是調整該代碼的觸發條件。

提醒您,必須儲存並發佈這些已暫停或已解除暫停的代碼,變更才會生效。

暫停代碼:

  1. 按一下 [代碼],找到您想暫停的代碼,然後在清單頁面上按一下其名稱,以打開該代碼。
  2. 按一下「更多動作」選單 (更多),然後選取 [暫停]。
  3. 儲存並發佈您的變更。

代碼已暫停時,該代碼會加上暫停圖示:yellow circular pause icon

解除暫停代碼:

  1. 按一下 [代碼],找到您想暫停的代碼,然後在清單頁面上按一下名稱來開啟。
  2. 按一下位於 [儲存] 下方的 [解除暫停]。或是選取「更多動作」選單 (更多),然後選取 [解除暫停]。
  3. 儲存並發佈您的變更。