Google Floodlight 代碼

本文旨在協助開發人員，將 Floodlight 代碼從代碼管理工具網站容器移至伺服器容器。

透過伺服器端代碼管理工具，您可以將 Google Floodlight 銷售代碼和計數器代碼從網頁移至伺服器。將這些代碼移至伺服器可減少您在網頁中執行的程式碼，並縮短網頁載入時間。

事前準備

將代碼移入伺服器之前，請確認您具備：

步驟 1：設定轉換連接器代碼

您必須先設定轉換連接器代碼，Floodlight 帳戶才能將轉換資料傳送至 Google 代碼管理工具。

如果您已在伺服器容器中設定轉換連接器代碼，可以略過這個步驟。

如何設定轉換連接器代碼：

  1. 在伺服器容器工作區中，開啟頁面左側的「Tag」選單。
  2. 按一下「新增」新增代碼。
  3. 選取「轉換連接器」代碼類型。
  4. 設定導致「轉換連接器」伺服器端代碼觸發的觸發條件。
    在大多數情況下，「所有網頁」觸發條件是最佳選項。
  5. 為代碼命名並按一下「Save」。 轉換連接器代碼詳細資料

步驟 2：設定 Floodlight 代碼

Google 代碼管理工具支援伺服器容器中的 Floodlight 計數器代碼和 Floodlight 銷售代碼。

Floodlight 計數器

如何設定 Floodlight 計數器代碼：

  1. 在伺服器容器工作區中，選取頁面左側的「Tag」選單。
  2. 按一下「新增」新增代碼。

  3. 選取 [Floodlight 計數器] 代碼類型。

    選擇內含 Floodlight 計數器代碼的代碼類型對話方塊

  4. 如要收集代碼設定需要的值，請開啟另一個瀏覽器視窗，然後登入 Campaign Manager 360。按一下「廣告客戶」，然後點選廣告客戶的名稱。 在新的代碼管理工具 Floodlight 計數器代碼中輸入這些值：

    • 廣告客戶 ID：廣告客戶 ID 會顯示在廣告客戶詳細資料頁面上的廣告客戶名稱下方。在系統產生的 Floodlight 代碼片段中，也可以找到這個值，當做 src= 的值。
    • 群組代碼字串：在「活動」表格中，找到您要使用的活動，然後在右側資料欄內找出群組代碼字串。另外，在系統產生的 Floodlight 代碼片段中也可以找到這個值，type=。
    • 活動代碼字串：在「活動」表格中，找到您要使用的活動，然後在右側欄內找出活動代碼字串。另外，在系統產生的 Floodlight 代碼片段中也可以找到這個值，cat= 的值也會是這個值。

  5. 設定所需的計數方法：

    • 標準：計算每一次轉換。
    • 不重複：計算每日 24 小時期間每位不重複使用者的首次轉換 (美國東部時間午夜 12 點至隔日午夜 12 點)。
    • 按工作階段：計算各工作階段每位使用者的一次轉換。工作階段長度是由 Floodlight 代碼所在的網站設定。

  6. 開啟「選擇觸發條件」視窗。

  7. 在「觸發條件設定」選單中選取觸發條件。在大多數情況下，「All Pages」(所有頁面) 是最佳選項。

    選擇觸發條件對話方塊，其中醒目顯示「所有網頁觸發條件」

  8. 輸入代碼名稱，然後按一下「儲存」。

    顯示「Floodlight 計數器代碼名稱」欄位已變更為「Floodlight 計數器代碼」的螢幕截圖

Floodlight 銷售

如何設定 Floodlight 銷售代碼：

  1. 在伺服器容器工作區中，選取頁面左側的「Tag」選單。
  2. 按一下「新增」新增代碼。

  3. 選取「Floodlight 銷售」代碼類型。注意：Floodlight 銷售代碼會自動從對應的電子商務欄位收集下列值：

    *   Order ID (Transaction ID)
*   Revenue (Value)

  4. 如要收集代碼設定需要的值，請開啟另一個瀏覽器視窗，然後登入 Campaign Manager 360。按一下 [廣告客戶]，然後按一下廣告客戶的名稱。請在新的代碼管理工具 Floodlight 計數器代碼中輸入以下值：

    • 廣告客戶 ID：廣告客戶 ID 會顯示在廣告客戶詳細資料頁面上的廣告客戶名稱下方。在系統產生的 Floodlight 代碼片段中，也可以找到這個值，當做 src= 的值。
    • 群組代碼字串：在「活動」表格中，找到您要使用的活動，然後在右側資料欄內找出群組代碼字串。另外，在系統產生的 Floodlight 代碼片段中也可以找到這個值，type=。
    • 活動代碼字串：在「活動」表格中，找到您要使用的活動，然後在右側欄內找出活動代碼字串。另外，在系統產生的 Floodlight 代碼片段中也可以找到這個值，cat= 的值也會是這個值。

  5. 設定所需的計數方法：

    • 標準：計算每一次轉換。
    • 不重複：計算每日 24 小時期間每位不重複使用者的首次轉換 (美國東部時間午夜 12 點至隔日午夜 12 點)。
    • 按工作階段：計算各工作階段每位使用者的一次轉換。工作階段長度是由 Floodlight 代碼所在的網站設定。

  6. 開啟「選擇觸發條件」視窗。

  7. 在「觸發條件設定」選單中選取觸發條件。在大多數情況下，「All Pages」(所有頁面) 是最佳選項。

  8. 輸入代碼名稱，然後按一下「儲存」。

