伺服器端代碼管理工具可讓您將 Google Ads 轉換追蹤代碼從網頁移至伺服器。將這些代碼移至伺服器後,您在網頁中執行的程式碼數量就會減少,有助於提升網頁載入速度。本文將說明如何設定代碼管理工具網站容器和伺服器容器,以便使用 Google Ads 轉換追蹤。
事前準備
本文假設您已具備下列條件:
- Google Ads 和 Google 代碼管理工具中的管理員權限
- 設定 Google 代碼管理工具
- 建立伺服器容器
- 設定 Google Analytics:GA4 用戶端
步驟 1:設定轉換連接器代碼
為了讓 Google Ads 傳送資料至代碼管理工具,您必須設定「轉換連接器」代碼。
如果您已在伺服器容器中設定轉換連接器代碼,可以略過這個步驟。
如要設定轉換連接器代碼,請按照下列步驟操作:
- 在伺服器容器工作區中,開啟頁面左側的「代碼」選單。
- 按一下「新增」加入新代碼。
- 選取「轉換連接器」代碼類型。
- 設定可讓「轉換連接器」伺服器端代碼觸發的觸發條件。
在大多數情況下,「所有網頁」觸發條件是最合適的選項。 - 輸入代碼名稱,然後按一下「儲存」。
步驟 2:設定重要事件
如要設定重要事件,您必須完成以下兩個步驟:
- 設定 Google Analytics,讓系統將事件視為重要事件。
- 在代碼管理工具網站容器中設定 Google Analytics:GA4 事件代碼,以便傳送重要事件。
如果您已設定重要事件,但只需要導入伺服器代碼,請直接跳到步驟 3。
設定 Google Analytics 以辨識自訂重要事件
如要在 Google Analytics 中定義新的重點事件,請按照下列步驟操作:
- 開啟 Google Analytics 4
- 開啟左下方的 「管理」選單。
- 在資源設定清單中,選取 「重要事件」。
- 按一下「新重要事件」按鈕,然後新增重要事件名稱。這可以是建議事件名稱或自訂事件。
- 儲存事件名稱。
在 Google 代碼管理工具中設定重要事件
如果您的重要事件觸發的是「網頁瀏覽」事件,請直接跳到步驟 3。
如要設定重要事件,請按照下列步驟操作:
在網站容器工作區中加入「Google Analytics:GA4 事件」代碼。
在「設定代碼」中,選取網站的 Google 代碼。
輸入與重要事件對應的事件名稱。
步驟 3:在伺服器容器中設定 Google Ads 轉換追蹤代碼
如要設定 Google Ads 轉換追蹤代碼,請按照下列步驟操作:
- 在伺服器容器工作區中,開啟網頁左側的「Tag」選單。
- 按一下「新增」即可加入新代碼。
選取「Google Ads 轉換追蹤」代碼類型。
輸入必要的轉換資訊 (轉換 ID 和標籤)。您可以在 Google Ads 帳戶中找到這些值。
在「觸發條件」選單中,選取符合您用途的現有觸發條件。如果現有的觸發條件未涵蓋您的需求,請建立新的自訂觸發條件 。
如要針對自訂事件觸發代碼,請按照下列步驟操作:
- 選擇「自訂事件」觸發條件。
- 輸入與 Google Analytics:GA4 事件代碼中使用的事件名稱相符的名稱。
如要只在特定網址觸發事件:
- 選取「部分自訂事件」的觸發條件。
- 新增 網頁網址變數,等同於代碼應觸發的網址。
輸入代碼名稱,然後按一下「儲存」。
選用:設定轉換價值
您可以指定與預設 value
參數不同的轉換價值,例如將定價資料儲存在其他資料庫中。若要指定其他計算轉換價值的依據,您必須設定變數,從資料庫提取資料,然後指派給 Google Ads 轉換追蹤代碼。
如要建立新變數,請按照下列步驟操作:
- 在伺服器容器中,開啟「變數」選單。
- 為資料輸入建立新的使用者定義變數。舉例來說,如果您想使用 Firestore 資料庫中的值,請建立 {{Firestore Lookup}} 變數。
- 指定變數的資料來源。
- 為變數命名 (例如「利潤查詢」),然後按一下「儲存」。
在 Google Ads 轉換追蹤代碼中設定自訂轉換價值:
- 在伺服器容器中,開啟「代碼」選單。
- 修改現有的 Google Ads 轉換追蹤代碼或建立新的代碼。
如要設定自訂轉換價值,請指定下列兩個欄位:
- Conversion Value:輸入固定金額,或指定您之前建立的變數。
- 幣別代碼
儲存代碼。
步驟 4:強化轉換
如要設定強化轉換,請按照下列步驟操作。
設定使用者提供的資料變數
您可以透過下列 3 種方式在代碼管理工具中導入強化轉換。 您只需要選擇其中一個選項來收集使用者提供的資料。
自動收集 | 手動設定 | 程式碼設定 | |
---|---|---|---|
收集方法 | 根據網站程式碼自動收集使用者提供的資料。 如需控管收集輸入內容的位置,請選擇手動或程式碼設定。 |
指定 CSS 屬性或 JavaScript 變數來收集使用者提供的資料。 如需控管資料格式和雜湊,請選擇程式碼設定。 |
在網站上加入程式碼片段,來傳送經雜湊處理的客戶資料以進行比對。 這個方法能讓您在每次轉換標記觸發時傳送一致的格式資料,盡可能提高強化轉換準確度。 |
複雜度 | 簡單 | 中 | 複雜 |
技能 | 不需要特殊技能 | HTML 和 CSS | 網站開發 |
自動資料收集
- 在網路容器中開啟「變數」選單。
- 新建類型為「使用者提供的資料」的「使用者定義變數」。
- 將「類型」設為「自動收集資料」。
- 為變數命名,例如
My user-defined data
。 - 按一下 [儲存]。
手動設定
- 在網路容器中開啟「變數」選單。
- 新建類型為「使用者提供的資料」的「使用者定義變數」。
- 將「類型」設為「手動設定」。
針對您想透過強化轉換提供的相關使用者資料欄位,加入新的或現有的變數。
如要透過 DOM 指定元素,請建立「新增變數」>「變數設定」>「DOM 元素」。
在「選取方式」下方,您可以使用 CSS 選取器或 ID。提示:如果 CSS 變數經常變更,請在網站中新增 HTML ID,然後使用 ID 變數。
輸入 CSS 選取器或 ID 名稱。您可以將「屬性名稱」欄位留空。
命名並儲存 DOM 元素變數。畫面隨即回到「使用者提供的資料」設定。
為「使用者提供的資料」變數命名,例如
My user-defined data
。按一下 [儲存]。
程式碼設定
步驟 1:識別並定義強化轉換變數
您可以傳送未經雜湊處理的資料,而 Google 會在資料送達伺服器前進行雜湊處理;也可以預先對資料進行雜湊處理。如果您決定傳送預先雜湊的資料,請使用十六進位編碼 SHA256 編碼資料。無論是哪一種情況,請至少提供下列其中一個欄位:email 或 phone_number。
如要將未經雜湊處理的資料推送至資料層,請按照下列步驟操作:
在網站上,將使用者提供的資料以鍵/值組合的形式儲存在 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', }, };
使用 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
變數。
如要將預先雜湊處理資料推送至資料層,請按照下列步驟操作:
在網站上,使用十六進位編碼 SHA256 對使用者提供的資料進行雜湊處理。編碼資料的金鑰開頭必須為
sha256_
。例如:{'sha256_email_address':await hashEmail(email.trim()), }
使用
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:建立使用者提供的資料變數
- 在網路容器中開啟「變數」選單。
- 建立新的「使用者定義變數」,類型為「使用者提供的資料」。
- 將「類型」設為「程式碼」。
- 找到您想提供的相關使用者資料欄位,點選下拉式選單,然後選取「新增變數」。
- 在「請選擇變數類型」下方,選取「資料層變數」。
- 在「資料層變數」中,參照您儲存的使用者資料。例如
leadsUserData
。 - 為資料層變數命名並儲存。畫面隨即回到「使用者提供的資料」設定。
- 為「使用者提供的資料」變數命名,例如
My user-defined data
。 - 按一下 [儲存]。
將變數指派給 Google 代碼
- 在網路容器中開啟「代碼」選單。
- 編輯用於將資料傳送至標記伺服器的 Google 代碼。
- 在「配置設定」下方,新增名為
user_data
的新「配置參數」。將「值」設為「使用者提供的資料」變數,例如{{My user-provided data}}
。 儲存變更。代碼應如下所示:
設定伺服器端廣告轉換追蹤代碼
如要在伺服器容器中啟用強化轉換,請按照下列步驟操作:
- 在伺服器工作區中,開啟「代碼」選單。
- 編輯 Google Ads 轉換追蹤代碼。
按下「儲存」即可儲存變更。
步驟 5:驗證設定
開始透過伺服器容器傳送資料後,您可以按照下列步驟確認是否正常運作:
- 開啟網站。
- 在 Google 代碼管理工具伺服器容器中,選取「預覽」。Tag Assistant 會啟動並載入伺服器容器。
- 「代碼」分頁會顯示所有已觸發的代碼。請務必檢查所設定的代碼是否已觸發。
- 「控制台」分頁會顯示傳送資料至伺服器容器期間發生的任何錯誤。檢查並解決錯誤。
如需更多代碼管理工具容器偵錯說明,請參閱預覽和偵錯說明。
後續步驟
Google Ads 轉換追蹤代碼正常運作後,您可以移除網頁容器中的所有等效 Google Ads 轉換追蹤代碼,避免資料重複。
如果您也使用 Google Ads 再行銷廣告活動,且想使用伺服器端代碼評估成效,請設定 Google Ads 再行銷。