使用 Google 代碼管理工具設定 UET 標籤

您可以利用協力廠商的標籤管理工具,在單一位置管理自己的網站標籤。了解如何使用 Google 代碼管理工具設定 UET 標籤。
注意
  • 本文說明如何使用 Google 代碼管理工具進行基本的 UET 標籤設定。Google 代碼管理工具提供了多項進階功能來自訂觸發標籤的時機與方式。如需詳細資訊,請參閱 Google 的代碼管理工具說明
  • 對於 Google 代碼管理工具的程序或文件,或是 Google 代碼管理工具的程序或文件所發生的變更,Microsoft Advertising 概不負責。

標籤管理工具會將靜態標籤取代成更好實作及更新的動態標籤。所謂的動態標籤是個容器,以一小段程式碼的形式存在,可讓您在自己的網站中動態插入標籤。您可以將容器標籤想成裡頭會裝別種標籤的貯藏桶。

在 Google 代碼管理工具上為頁面載入事件新增基底 UET 頁面 expando image

若要讓 Google 代碼管理工具傳送資訊到 Microsoft Advertising,您必須在 Google 代碼管理工具中建立一個「容器」,然後在當中新增 Microsoft Advertising UET 標籤。

以下說明如何開始使用會在所有頁面上引發的基本 UET 標籤:

  1. 在 Google 代碼管理工具中設定帳戶時,在 [容器名稱] 方塊中輸入您網站的網址。
  2. 從這個容器的工作區本身的 [總覽] 頁面,選取工具列中的容器 ID (格式為 "GTM-XXXXXX")。您將會看到 Google 代碼管理工具容器的程式碼與使用說明。
  3. 將容器程式碼複製並貼到您網站每個頁面的 head 或 body 區段中。
  4. 返回容器工作區的 [總覽] 頁面,選取 [新增代碼]
  5. [代碼設定] 窗格中,選擇要開始設定的標籤類型。
    1. 搜尋 [Microsoft Advertising 通用事件追蹤]
    2. 確定追蹤類型是設為 [UET config/page view (required)] (UET 設定/頁面檢視 (必要))。您只需為這個追蹤類型新增一個標籤,但必須將該標籤放在所有頁面上供觸發用。
    3. 輸入您的 [Microsoft Advertising]。在 Microsoft Advertising 中選取 [成交追蹤] > [UET 標籤],即可查到該標籤 ID。
    4. 如果您的網頁上有多個 UET 標籤追蹤程式碼,請在 [UETQ 變數 ID] 方塊內輸入 UET 標籤指令碼當中,要讓 Google 代碼管理工具追蹤的全域活動追蹤物件名稱。否則,請使用預設值 uetq。深入了解會需要建立多個 UET 標籤的原因以及如何重新命名 uetq 事件追蹤器

    注意
    • 如不使用不同的 uetq 變數,UET 標籤協助程式就會傳回 "Multiple UET tags on this webpage use the same event name" (這個網頁上有多個 UET 標籤使用相同的事件名稱) 的問題。如果您在網站上放置了多個標籤,而其中一個標籤是透過 Google 代碼管理工具實作,那麼 UET 標籤協助程式可能會偵測不到 "Multiple UET tags on this webpage use the same event name" (這個網頁上有多個 UET 標籤使用相同的事件名稱) 的問題。
    • 如果您已在自己的網站上實作 UET 標籤追蹤程式碼,建議您先刪除該追蹤程式碼,然後才在 Google 代碼管理工具中新增頁面檢視 UET 標籤。
  6. [觸發條件] 窗格中,選取鉛筆圖示,然後選取 [All pages] (所有網頁)。要讓標籤觸發,就必須至少為標籤設定一個觸發條件。系統會在執行階段評估觸發條件,並在觸發條件成立時觸發標籤。選取 [儲存]
  7. 輸入 [代碼名稱],然後選取 [儲存]
  8. 在容器工作區的工具列中,選取 [提交] > [發布] 啟用標籤並新增版本。
  9. 在 Microsoft Advertising 中,選取 [成交追蹤] > [UET 標籤] 來確認您已在接收成交資料。要確認一個標籤通常最多需要 24 小時的時間。
  10. 在使用 UET 標籤協助程式的情況下瀏覽您的網站,確認所有頁面都會觸發 UET 頁面載入事件。
使用 Google 代碼管理工具新增 UET 自訂事件 expando image
重要

若要使用 Google 代碼管理工具為收入變數或動態再行銷之類的案例設定自訂事件,您必須已依上節說明,將 UET 標籤新增到 Google 代碼管理工具中。