選用：設定強化轉換

如果您未使用強化轉換，請直接跳至「驗證設定」一節。

如要設定強化轉換，請按照下列步驟操作。

設定使用者提供的資料變數

您可以透過 3 種方式在代碼管理工具中導入強化轉換。 您只需要選擇其中一個選項來收集使用者提供的資料。

自動收集 手動設定 程式碼設定
收集方法 根據網站程式碼自動收集使用者提供的資料。

如要控管輸入內容的收集位置，請選擇手動或程式碼設定。		 指定 CSS 屬性或 JavaScript 變數來收集使用者提供的資料。

如果需要控管資料格式和雜湊處理，請選擇啟用程式碼設定。		 在網站上加入程式碼片段，傳送經雜湊處理的客戶資料以進行比對。
這種方法最適合在轉換標記觸發時傳送格式一致的資料，盡可能提高強化轉換的準確度。
複雜度 簡單易用 中 複合式
技能 不需要特殊技能 HTML 和 CSS 網站開發

自動資料收集

  1. 在網站容器中，開啟「變數」選單。
  2. 建立類型為「User-Provided Data」的新使用者定義的變數。
  3. 將「類型」設為「自動收集」。
  4. 為變數命名，例如 My user-defined data。
  5. 點按「儲存」。

手動設定

  1. 在網站容器中，開啟「變數」選單。
  2. 建立類型為「User-Provided Data」的新使用者定義的變數。
  3. 將「類型」設為「手動設定」。

  4. 針對您想透過強化轉換提供的相關使用者資料欄位，加入新的或現有變數。

  5. 如要透過 DOM 指定元素，請建立「新增變數」>「變數設定」>「DOM 元素」。

  6. 在「選取方式」下方，您可以使用 CSS 選取器或 ID。 提示：如果 CSS 變數經常變更，請將 HTML ID 加到網站並使用 ID 變數。

  7. 輸入 CSS 選取器或 ID 名稱。您可以將「屬性名稱」欄位留空。

  8. 為 DOM 元素變數命名並儲存。接著，畫面會回到「使用者提供的資料」設定。

  9. 將「User-Provided Data」變數命名為 My user-defined data，

  10. 點按「儲存」。

程式碼設定

步驟 1：識別並定義強化轉換變數

您可以傳送未經雜湊處理的資料 (Google 會在資料送達伺服器前進行雜湊處理)，也可以傳送預先經過雜湊處理的資料。如果您決定傳送預先經過雜湊處理的資料，請使用十六進位編碼的 SHA256 編碼資料。無論是哪一種情況，請至少提供下列其中一個欄位：email 或 phone_ number。
如要將未經雜湊處理的資料推送至資料層：

  1. 在網站上，將使用者提供的資料以鍵/值組合的形式，儲存在 JavaScript 變數中。例如：

    var leadsUserData = {
  'email': 'name@example.com',
  'phone_number': '+11234567890',
  'address': {
    first_name: 'John',
    last_name: 'Doe',
    street: '123 Lemon',
    city: 'Some city',
    region: 'CA',
    country: 'US',
    postal_code: '12345',
  },
};

  2. 使用 dataLayer.push() 傳送使用者資料和事件。 例如：

    <script>
  dataLayer.push({
    'event': 'formSubmitted',
    'leadsUserData': {
      'email': 'name@example.com',
      'phone_number': '+11234567890',
      'address': {
         first_name: 'John',
         last_name: 'Doe',
         street: '123 Lemon',
         city: 'Some city',
         region: 'CA',
         country: 'US',
        postal_code: '12345',
       },
     },
  });
<script>

您現在可以在 Google 代碼管理工具中使用變數「leadsUserData」了。

如要將預先雜湊處理資料推送至資料層，請按照下列步驟操作：

  1. 在網站上，使用十六進位編碼 SHA256 對使用者提供的資料進行雜湊處理。編碼資料的金鑰必須以 sha256_ 開頭。例如：

    {'sha256_email_address':await hashEmail(email.trim()),
}

  2. 使用 dataLayer.push() 將使用者資料與事件一起傳送。以下範例顯示資料層實作，假設您已自行編寫以非同步方式執行的雜湊函式。

    <script>
  dataLayer.push({
    'event': 'formSubmitted',
    'leadsUserData': {
      'sha256_email_address': await hashEmail(email.trim()),
      'sha256_phone_number': await hashPhoneNumber(phoneNumber),
      'address': {
        sha265_first_name: await hashString(firstname),
        sha256_last_name: await hashString(lastname),
        sha256_street: await hashString(streetAddress),
        postal_code: '12345',
       },
     },
  });
