透過伺服器端代碼管理工具,您可以將 Google Ads 轉換追蹤代碼從網頁移至伺服器。將這些代碼移至伺服器可減少您在網頁中執行的程式碼,提升網頁載入速度。 本文將說明如何設定代碼管理工具的網站容器和伺服器容器,以使用 Google Ads 轉換追蹤。
事前準備
本文假設您已經:
- Google Ads 和 Google 代碼管理工具的管理員權限
- 設定 Google 代碼管理工具
- 已建立伺服器容器
- 設定 Google Analytics (分析):GA4 用戶端
步驟 1:設定轉換連接器代碼
若要允許 Google Ads 將資料傳送至代碼管理工具,您必須設定轉換連接器代碼。
如果您已在伺服器容器中設定轉換連接器代碼,可以略過這個步驟。
如何設定轉換連接器代碼:
- 在伺服器容器工作區中,開啟頁面左側的「Tag」選單。
- 按一下「新增」新增代碼。
- 選取「轉換連接器」代碼類型。
- 設定導致「轉換連接器」伺服器端代碼觸發的觸發條件。
在大多數情況下,「所有網頁」觸發條件是最佳選項。 - 為代碼命名並按一下「Save」。
步驟 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 事件」代碼中使用的事件名稱相符的事件名稱。
如果只想在特定網址上觸發:
- 選取在「部分自訂事件」上觸發的選項。
- 新增「Page URL」變數,指定代碼應觸發的網址。
為代碼命名並按一下「儲存」。
選用:設定轉換價值
您可以指定與預設的 value
參數不同的轉換價值,例如將價格資料儲存在不同的資料庫中。如要指定不同的計算轉換價值,您必須設定變數來提取資料庫中的資料,並指派給 Google Ads 轉換追蹤代碼。
如何建立新變數:
- 在伺服器容器中,開啟「變數」選單。
- 為資料輸入建立新的使用者定義變數。例如,如要使用 Firestore 資料庫中的值,請建立{{Firestore Lookup}} 變數。
- 指定變數的資料來源。
- 為變數命名,例如「利潤查詢」,然後「儲存」。
在 Google Ads 轉換追蹤代碼中設定自訂轉換價值:
- 在伺服器容器中,開啟「代碼」選單。
- 編輯現有的 Google Ads 轉換追蹤代碼或建立新的代碼。
如要設定自訂轉換價值,請指定下列兩個欄位:
- Conversion Value:請輸入固定金額或指定之前建立的變數。
- 貨幣代碼
儲存代碼。
步驟 4:強化轉換
若您未使用強化轉換,請直接跳至「驗證設定」一節。
如要設定強化轉換,請按照下列步驟操作。
設定使用者提供的資料變數
您可以透過 3 種方式在代碼管理工具中導入強化轉換。 您只需要選擇其中一個選項來收集使用者提供的資料。
自動收集 | 手動設定 | 程式碼設定 | |
---|---|---|---|
收集方法 | 根據網站程式碼自動收集使用者提供的資料。 如要控管輸入內容的收集位置,請選擇手動或程式碼設定。 |
指定 CSS 屬性或 JavaScript 變數來收集使用者提供的資料。 如果需要控管資料格式和雜湊處理,請選擇啟用程式碼設定。 |
在網站上加入程式碼片段,傳送經雜湊處理的客戶資料以進行比對。 這種方法最適合在轉換標記觸發時傳送格式一致的資料,盡可能提高強化轉換的準確度。 |
複雜度 | 簡單易用 | 中 | 複合式 |
技能 | 不需要特殊技能 | HTML 和 CSS | 網站開發 |
自動資料收集
- 在網站容器中,開啟「變數」選單。
- 建立類型為「User-Provided Data」的新使用者定義的變數。
- 將「類型」設為「自動收集」。
- 為變數命名,例如
My user-defined data
。 - 點按「儲存」。
手動設定
- 在網站容器中,開啟「變數」選單。
- 建立類型為「User-Provided Data」的新使用者定義的變數。
- 將「類型」設為「手動設定」。
針對您想透過強化轉換提供的相關使用者資料欄位,加入新的或現有變數。
如要透過 DOM 指定元素,請建立「新增變數」>「變數設定」>「DOM 元素」。
在「選取方式」下方,您可以使用 CSS 選取器或 ID。 提示:如果 CSS 變數經常變更,請將 HTML ID 加到網站並使用 ID 變數。
輸入 CSS 選取器或 ID 名稱。您可以將「屬性名稱」欄位留空。
為 DOM 元素變數命名並儲存。接著,畫面會回到「使用者提供的資料」設定。
將「User-Provided Data」變數命名為
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:建立使用者提供的資料變數
- 在網站容器中,開啟「變數」選單。
- 建立類型為「User-Provided Data」的新使用者定義的變數。
- 將「Type」設為「Code」。
- 針對您要提供的相關使用者資料欄位,點選下拉式選單,然後選取「新增變數」。
- 在「Choose Variable Type」下方,選取「資料層變數」。
- 在「資料層變數」中,參照您儲存的使用者資料。例如
leadsUserData
。 - 為資料層變數命名並儲存。接著,畫面會回到「使用者提供的資料」設定。
- 將「User-Provided Data」變數命名為
My user-defined data
, - 點按「儲存」。
將變數指派給 Google 代碼
- 在網站容器中,開啟「代碼」選單。
- 編輯用於傳送資料到標記伺服器的 Google 代碼。
- 在「Configuration settings」下方,新增名為
user_data
的新設定參數。將「Value」設為「User- provided Data」變數,例如{{My user-provided data}}
。 點選「儲存」儲存變更。代碼應如下所示:
設定伺服器端廣告轉換追蹤代碼
如要在伺服器容器中啟用強化轉換,請按照下列步驟操作:
- 在伺服器工作區中開啟「代碼」選單。
- 修改 Google Ads 轉換追蹤代碼。
- 勾選「納入使用者提供的資料」核取方塊。
- 按下「儲存」以儲存變更。
步驟 5:驗證設定
開始透過伺服器容器傳送資料後,您可以按照下列步驟檢查資料是否正常運作:
- 開啟網站。
- 在 Google 代碼管理工具伺服器容器中,選取「預覽」。 Tag Assistant 會啟動並載入伺服器容器。
- 「代碼」分頁會顯示所有已觸發的代碼。請確認您設定的代碼是否觸發。
- 「Console」分頁會顯示資料傳輸至伺服器容器期間發生的任何錯誤。檢查並解決錯誤。
如需更多代碼管理工具容器偵錯相關說明,請參閱預覽及偵錯說明。
後續步驟
Google Ads 轉換追蹤代碼正常運作後,您可以在網站容器中移除任何對應的 Google Ads 轉換追蹤代碼,以免資料重複。
如果您也使用 Google Ads 再行銷廣告活動,且想要透過伺服器端代碼評估這些廣告活動,請設定 Google Ads 再行銷。