自訂事件需要使用動態值,因此您必須告訴 Google 代碼管理工具該如何讀取這些值。

  1. 設定 Google 代碼管理工具變數來讀取您頁面中的動態值:雖然 Google 代碼管理工具支援許多類型的變數 (讀取自 html 元素、函式、JavaScript 變數、資料層變數等),但在這個範例中,我們會設定 Google 代碼管理工具變數來讀取資料層變數。
    1. 造訪我們的 Google 代碼管理工具範例頁面 (只有英文版)、在網頁中按一下滑鼠右鍵,然後選取 [檢視原始檔][檢視網頁原始碼] (視您是使用什麼瀏覽器而定)。您會看到下列變數:
      <script> dataLayer.push({ 'event':'Purchase', 'ecomm_prodid': ['abc123', 'xyz456'], 'ecomm_pagetype': 'purchase', 'ecomm_totalvalue’:55.55, 'currency’:‘USD’, 'items': [{ 'id': 'abc123', 'price':11.11, 'quantity':1 }, { 'id': 'xyz456', 'price':22.22, 'quantity':2 }], 'transaction_id': 'tid123456', }); </script>

      重要

      您必須確定「自己」網站程式碼中的變數符合案例 (例如,自訂事件成交、變動收入或動態再行銷) 所需的自訂事件所需的參數。例如,假設您的網站中有上述參數,而您希望讓 Google 代碼管理工具讀取這些參數。

    2. 在您 Google 代碼管理工具容器的工作區中,選取 [變數]
    3. [使用者定義的變數] 下,選取 [新增]
    4. [變數設定] 窗格中,選取鉛筆圖示。
    5. [網頁變數] 下,選取 [資料層變數]
    6. [變數名稱] 方塊中,輸入您在資料層中為這個變數所取的名稱。在我們的範例中,這會是下列其中一個名稱:ecomm_prodidecomm_pagetypeecomm_totalvaluecurrencyitemstransaction_id
    7. 為變數指派一個名稱,然後選取 [儲存]。例如,ecomm_prodid 的變數是命名為 'Product IDs'。
    8. 重複上述程序,為您在 Microsoft Advertising 中使用的案例所需的每個參數各建立一個新變數。
  2. 設定觸發條件
    1. 在您 Google 代碼管理工具容器的工作區中,依序選取 [觸發條件][新增]
    2. [觸發條件設定] 窗格中,選取鉛筆圖示,然後選取 [自訂事件]
    3. 輸入 [事件名稱],然後選取 [儲存]。在我們的範例中,事件名稱是 'Purchase'。
    4. 輸入 [觸發條件名稱],然後選取 [儲存]

    重要
    • 您在 Google 代碼管理工具中的觸發條件,必須與您網頁上撰寫的可能互動相符。
    • 請查看我們 Google 代碼管理工具範例頁面中的範例。在這個頁面,我們針對按鈕的點選撰寫了程式碼。請在該網頁中按一下滑鼠右鍵、選取 [檢視原始檔][檢視網頁原始碼] (視您是使用什麼瀏覽器而定),然後尋找含有 id=btnCustomEvent 的程式碼。
  3. 建立新代碼:這會是個將事件變數和您剛建立的觸發條件綁在一起的自訂事件標籤。
    1. 在您 Google 代碼管理工具容器的工作區中,依序選取 [代碼][新增]
    2. [代碼設定] 窗格中,選取鉛筆圖示。
    3. [更多] 下,選取 [Microsoft Advertising 通用事件追蹤]
    4. 如果您的網頁上有多個 UET 標籤追蹤程式碼,請在 [UETQ 變數 ID] 方塊內輸入 UET 標籤指令碼當中,要讓 Google 代碼管理工具追蹤的全域活動追蹤物件名稱。否則,請使用預設值 uetq
    5. 視您是要為什麼案例新增 UET 標籤而定,選取適當的追蹤類型。可用的追蹤類型有:[Vertical:E-commerce] (縱向市場:電子商務]、[Vertical:Hotels] (縱向市場:旅館)、[Vertical:Travel] (縱向市場:旅遊)、[Variable revenue for destination URL] (連結網址的變動收入)、[Custom conversion] (自訂成交)、[Page view (Single page application)] (頁面檢視 (單頁面應用程式)),或是[Define your own] (自行定義)。
    6. 根據您的案例,選取適當的事件動作。例如,在購買確認頁面上,將 [Event action] (事件動作) 設為 [Purchase] (購買)。
    7. 在各 [Event Parameters] (事件參數) 方塊中,分別輸入您在步驟 1 建立的變數。您可以使用加號圖示選取變數。在我們的範例中,我們將 'Retail product ID' 設為 {{產品 ID}}、將 'Retail price' 設為 {{總價值}},並將 'Retail total value' 設為 {{總價格}}
    8. 選取 [新增參數],為每個產品的價格、交易 ID 和任何其他參數新增項目陣列。在我們的範例中,我們會新增先前建立的參數並為其設定值。我們將 'items' 設為 {{UET 項目陣列}},並將 'transaction_id' 設為 {{交易 ID}}
    9. [觸發條件] 窗格中,選取鉛筆圖示,然後選取您在步驟 2 建立的觸發條件。選取 [儲存]
    10. 輸入 [代碼名稱],然後選取 [儲存]
  4. 發佈您的變更:在 Google 代碼管理工具容器工作區的工具列中,選取 [提交] > [發佈]
  5. 檢查您網站的程式碼:請確認您已將下方的變數加到顧客完成事件 (例如確認購買產品) 所在的網頁上的資料層。在我們上方的範例中:
    <script> dataLayer.push({ 'event':'Purchase', 'ecomm_prodid': ['abc123', 'xyz456'], 'ecomm_pagetype': 'purchase', 'ecomm_totalvalue’:55.55, 'currency’:‘USD’, 'items': [{ 'id': 'abc123', 'price':11.11, 'quantity':1 }, { 'id': 'xyz456', 'price':22.22, 'quantity':2 }], 'transaction_id': 'tid123456', }); </script>
  6. 驗證您的 UET 標籤:請使用 UET 標籤協助程式,確認您的網站會引發事件以及事件中對應的參數。

See more videos...