您可以配合內建變數可能尚無法處理的特定需求,在 Google 代碼管理工具中建立網頁適用的使用者定義自訂變數。
建立新的使用者定義變數的做法如下:
- 在左側導覽窗格中按一下 [變數]。
- 在「使用者定義的變數」部分,按一下 [新增]。
- 按一下「變數設定」,然後選取所需的變數類型。
- 為選定的變數類型輸入設定選項。
- 為變數命名 (請使用能夠描述變數用途的名字,例如「資料層變數 - 產品名稱」)。
- 按一下「儲存」。
代碼管理工具可支援下列幾種網頁適用的使用者定義變數類型:
導覽
HTTP 參照網址
這個值會是 HTTP 參照網址,也就是使用者瀏覽的前一個網頁的網址;比方說使用者從首頁前往您其中一個產品網頁,那麼參照網址就是首頁。代碼管理工具會自動建立一個這類型的變數,但如果您需要顯現參照網址的其他部分,可以建立更多這種變數。
網址
這類變數可用來剖析及顯現構成網址的元件。您可以建立更多這種變數來顯現網址的其他部分。可選擇的網址元件如下:「完整網址」、「通訊協定」、「主機名稱」、「通訊埠」、「路徑」、「副檔名」、「查詢」及「片段」。這類變數的輸入值組合為使用者目前所瀏覽網頁的網址 (擷取自 document.location
),但您可以藉由調整「網址來源」,讓代碼管理工具使用其他變數做為網址值的來源。
網頁變數
第一方 Cookie
這個值會是第一方 Cookie 的值以及使用者目前所在網域的名稱。如果同一個網域上部署了多個同名的 Cookie,系統會選擇第一個值;若您在網頁內呼叫了 document.cookie
並選用第一個結果,也會取得相同的值。
自訂 JavaScript
這個值會是 JavaScript 函式的結果。JavaScript 的形式必須是一個會傳回值的匿名函式。舉例來說,您可以建立自訂的 JavaScript 變數,藉此將所有預先定義的 {{url}}
變數轉換成小寫:
function () {
return {{url}}.toLowerCase();
}
資料層
系統可經由 dataLayer.push()
呼叫將資料推送至資料層來設定這個值:
dataLayer.push({"Data Layer Name": "value"})
.
您可以指定代碼管理工具解讀鍵名中半形句點 (「.
」) 的方式:
- 版本 1:允許鍵名包含半形句點。舉例來說,如果是
dataLayer.push("a.b.c": "value")
,您可以將鍵名解讀為「a.b.c
」(意即{"a.b.c": "value"}
)。 - 版本 2:將半形句點視為巢狀值。例如將
dataLayer.push({"a.b.c": "value"})
解讀為三個巢狀層級:{a: {b: {c: "value"}}}
。
JavaScript 變數
這個值會是您指定的 JavaScript 全域變數。如果所需的值並未在資料層中設定 (請參閱「資料層變數」部分的說明),也沒有在 DOM 中顯示 (請參閱「DOM 元素變數」部分的說明),您或許可以從 JavaScript 變數中擷取這個值。若您能夠在網頁原始碼中找到所需值 (須為 JavaScript 全域變數),請使用這個變數類型。
網頁元素
自動事件變數
系統會擷取觸發了事件的項目資訊 (例如點擊、表單提交、元素可見度等等)。
- Element (元素):這會傳回元素物件,且可視為自訂 JavaScript 物件 (例如
{{Element}}.title
),或 CSS 選取器中的物件 (例如 {{Element}} matches CSS Selectordiv.foo
)。 - Element Type (元素類型):這會傳回
element.tagName
值 (例如「A」、「BUTTON」、「IMG」)。 - Element Attribute (元素屬性):指定屬性名稱後,這個選項就會傳回該屬性的值。
- Element Classes (元素類別):這會傳回元素
class
屬性內的類別清單。 - Element ID (元素 ID):這會傳回
ID
屬性的值。 - Element Target (元素目標):這會傳回
target
屬性的值 (例如「_blank」)。 - Element Text (元素文字):這會傳回元素文字內容的值。
- Element URL (元素網址):這會傳回從
href
或action
屬性收集的元素網址。 - History New URL Fragment (記錄新網址片段):這會傳回瀏覽器記錄中的新網址片段 (例如「#summary」)。
- History Old URL Fragment (記錄舊網址片段):這會傳回瀏覽器記錄中的舊網址片段 (例如「#intro」)。
- History New State (記錄新狀態):這會傳回新記錄狀態物件 (由網站的
pushState
呼叫控制)。 - History Old State (記錄舊狀態):這會傳回舊記錄狀態物件 (由網站的
pushState
呼叫控制)。 - History Change Source (記錄變更來源):這會傳回造成記錄變更的事件 (例如「pushState」、「replaceState」等等)。
DOM 元素
這個值會是 DOM (文件物件模型) 元素的文字或指定 DOM 元素屬性的值。如果所需的值並未在資料層中設定 (請參閱「資料層變數」部分的說明),您或許可以從 DOM 中擷取這個值。如果能夠在 DOM 中找到所需的值,請使用這個變數類型。
如果設定選用屬性的名稱,系統會傳回該屬性中指定的值 (例如 data-food="cupcake"
) 做為變數值,否則變數值會是 DOM 元素中的文字。
元素可見度
這個值是根據指定 DOM 元素的可見狀態而設定。與元素可見度觸發條件不同的是,單一元素可見度變數只能記錄一項元素的可見度。選擇是否要根據元素 ID 或 CSS 選取工具來選取元素。如果有多個元素符合指定的 CSS 選取工具,系統會採用第一個相符的元素。
您可以為這個變數選擇輸出類型:
- True/False:此為布林值,用來表示參照這個變數時,選定元素是否可見。
- 百分比:此為 0 到 100 間的百分比值,用來表示參照這個變數時,選定元素在畫面上的可見範圍有多大。
如果您選用 True/False 做為輸出類型,還可以搭配指定「最低可見百分比」,藉此設定選定元素在畫面上的可見範圍必須有多大,才傳回 True 做為變數值。
公用程式
常值
這個值會是您提供的字串。如果有多個代碼使用同一個帳號,通常會採用常值字串變數。另請參閱「Google Analytics (分析) 設定」部分瞭解詳情。
自訂事件
這個值會是推送至資料層的自訂事件名稱。
環境名稱
這種變數會傳回在預覽模式時查看的環境名稱。
Google Analytics (分析) 設定
您可以在網站容器和行動 (Firebase) 容器的通用 Analytics (分析) 代碼中,使用 Google Analytics (分析) 設定變數,以便集中設定和共用多個代碼一同使用的常用 Google Analytics (分析) 設定。使用通用 Analytics (分析) 建立 Google Analytics (分析) 代碼時,代碼管理工具會提示您選取或建立 Google Analytics (分析) 設定變數,瞭解詳情。
Google 代碼:配置設定
您可以使用這個變數來設定 Google 代碼載入時的設定層級參數。
舉例來說,假設您以多種語言發布網站,且想要根據閱讀的語言區隔目標對象,則可使用language
參數建立設定變數,然後在 Google 代碼中運用這個變數,而不必手動更新每個代碼。
Google 代碼:事件設定
您可以使用這個變數來設定事件層級參數,透過 GA4 事件傳送額外資料。
舉例來說,假設您有一家網路商店正在舉辦特賣會,並想追蹤有多少人使用您提供的折扣代碼,則可透過「Google 代碼:事件設定」變數重複使用參數,而不必將 discount
參數加進每個代碼。
對照表
系統會根據對照表中的指示設定這個值。對照表包含兩個資料欄,下面以空白對照表說明資料之後的使用方式:
當 [選取變數] 等於 | 將 [這個變數] 設為 |
---|---|
您使用對照表建立變數後,其值會根據另一個變數的值變動。如果您的網站設定能夠將適當的值 (例如轉換 ID) 對應至網址、DOM 元素或網頁的其他部分,就適合使用這個方式來建立變數。在下列範例中,我們建立了一個名為「Conversion ID」(轉換 ID) 的變數;如果網址包含「/thanks/buy1.html」,值會是「12345」;如果網址包含「thanks/buy2.html」,值會是「34567」。
當 {{url}} 包含 | 將 {{Conversion ID}} 設為 |
---|---|
/thanks/buy1.html | 12345 |
/thanks/buy2.html | 34567 |
/thanks/buy3.html | 56789 |
隨機數字
這個值會是介於 0 到 2147483647 的任一隨機數字。
規則運算式表格
規則運算式表格變數與對照表變數相似,但前者多了一項功能,可針對要比對的項目執行規則運算式模式。
規則運算式的設定像下面這樣時:
模式 | 輸出 |
---|---|
.*/page[1-3]\.html.* |
foo |
.*/page[4-6]\.html.* |
bar |
.*/page[7-9]\.html.* |
baz |
變數的輸出值如下:
相符結果 | 值 |
---|---|
http://example.com/page1.html | foo |
http://www.example.com/page1.html | foo |
http://example.com/page2.html#detail | foo |
http://example.com/page5.html | bar |
http://example.com/page5.html?status=new | bar |
http://example.com/page6.html | bar |
https://example.com/page9.html | baz |
規則運算式表格查詢會由清單頂端向下執行至清單底部,一旦找到相符的比對結果,便會傳回相應的輸出值。
選取 [設定預設值],設定沒有相符比對結果時的輸出值。
根據預設,模式必須與輸入字串完全相符,但不必區分大小寫。如有必要,您可以在「進階設定」中調整模式的行為:
-
忽略大小寫:您不需要在規則運算式中明確界定大小寫的處理方式,模式與大小寫文字都能比對成功。
-
必須完全相符:一旦啟用這個選項,模式就必須與輸入字串完全相符,效果與模式前後隱含開始錨點 (
^
) 和結束錨點 ($
) 相同。如果停用此選項,在輸入字串的任何部分發現模式時都算比對成功。 -
擷取群組和取代功能:啟用這個選項後,您就能使用錢幣符號取代語法,在輸出值中納入輸入字串的部分文字 (例如相符模式中的擷取群組)。舉例來說,如果相符的規則運算式為
/(news)/page(2)\.html
,您可以分別使用$1
和$2
來參照第一個擷取群組 (「news」) 和第二個擷取群組 (「2」)。
使用者提供的資料
收集聯絡表單資訊,例如電子郵件、電話、姓名和地址。請使用下列其中一種模式指定要擷取的資訊:
- 自動設定:自動偵測網站上的表單欄位和新項目。
- 手動設定:可讓您將現有代碼管理工具變數對應至使用者提供資料的相應欄位,例如電子郵件、電話號碼、姓名和地址。
- 程式碼:可讓您指定資料層變數或自訂 JavaScript 變數,以傳回使用者提供的結構化資料物件。
容器資料
容器 ID
這會傳回代碼管理工具容器的 ID (例如「GTM-101010」)。
容器版本號碼
當容器處於預覽模式時,容器版本變數會傳回容器的預覽版本號碼;不是預覽模式時,這個變數會傳回容器的發佈版本號碼。
偵錯模式
容器處於預覽與偵錯模式時,值會設為「True」,否則會設為「False」。