[GA4] 設定程式碼片段 (代碼管理工具)

This feature is part of an open beta. Keep in mind that the feature is subject to change.

以下操作說明可協助管理員和編輯者瞭解如何使用 Google 代碼管理工具，在網站上設定程式碼片段來收集使用者提供的資料。

與其他設定方法相比，更新程式碼有助於確保 Analytics (分析) 在收集使用者提供的資料時，網頁上會顯示電子郵件地址、電話號碼和/或姓名及地址。

總覽

如要使用 Google 代碼管理工具設定程式碼片段，請完成下列步驟：

在網站程式碼中找出並定義使用者提供的資料欄位
將 JavaScript 自訂變數中的每個使用者提供資料欄位，傳遞至 Google Analytics (分析)

注意：您可以將經雜湊處理或未經雜湊處理的顧客數位資料傳送至 Google Analytics (分析)。如果傳送未經雜湊處理的資料，Google 會先為您雜湊處理資料，再儲存到 Google 伺服器。不過，您也可以先自行雜湊處理資料，再傳送給 Google。

事前準備

這些操作說明假設您已具備下列條件：

可存取網站原始碼
已啟用「收集使用者提供的資料」功能，並允許納入使用者提供的資料
在 Google 代碼管理工具容器中，設定 Google Analytics (分析)：GA4 事件代碼
Google Analytics (分析) 資源的管理員角色

Hashing the data

You can send hashed or unhashed data from a website. If you send unhashed data, Google normalizes and hashes the data before the data reaches Google's servers. To ensure Analytics interprets the data correctly and to comply with the User-provided data policy, you must use the correct key name (in the next section).

To hash the data:

Use hex SHA256.

To normalize the data:

Remove leading or trailing whitespaces.
Convert the text to lowercase.
Format phone numbers according to the E.164 standard.

Defining the fields in your code

You must provide at least one of these fields:

Email (preferred).
Address (first name, last name, postal code, and country are required). You can optionally provide street address, city, and region as additional match keys.
A phone number can also be provided along with an email or full name and address.

Make sure the data is available when the Google tag fires. If the data is collected on a previous page, make sure it’s available in your code on the current page so you can configure the field.

Fields to set

The following table describes each field you can set. The key name shows how you must reference the field in your code. You must pass the data as a String type. When defining name and address, make sure to define each component as an individual variable (for example, first name, last name, and so on).

Note: If you want to send unhashed data and let Google normalize and hash the data, use the first key name for each data field. For example, email in the Email address data field below. If you want to send hashed data, use the key name that begins with sha256_.

Data Field	Key Name	Description
Email address	`email`	User email. Example: ‘jdoe@example.com’
Email address	`sha256_email_address`	Hashed user email. Example: ‘a8af8341993604f29cd4e0e5a5a4b5d48c575436c38b28abbfd7d481f345d5db’
Phone number	`phone_number`	User phone number. Must be in E.164 format, which means it must be 11 to 15 digits including a plus sign (+) prefix and country code with no dashes, parentheses, or spaces. Example: ‘+11231234567’
Phone number	`sha256_phone_number`	Hashed user phone number. Example: ‘e9d3eef677f9a3b19820f92696be53d646ac4cea500e5f8fd08b00bc6ac773b1’
First name	`address.first_name`	User first name. Example: 'John'
First name	`address.sha256_first_name`	Hashed user first name. Example: ‘96d9632f363564cc3032521409cf22a852f2032eec099ed5967c0d000cec607a’
Surname	`address.last_name`	User last name. Example: 'Doe'
Surname	`address.sha256_last_name`	Hashed user last name. Example: ‘799ef92a11af918e3fb741df42934f3b568ed2d93ac1df74f1b8d41a27932a6f’
Street address	`address.street`	User street address. Example: '123 New Rd'
City	`address.city`	User city name. Example: `Southampton’
Region	`address.region`	User province, state, or region. Example: `Hampshire’
Postal code	`address.postal_code`	User post code. Example: 'SO99 9XX'
Country	`address.country`	User country code. Example: 'UK'. Use 2-letter country codes, per the ISO 3166-1 alpha-2 standard.

使用 JavaScript 自訂變數更新事件代碼

請先參閱本文，瞭解如何更新要加到容器的 JavaScript 自訂程式碼，再更新代碼管理工具容器。

登入 Google 代碼管理工具。
在「工作區」分頁中，按一下左側的「代碼」。
開啟用來收集顧客數位資料的「Google Analytics (分析)：GA4 事件」代碼。請確認事件代碼使用的評估 ID，屬於用於收集使用者資料的網站串流。
選取「納入使用者在您網站上提供的資料」。
在「使用者資料」下拉式選單中，選取或建立「使用者提供的資料」變數。
如要建立新的變數，請在「使用者提供的資料」變數中選取「程式碼」。
在「資料來源」下拉式選單中，按一下「新增變數...」。
依序按一下「變數設定」>「自訂 JavaScript」。
在頁面頂端輸入 JavaScript 自訂變數的名稱。
在「自訂 JavaScript」文字方塊中，輸入程式碼片段。瞭解詳情。
儲存新變數，然後儲存事件代碼。
按一下右上方的「提交」，發布變更。

建立程式碼片段來收集使用者提供的資料

在步驟 10 設定 JavaScript 自訂變數時，您可以使用下列程式碼：

function () {

return {

"email": 您的電子郵件變數 , // 將您的電子郵件變數替換成用來擷取使用者電子郵件的變數名稱

"phone_number": 您的電話號碼變數 , // 為您的電話號碼變數和下方變數名稱重複此步驟

"address": {

"first_name": 您的名字變數 ,

"last_name": 您的姓氏變數 ,

"street": 您的街道地址變數 ,

"city": 您的城市變數 ,

"region": 您的區域變數 ,

"postal_code": 您的郵遞區號變數 ,

"country": 您的國家/地區變數

}

請將程式碼範例中每種使用者資料的預留位置變數 (例如「您的電子郵件變數」)，替換成內含相關資料的全域 JavaScript 變數名稱。如果您的網站未收集上述任一欄位的資料，請將整個欄位移除，不要留空。

此外，您也可以使用字串對欄位進行硬式編碼，或是使用函式 (而不是變數)。

// Implement

        <script>

        gtag('set', 'user_data', {

"sha256_email_address": 您的正規化雜湊處理電子郵件變數,
"sha256_phone_number": 您的正規化雜湊處理電話號碼變數,
"address": {
"address.sha256_first_name": 您的正規化雜湊處理名字變數,
"address.sha256_last_name": 您的正規化雜湊處理姓氏變數,
"city": 您的城市變數,
"region": 您的區域變數,
"postal_code": 您的郵遞區號變數,
"country": 您的國家/地區變數

}

        });

        </script>

如要提供經雜湊處理的使用者資料值，您可以使用下列程式碼片段範例：

async function processUserData() {

      const userData = {

'sha256_email_address': await hashEmail(email.trim()),
'sha256_phone_number': await hashPhoneNumber(phoneNumber),
'address': {
'address.sha256_first_name': await hashName(firstName),
'address.sha256_last_name': await hashName(lastName),
'city': city,
'region': region,
'postal_code': postalCode,
'country': country,

},

      };

      return userData;

電話號碼必須採用 E.164 格式，也就是 11 到 15 位數，內含加號 (+) 前置字元和國家/地區代碼，但不含破折號、方括號或空格。

Next steps

Validate that user-provided data collection is set up correctly. Show me how.

這對您有幫助嗎？

我們應如何改進呢？