[GA4] Menyiapkan cuplikan kode (Tag Manager)

Fitur ini adalah bagian dari versi beta terbuka dan dapat berubah sewaktu-waktu.

Petunjuk ini ditujukan bagi administrator dan editor yang ingin mempelajari cara menyiapkan cuplikan kode untuk pengumpulan data yang disediakan pengguna di situs mereka menggunakan Google Tag Manager.

Memperbarui kode, jika dibandingkan dengan opsi konfigurasi lainnya, akan membantu memastikan alamat email, nomor telepon, dan/atau nama dan alamat tersedia di halaman saat Analytics mengumpulkan data yang disediakan pengguna.

Ringkasan

Untuk menyiapkan cuplikan kode menggunakan Google Tag Manager, selesaikan langkah-langkah berikut:

Mengidentifikasi dan menentukan kolom data yang disediakan pengguna di kode situs Anda
Meneruskan setiap kolom data yang disediakan pengguna di variabel JavaScript kustom ke Google Analytics

Catatan: Anda dapat mengirimkan data pelanggan yang di-hash atau tidak di-hash ke Google Analytics. Saat Anda mengirimkan data yang tidak di-hash, Google akan melakukan hashing pada data sebelum menyimpan data tersebut di server Google. Namun, Anda juga dapat melakukan hashing pada data sebelum mengirim data tersebut ke Google.

Sebelum memulai

Petunjuk ini mengasumsikan bahwa Anda telah:

Memiliki akses ke kode sumber situs Anda
Mengaktifkan pengumpulan data yang disediakan pengguna dan mengizinkan penyertaan data yang disediakan pengguna
Menyiapkan tag Google Analytics: Peristiwa GA4 di penampung Google Tag Manager
Memiliki peran Administrator di properti 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: ‘[email protected]’
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.

Memperbarui tag peristiwa dengan variabel JavaScript kustom

Sebelum memperbarui penampung Tag Manager, baca tentang cara memperbarui kode JavaScript kustom yang akan Anda tambahkan ke penampung.

Login ke Google Tag Manager.
Dari tab Ruang kerja, klik Tag di sebelah kiri.
Buka tag Google Analytics: Peristiwa GA4 tempat Anda mengumpulkan data pelanggan. Pastikan tag peristiwa menggunakan ID pengukuran untuk aliran data web tempat data pengguna dikumpulkan.
Pilih Sertakan data yang disediakan pengguna dari situs Anda.
Di menu drop-down Data Pengguna, pilih atau buat variabel Data yang Disediakan Pengguna.
Jika Anda membuat variabel baru, pada variabel Data yang Disediakan Pengguna, pilih Kode.
Di menu drop-down Sumber Data, klik Variabel Baru....
Klik Konfigurasi Variabel > JavaScript Kustom.
Masukkan nama untuk variabel JavaScript kustom di bagian atas halaman.
Di kotak teks JavaScript Kustom, masukkan cuplikan kode. Pelajari caranya.
Simpan variabel baru, lalu simpan tag peristiwa.
Di kanan atas, klik Kirim untuk memublikasikan perubahan.

Membuat cuplikan kode untuk mengumpulkan data yang disediakan pengguna

Anda dapat menggunakan kode berikut saat menyiapkan variabel JavaScript kustom di langkah 10:

function () {

return {

"email": yourEmailVariable , // ganti yourEmailVariable dengan nama variabel yang mengambil alamat email pengguna Anda

"phone_number": yourPhoneVariable , // ulangi untuk yourPhoneVariable dan nama variabel di bawah

"address": {

"first_name": yourFirstNameVariable ,

"last_name": yourLastNameVariable ,

"street": yourStreetAddressVariable ,

"city": yourCityVariable ,

"region": yourRegionVariable ,

"postal_code": yourPostalCodeVariable ,

"country": yourCountryVariable

}

Untuk setiap jenis data pengguna dalam contoh kode, ganti variabel placeholder (misalnya, yourEmailVariable) dengan nama variabel JavaScript global yang berisi sebagian data tersebut. Jika situs Anda tidak mengumpulkan salah satu kolom tersebut, hapus kolom tersebut, jangan dikosongkan.

Atau, Anda dapat melakukan hardcode pada kolom dengan string atau menggunakan fungsi, bukan menggunakan variabel.

// Implement

        <script>

        gtag('set', 'user_data', {

"sha256_email_address": yourNormalizedandHashedEmailVariable,
"sha256_phone_number": yourNormalizedandHashedPhoneVariable,
"address": {
"address.sha256_first_name": yourNormalizedandHashedFirstNameVariable,
"address.sha256_last_name": yourNormalizedandHashedLastNameVariable,
"city": yourCityVariable,
"region": yourRegionVariable,
"postal_code": yourPostalCodeVariable,
"country": yourCountryVariable

}

        });

        </script>

Jika ingin memberikan nilai data pengguna yang di-hash, Anda dapat menggunakan contoh cuplikan berikut:

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;

Nomor telepon harus dalam format E.164, yang berarti harus terdiri dari 11 sampai 15 digit, termasuk awalan tanda plus (+) dan kode negara tanpa tanda hubung, tanda kurung, atau spasi.

Next steps

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

Apakah ini membantu?

Bagaimana cara meningkatkannya?