代碼、觸發條件、變數和資料層的搭配運作方式

Google 代碼管理工具會使用「觸發條件」、「變數」和「資料層」,設定代碼在您網站或行動應用程式中啟用的方式。

代碼和觸發條件

「代碼」是指網頁上執行的一段程式碼。代碼有各式各樣的用途,但在 Google 代碼管理工具中大多用於將資訊從您的網站傳送到第三方。Google Analytics (分析) 代碼和 AdWords 轉換追蹤代碼都是所謂的代碼,用來將網站活動相關資訊傳送到 Google。

如果您沒有使用 Google 代碼管理工具等代碼管理解決方法,就必須將這些代碼的程式碼直接加進網站的原始程式碼中。使用 Google 代碼管理工具,您就能透過網路使用者介面控制所有代碼,非常方便。

代碼通常會在網頁載入時,或因應網頁上的某些互動而執行 (亦即「啟用」)。在 Google 代碼管理工具中,您可以透過代碼定義「觸發條件」來指定代碼的啟用時機。預先定義的「所有網頁」就是一種觸發條件;顧名思義,這個條件可在網站上的任何網頁載入時就地啟用代碼。

觸發條件和變數

系統會在執行階段判斷「觸發條件」為 true 或 false,只要比較「變數」中的值和您定義觸發條件時所指定的值就能判定。

Google 代碼管理工具變數是經過設定的「名稱-值」組合,其中值是在執行階段期間填入。除了使用 Google 代碼管理工具提供的多種內建變數外,您還可以自訂變數。

舉例來說,預先定義的變數「url」永遠包含目前載入網頁的網址。如果您希望代碼只在 example.com/purchase/receipt.html 這個網頁上啟用,請定義像這樣的觸發條件:

  • 事件:瀏覽量
  • 觸發條件類型:瀏覽量
  • 啟動時機:部分瀏覽量
    • 下列條件全都符合時啟動代碼:
      網址包含 example.com/purchase/receipt.html

您可以視需求自行定義變數,並個別加入執行階段所需的部分資訊,然後在觸發條件中使用這些變數,或將資訊傳送至代碼。舉例來說,您定義的變數可包含使用者所查看商品的價格。您也可以將變數定義為包含常數值,例如 Google Analytics (分析) 帳戶編號字串。

變數和資料層

假設您想定義的變數中包含使用者所查看商品的價格。那麼,變數要如何在執行階段得知商品價格?其實,變數可從原始程式碼的資料層中擷取價格 (您必須請網站開發人員協助設定內含您所需資訊的資料層物件)。資料層是一種物件,當中包含您要傳送給 Google 代碼管理工具的資訊。在 Google 代碼管理工具中,您可以設定資料層變數擷取這些值,供日後使用。為了使 Google 代碼管理工具評估資料層變數值,您必須一併傳送事件。

假設您想在網站訪客消費超過新臺幣 $3000 元時,啟用 Google 多媒體廣告聯播網再行銷代碼。這表示代碼的觸發條件必須知道訪客交易金額,才能判斷是否超過新臺幣 $3000 元,為達到這個目的,您可以將交易金額傳送至資料層 (使用 dataLayer.push 方法) 並定義變數來擷取結帳金額,以便觸發條件評估金額。

就算您並未設定資料層,變數也能擷取執行階段資訊。此外,您也可以設定 Google 代碼管理工具變數,直接從 JavaScript 變數、第一方 Cookie 或 DOM 擷取值。以點擊或表單觸發條件為例,您可以擷取使用者所接觸互動元素的相關資訊,相關詳情請參閱「變數」和「Google Analytics (分析) 事件」這兩篇文章。

話雖如此,最理想的做法仍是使變數直接從結構良好的資料層物件中擷取資訊,不要透過 JavaScript 變數或 DOM 擷取。如果您的變數會用到特定變數或 DOM 元素,且這些變數或元素會在網站更新過程中改變,您的變數可能會失效;但只要參照資料層中所有的相關資訊,就能大幅降低這類問題的發生機率、建立結構完整且易於使用的資料模式,解決問題的速度也更快。請注意,每一個網頁都必須有程式碼將必要資訊傳送至資料層,因為各個網頁的資料層都會變動。請參閱《解決方案指南》的「判斷使用資料層和 Google 代碼管理工具使用者介面的時機」一文, 進一步瞭解為什麼導入資料層可能是最便利的做法。

如想進一步瞭解如何在網站上導入資料層,請參閱 Google Developers 網站上的 Google 代碼管理工具指南

導入範例

接下來,我們將說明在網站上導入 Google 代碼管理工具的方法和時機。以下是三種可能的導入情形:

  • 如果您的代碼只需在網頁載入時啟用 (不必根據使用者在網頁上的互動而啟用),而且不需要網址和參照網址以外的任何資訊,那麼只要將容器程式碼片段加進網站的每一個網頁就行了。

  • 如果您的代碼只需在網頁載入時啟用,但會用到網址和參照網址以外的資訊 (如網頁類型或 User ID),您就需要加入程式碼來建立資料層,並將資訊傳送至資料層中。請在容器程式碼片段上方加入資料層程式碼,這樣網頁載入時就會顯示資料層資訊。請注意,每個網頁都必須有程式碼來建立資料層並將相關資訊加入資料層;資料層設定不會自動套用在所有網頁。

    如果所需的資訊可在網頁載入時由 JavaScript 變數和 DOM 直接提供,您就不需要安裝資料層。不過,直接從 JavaScript 變數和 DOM 擷取的資訊應該視為中繼解決方法。最佳做法是設定包含所需資訊的資料層,藉由參照資料層的所有相關資訊來建立結構完整且易於使用的資料模式,並加快解決問題的速度。

  • 如果您要收集或用來觸發代碼的資料只能在使用者與網頁互動後取得 (意即您需要啟用代碼來回應使用者互動,不是只在網頁載入時啟用代碼),您就必須加入程式碼,藉此將資料傳送至資料層,然後設定 Google 代碼管理工具在特定事件發生時使用資料層。舉例來說,您可以根據使用者所觀看的影片、商品 (例如汽車) 的客製化顏色或點擊連結的實際連結網址,傳送相關的中繼資料。

網路適用的預設資料層事件

根據預設,Google 代碼管理工具會將一組指定值傳送至網路應用程式的資料層,這些值為:
  • gtm.js - 在 Google 代碼管理工具可以執行時傳送至資料層。
  • gtm.dom - 在 DOM 可以執行時傳送至資料層。
  • gtm.load - 在視窗完全載入時傳送至資料層。
這篇文章實用嗎?
我們應如何改進呢?