Google Floodlight 代碼

本文適用於想要將 Floodlight 代碼從代碼管理工具網站容器移至伺服器容器的開發人員。

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

事前準備

將標記移至伺服器之前，請確認您已完成下列事項：

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

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

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

如要設定轉換連接器代碼，請按照下列步驟操作：

  1. 在伺服器容器工作區中，開啟頁面左側的「代碼」選單。
  2. 按一下「新增」即可新增代碼。
  3. 選取「轉換連接器」代碼類型。
  4. 設定觸發條件，以便觸發轉換連接器伺服器端代碼。
    在大多數情況下，「所有網頁」觸發條件是最佳選項。
  5. 輸入代碼名稱，然後按一下「儲存」。 轉換連接器代碼詳細資料

步驟 2：設定 Floodlight 代碼

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

Floodlight 計數器

如要設定 Floodlight 計數器代碼，請按照下列步驟操作：

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

  3. 選取「Floodlight 計數器」代碼類型。

    「選擇代碼類型」對話方塊，其中醒目顯示 Floodlight 計數器代碼

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

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

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

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

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

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

    「Choose trigger」對話方塊，其中「All pages」觸發條件已醒目顯示

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

    螢幕截圖：顯示「Floodlight Counter」代碼名稱欄位已變更為「Floodlight Counter」代碼

Floodlight 銷售

如要設定 Floodlight 銷售代碼，請按照下列步驟操作：

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

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

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

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

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

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

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

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

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

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

選用：設定強化轉換

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

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

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

如要在代碼管理工具中導入強化轉換，有以下 3 種做法： 您只需要選擇其中一個選項來收集使用者提供的資料。

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

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

如需控管資料格式和雜湊，請選擇程式碼設定。		 在網站上加入程式碼片段，傳送經雜湊處理的顧客數位資料，以供系統比對。
這種方法可確保轉換代碼觸發時能傳送格式一致的資料，因此是提升強化轉換準確度的最佳選項。
複雜度 簡單 中 複雜
技能 不需要特殊技能 HTML 和 CSS 網站開發

自動資料收集

  1. 在網路容器中開啟「變數」選單。
  2. 建立類型為「使用者提供的資料」的使用者定義變數。
  3. 將「類型」設為「自動收集資料」。
  4. 為變數命名，例如 My user-defined data。
  5. 按一下 [儲存]。

手動設定

  1. 在網路容器中開啟「變數」選單。
  2. 建立類型為「使用者提供的資料」的使用者定義變數。
  3. 將「類型」設為「手動設定」。

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

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

  6. 在「選取方式」下方，您可以使用 CSS 選取器或 ID。提示：如果 CSS 變數經常變更，請在網站中新增 HTML ID，然後使用 ID 變數。

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

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

  9. 為「使用者提供的資料」變數命名，例如 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. 建立類型為「使用者提供的資料」的使用者定義變數。
  3. 將「類型」設為「程式碼」。
  4. 找到您想提供的相關使用者資料欄位，點選下拉式選單，然後選取「新增變數」。
  5. 在「請選擇變數類型」下方，選取「資料層變數」。
  6. 在「資料層變數」中，參照您儲存的使用者資料。例如 leadsUserData。
  7. 為資料層變數命名並儲存。畫面隨即回到「使用者提供的資料」設定。
  8. 為「使用者提供的資料」變數命名，例如 My user-defined data。
  9. 按一下 [儲存]。

將變數指派給 Google 代碼

  1. 在網路容器中，開啟「代碼」選單。
  2. 編輯用於將資料傳送至標記伺服器的 Google 代碼。
  3. 在「配置設定」下方，新增名為 user_data 的新「配置參數」。將「值」設為「使用者提供的資料」變數，例如 {{My user-provided data}}。

  4. 儲存變更。代碼應如下所示：

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

設定伺服器端 Floodlight 代碼

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

alt_text

有了使用者提供的資料，您便可傳送網站上經雜湊處理且由使用者提供的第一方資料，進而改善評估準確度。如要實施這項功能，您必須先在 Search Ads 360 帳戶中同意使用者提供資料相關條款和政策。

如果您想為網站強化轉換納入使用者提供的資料，個人識別資訊 (PII) 應從網站 (用戶端容器) 傳送，再由伺服器端容器調度。如果不希望特定代碼調度 PII，請使用「轉換」功能，將所選代碼的 PII 塗改為黑色。

選用：收益值

Floodlight Sales 代碼會使用事件的 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. 「控制台」分頁會顯示資料傳輸至伺服器容器期間發生的任何錯誤。檢查並解決錯誤。

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

後續步驟

確認 Floodlight 代碼可正常運作後，您可以移除網頁容器中的所有同等 Floodlight 代碼，避免資料重複。