Halaman ini ditujukan untuk developer yang perlu mengonfigurasi tag Google menggunakan gtag.js. Untuk menyesuaikan setelan di antarmuka pengguna, lihat Mengonfigurasi setelan tag Google.
Setelah menginstal tag Google, Anda dapat memanggil perintah gtag() di mana pun dalam
kode Anda setelah cuplikan tag Google.
Halaman ini menunjukkan cara:
- Mengirimkan peristiwa ke produk Google menggunakan perintah
event - Menetapkan nilai yang dikirim dengan setiap peristiwa menggunakan perintah
set
Sebelum memulai
Tutorial ini mengasumsikan bahwa Anda telah melakukan tindakan berikut:
- Memahami cara kerja tag Google
- Menginstal tag Google
Untuk menyiapkan aliran data, Anda perlu:
- Akses ke kode situs tempat Anda menginstal tag Google
- ID tag produk Google yang ingin Anda hubungkan ke tag Google
Apa yang dimaksud dengan ID tag dan di mana menemukannya?
ID tag atau penampung mengidentifikasi penampung Google Tag Manager atau konfigurasi tujuan Google yang dimuat oleh cuplikan tag Google Anda. Penginstalan baru menggunakan ID penampung Google Tag Manager (GTM-) secara default, sedangkan ID khusus tujuan mengidentifikasi setiap produk Google. Tabel berikut memberikan ringkasan awalan ID yang didukung:| Awalan | Jenis ID | Deskripsi |
|---|---|---|
| GTM-XXXXXX | ID penampung Google Tag Manager (default) | ID default untuk penampung Google Tag Manager. Mendukung semua tag Google, tag pihak ketiga, dan tag kustom. |
| G-XXXXXX | ID khusus tujuan | Mengidentifikasi tujuan Google Analytics (ID Pengukuran). |
| AW-XXXXXX | ID khusus tujuan | Mengidentifikasi tujuan iklan Google Ads (ID Konversi). |
| DC-XXXXXX | ID khusus tujuan | Mengidentifikasi tujuan Floodlight (ID Pengiklan). |
| MC-XXXXXX | ID khusus tujuan | Mengidentifikasi tujuan Google Merchant Center. |
| GT-XXXXXX | ID tag Google | Mengidentifikasi tag Google yang dibuat di versi sebelumnya. |
Temukan ID tag Anda:
Langkah 1: Menghubungkan produk Google ke tag
Gunakan perintah config untuk membuat aliran data ke produk Google.
Tentang perintah config
Perintah config menentukan produk Google yang ingin Anda kirimi data peristiwa.
Perintah tersebut memiliki format berikut:
gtag('config', 'TAG_ID', {<additional_config_params>});
Parameter konfigurasi tambahan
Anda dapat menyesuaikan dan meluaskan perintah config dengan menentukan parameter dalam objek {<additional_config_params>} opsional. Misalnya, menambahkan parameter berikut akan mencegah kunjungan halaman Google Analytics dikirim secara otomatis:
gtag('config', 'TAG_ID', {'send_page_view': false});
Menyiapkan pengumpulan data
Untuk menyiapkan pengumpulan data untuk produk Google, tambahkan perintah config dengan ID tag.
Contoh
Tag Google (GT-XXXXXX) mengirimkan data ke tujuan yang telah Anda tentukan, misalnya, Google Ads dan Google Analytics.
Contoh berikut menunjukkan cara memperbarui kode untuk memuat tag Google kedua yang terhubung ke tujuan Floodlight.
Untuk mengirimkan data ke Floodlight (ID tag DC-ZZZZZZ), tambahkan perintah config
setelah menginisialisasi tag Google pertama (ID tag GT-XXXXXX):
<head>
...
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'GT-XXXXXX');
gtag('config', 'DC-ZZZZZZ');
</script>
</head>
Perilaku config khusus produk
Bergantung pada produk yang ditentukan dalam TAG_ID, perintah config juga dapat
memulai perilaku tertentu untuk produk tersebut. Misalnya, dalam beberapa kasus, perintah config memberi tahu gtag.js untuk memulai peristiwa tayangan halaman.
Untuk mempelajari lebih lanjut bagaimana perintah config akan berperilaku dalam kaitannya dengan tiap-tiap produk, baca dokumentasi khusus produk:
- Konversi dan pemasaran ulang Google Ads
- Campaign Manager dan Display & Video 360
- Search Ads 360
- Google Analytics
Langkah 2: Mengirimkan data dengan event
Setelah mengonfigurasi koneksi ke produk Google, Anda harus menggunakan perintah event
untuk mengirim data.
Tentang perintah event
Perintah event memungkinkan Anda mengirimkan data peristiwa ke produk yang Anda tentukan dengan
config. Perintah tersebut memiliki format berikut:
gtag('event', 'event_name', {
'key': 'value',
});
Tentang nama peristiwa dan key-value pair
Peristiwa yang direkomendasikan: Peristiwa yang direkomendasikan adalah peristiwa yang Anda terapkan, tetapi memiliki key-value pair standar. Peristiwa yang direkomendasikan memberikan kemampuan pelaporan yang ada dan mendatang.
Peristiwa kustom: Untuk menentukan peristiwa dan struktur data Anda sendiri, Anda dapat memasukkan nilai kustom untuk mengirimkan peristiwa kustom.
Menyiapkan peristiwa
Anda dapat memanggil metode event di mana pun dalam kode Anda setelah menginisialisasi tag Google.
Tentukan peristiwa. Jika Anda menggunakan peristiwa yang direkomendasikan, pastikan Anda menggunakan nama peristiwa standar dan key-value pair standar.
Tentukan kapan peristiwa akan dipicu, misalnya, jika peristiwa dikirimkan dengan pemuatan halaman atau saat seseorang mengklik tombol.
Contoh
Contoh berikut menggambarkan satu kemungkinan cara untuk mengukur pendaftaran newsletter saat pengguna mengklik tombol. Contoh tersebut menggunakan peristiwa kustom dan mengirimkannya ke properti Google Analytics.
<head>
...
/* 1. Initialize the Google tag and gtag.js library */
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments)};
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
</head>
<body>
<script>
let date = Date.now();
/* 2. Define your event. */
function newsletterSignup() {
gtag('event', 'newsletter_signup', {
'time': date,
});
}
</script>
...
/* 3. Trigger your event */
<button type="submit" onclick="newsletterSignup()">Sign me up!</button>
...
</body>
Opsional: Mengirimkan data dengan setiap peristiwa menggunakan set
Perintah set memungkinkan Anda menentukan parameter yang akan dikaitkan dengan setiap peristiwa berikutnya di halaman.
Misalnya, Anda dapat membagikan parameter kampanye agar dapat diakses oleh beberapa tag di halaman yang sama.
Perintah tersebut memiliki format berikut:
gtag('set', 'parameterName');
Langkah 3: Memvalidasi penyiapan
Untuk memastikan data peristiwa Anda dikirim dengan benar:
- Buka produk Google tempat Anda ingin melihat data.
- Periksa apakah data masuk. Setiap produk memiliki tempat yang berbeda untuk memeriksa apakah data diterima:
- Google Analytics: Periksa laporan Realtime.
- Google Ads: Periksa tabel Tindakan konversi dan lihat kolom Status (mungkin perlu waktu hingga 24 jam untuk memperbarui).
- Floodlight: Gunakan Tag Assistant untuk memverifikasi bahwa tag Floodlight diaktifkan.
Langkah berikutnya
Setelah menyiapkan produk dan peristiwa Google, Anda sudah selesai dengan konfigurasi tag Google dasar.
Jika Anda mengelola beberapa produk dan ingin mengelola aliran datanya secara lebih mendetail, lihat Mengelompokkan dan merutekan data.