<script>

您現在可以在 Google 代碼管理工具中使用變數「leadsUserData」了。

步驟 2：建立使用者提供的資料變數

  1. 在網站容器中，開啟「變數」選單。
  2. 建立類型為「User-Provided Data」的新使用者定義的變數。
  3. 將「Type」設為「Code」。
  4. 針對您要提供的相關使用者資料欄位，點選下拉式選單，然後選取「新增變數」。
  5. 在「Choose Variable Type」下方，選取「資料層變數」。
  6. 在「資料層變數」中，參照您儲存的使用者資料。例如 leadsUserData。
  7. 為資料層變數命名並儲存。接著，畫面會回到「使用者提供的資料」設定。
  8. 將「User-Provided Data」變數命名為 My user-defined data，
  9. 點按「儲存」。

將變數指派給 Google 代碼

  1. 在網站容器中，開啟「代碼」選單。
  2. 編輯用於傳送資料到標記伺服器的 Google 代碼。
  3. 在「Configuration settings」下方，新增名為 user_data 的新設定參數。將「Value」設為「User- provided Data」變數，例如 {{My user-provided data}}。

  4. 點選「儲存」儲存變更。代碼應如下所示：

    螢幕截圖：最終 Google 代碼設定，參照的使用者提供的資料變數。

設定伺服器端 Floodlight 代碼

在伺服器容器中，系統會在 Floodlight 銷售或 Floodlight 計數器代碼中啟用強化轉換。

  1. 勾選「納入使用者提供的資料」核取方塊。
    alt_text
  2. 按下「儲存」以儲存變更。

選填：收益值

Floodlight 銷售代碼會使用事件的 value 參數做為預設金額來計算收益。如要指定不同的收益計算方式，您必須設定變數，以便從資料庫提取資料，並指派給 Floodlight 銷售代碼。

如何建立新變數：

  1. 在伺服器容器中，開啟「變數」選單。
  2. 為資料輸入建立新的使用者定義變數。例如，如要使用 Firestore 資料庫中的值，請建立&lcub;&lcub;Firestore Lookup&rcub;&rcub; 變數。
  3. 指定變數的資料來源。
  4. 為變數命名，例如「利潤查詢」，然後「儲存」。

如何在 Floodlight 銷售代碼中使用變數：

  1. 在伺服器容器中，開啟「代碼」選單。
  2. 編輯 Floodlight 銷售代碼。

  3. 在「Unique Parameters」部分：

    • 在「資料來源」中，選擇「自訂設定」。
    • 針對「收益」，選取您之前建立的變數。
    • 在「訂單 ID」部分，輸入 ID 或使用變數以動態方式填入訂單 ID。

    利用收益值進行 Floodlight 銷售追蹤

  4. 儲存代碼。

選用：自訂參數

您可以將自訂欄位從網頁傳送到 Google Marketing Platform，例如 match_id。

Google 代碼管理工具

如要設定 Floodlight 的自訂欄位，請在參數名稱前面加上 x-dc-：

  1. 在網站容器中，開啟「代碼」選單。
  2. 編輯 GA4 事件代碼或建立新的代碼。

  3. 在「事件參數」中加入參數名稱。如要發出傳送至 Floodlight 的信號，請在前面加上 x-dc-。舉例來說，假設您通常會傳送 match_id，請將其變更為 x-dc-match_id。

    在 GA4 網站代碼中設定 dc- 參數。

  4. 儲存代碼。

gtag.js

如要設定 Floodlight 的自訂欄位，請在事件參數名稱前面加上 x-dc-：

  gtag('event', 'purchase', {
      'x-dc-match_id': [MATCH_ID],
      ...
  })

步驟 3：驗證設定

開始透過伺服器容器傳送資料後，您可以按照下列步驟檢查資料是否正常運作：

  1. 開啟網站。
  2. 在 Google 代碼管理工具伺服器容器中，選取「預覽」。 Tag Assistant 會啟動並載入伺服器容器。
  3. 「代碼」分頁會顯示所有已觸發的代碼。請確認您設定的代碼是否觸發。
  4. 「Console」分頁會顯示資料傳輸至伺服器容器期間發生的任何錯誤。檢查並解決錯誤。

如需更多代碼管理工具容器偵錯相關說明，請參閱預覽及偵錯說明。

後續步驟

Floodlight 代碼正常運作後，您可以在網站容器中移除任何對等的 Floodlight 代碼，以免資料重複。