Mengonfigurasi produk Google dan mengirimkan data peristiwa

Halaman ini untuk developer yang perlu mengonfigurasi tag Google menggunakan gtag.js. Tag Google juga memungkinkan Anda menyesuaikan beberapa setelan di antarmuka pengguna, lihat Mengonfigurasi setelan tag Google Anda.

Setelah menginstal tag Google, Anda dapat memanggil perintah gtag() di mana pun dalam kode Anda setelah cuplikan tag Google.

Halaman ini menunjukkan cara:

  1. Membuat aliran data antara situs Anda dan produk Google menggunakan perintah config
  2. Mengirimkan peristiwa ke produk Google menggunakan perintah event
  3. Menetapkan nilai yang dikirim dengan setiap peristiwa menggunakan perintah set

Sebelum memulai

Tutorial ini mengasumsikan bahwa Anda telah melakukan tindakan berikut:

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 mengidentifikasi tag Google. Satu tag Google dapat memiliki beberapa ID tag. Misalnya, jika menggunakan Google Ads, tag Anda memiliki dua ID: Satu ID lama (AW) dan satu ID tag Google (GT). Layar menampilkan tag Google dalam Google Ads dengan dua ID tag. ID tag dapat dipertukarkan. Tabel berikut berisi ringkasan tag yang kompatibel dengan tag Google.
Awalan Jenis ID Deskripsi
GT-XXXXXX Tag Google Setiap tag Google yang baru dibuat akan mendapatkan awalan GT dan ID unik.
G-XXXXXX Tag Google (awalan lama) Tag Google Analytics adalah tag Google dengan awalan G dan ID unik.
AW-XXXXXX Tag Google (awalan lama) Tag Google Ads adalah tag Google dengan awalan AW dan ID unik.
DC-XXXXXX Tag Google (awalan lama) Tag Floodlight Google adalah tag Google dengan awalan DC dan ID unik.
Tag Universal Analytics (UA) tidak kompatibel dengan tag Google (GT).

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 Anda tentukan untuknya, 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 di 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 perilaku perintah config terkait produk tertentu, baca dokumentasi khusus produk:

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 mengirim 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.

  1. Tentukan peristiwa. Jika Anda menggunakan peristiwa yang direkomendasikan, pastikan Anda menggunakan nama peristiwa standar dan kunci-nilai standar.

  2. 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 ini 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 sehingga 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:

  1. Buka produk Google yang datanya ingin Anda lihat.
  2. 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 diperbarui).
    • Floodlight: Gunakan Tag Assistant untuk memverifikasi bahwa tag Floodlight diaktifkan.

Langkah berikutnya

Setelah menyiapkan produk dan peristiwa Google, Anda telah menyelesaikan konfigurasi dasar tag Google.

Jika Anda mengelola beberapa produk dan ingin mengelola aliran datanya secara lebih mendetail, lihat Mengelompokkan dan merutekan data.