Mengintegrasikan tag Google ke CMS atau pembuat situs

Tag Google (gtag.js) adalah cuplikan kode yang dapat ditambahkan ke situs untuk mengukur aktivitas pengguna di berbagai produk Google, termasuk Google Analytics 4, Google Ads, dan Google Marketing Platform. Pelajari tag Google lebih lanjut

Panduan ini menjelaskan cara mengintegrasikan tag Google ke Sistem Pengelolaan Konten (CMS) atau pembuat situs untuk memberi pengguna akhir akses ke produk pengukuran Google.

Audiens

Panduan ini ditujukan untuk pembuat situs atau pemilik Sistem Pengelolaan Konten (CMS) yang ingin menyediakan integrasi dengan produk pengukuran Google kepada penggunanya. Panduan ini tidak ditujukan untuk pengguna CMS atau pembuat situs.

Sebelum memulai

Pastikan Anda memiliki ID Developer tag Google. Jika Anda belum memiliki ID Developer tag Google, isi formulir permintaan ID Developer tag Google. ID Developer Anda berbeda dengan ID lain, seperti ID Pengukuran atau ID Konversi, yang ditambahkan pengguna akhir ke kode pengukuran situs mereka.

Ringkasan

Untuk mengintegrasikan platform Anda dengan produk Google, ikuti langkah-langkah berikut:

  1. Membuat integrasi dengan tag Google
  2. Memperbarui struktur input pengguna
  3. Menerapkan Consent API
  4. Menyiapkan data peristiwa
  5. Memverifikasi integrasi yang diperbarui
  6. Memperbarui petunjuk deployment pengguna

Membuat integrasi dengan tag Google

Dengan membuat integrasi dengan tag Google, pelanggan Anda dapat men-deploy produk pengukuran Google (melalui gtag.js) di setiap halaman situs mereka. Pastikan untuk menghapus integrasi tag lama yang ada (misalnya, analytics.js) sebelum membuat integrasi dengan gtag.js.

Untuk membuat integrasi dengan tag Google, ganti cuplikan kode yang ada dengan cuplikan berikut. Pastikan pengguna dapat mengganti TAG_ID dengan ID Tag mereka sendiri.

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

Perhatikan hal berikut:

  • Pengiklan dapat memilih untuk tidak menggunakan fitur personalisasi iklan seperti pemasaran ulang dengan parameter allow_ad_personalization_signals (lihat artikel Menonaktifkan pengumpulan data iklan yang dipersonalisasi.
  • Idealnya, cuplikan tag Google hanya muncul satu kali per halaman. Cuplikan tersebut dapat mengakomodasi beberapa ID tag. Jika sudah ada instance gtag.js, Anda harus menambahkan ID tag baru ke tag yang ada. Pelajari lebih lanjut

Memperbarui struktur input pengguna

Pelanggan Anda harus dapat menyediakan beberapa bentuk ID tag Google mereka melalui satu antarmuka, apa pun produk pengukuran Google yang mereka deploy.

Misalnya, gambar berikut menunjukkan input tag Google sederhana. Integrasi tersebut harus diasumsikan sebagai deployment untuk tag Google. Dengan kata lain, integrasi ini dapat dianggap sebagai metode untuk menerapkan Google Ads dan Google Analytics.

Gambar kotak input ID tag Google

Atau, diagram berikut menunjukkan bagaimana sebuah platform mungkin memiliki alur penggunaan terpisah untuk Analytics dan Ads, tetapi setiap alur mengarah ke satu antarmuka tempat pengguna menyediakan ID tag Google.

Gambar alur Analytics dan Ads yang mengarah ke satu input

Input ID tag harus dapat menerima lebih dari satu varian ID menggunakan pola ekspresi reguler [AZ]{1,3}\w{5,}[\w]*

Tag Google memiliki Consent API bawaan untuk mengelola izin pengguna. Consent API dapat membedakan izin pengguna untuk cookie yang digunakan untuk tujuan iklan dengan cookie yang digunakan untuk tujuan analisis.

Hasil yang diharapkan adalah pelanggan mendapatkan setidaknya panggilan gtag('consent', 'update' {...}) yang terintegrasi tanpa perlu tindakan apa pun dari pelanggan. Dengan begitu, tag Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) dapat membaca status izin pengguna terbaru dan menyertakan status tersebut dalam permintaan jaringan kepada Google (melalui parameter &gcs).

Langkah-langkah penerapan tambahan adalah men-deploy atau membantu pengiklan dalam men-deploy (misalnya, melalui UI) status gtag('consent', default' {...}) dan membatalkan pemblokiran tag Google (yaitu, tanpa pengaktifan bersyarat berbasis izin) untuk mengaktifkan mode izin guna mengaktifkannya dengan cara yang berdasarkan izin.

Untuk mengetahui detail penerapan, lihat artikel Mengelola setelan izin (web).

Menyiapkan data peristiwa

Anda harus mengirimkan data peristiwa lengkap dari situs pelanggan ke Akun Google mereka tanpa perlu tindakan apa pun dari pelanggan. Misalnya, Anda dapat menambahkan peristiwa di sepanjang funnel pembelian (yaitu, add_to_cart, begin_checkout, add_payment_info, add_shipping_info, dan purchase), perolehan prospek, dan pendaftaran.

Berikut adalah praktik terbaik untuk menambahkan peristiwa:

  • Mencatat semuanya jika memungkinkan
  • Menyiapkan setidaknya 8 peristiwa inti
  • Memprioritaskan peristiwa e-commerce

Mencatat semuanya jika memungkinkan

Jika memungkinkan, Anda harus menyiapkan peristiwa secara default. Peristiwa tersebut mencakup:

  • Peristiwa konversi seperti purchase atau sign_up
  • Peristiwa sebelum peristiwa konversi seperti add_to_cart
  • Interaksi perilaku seperti interaksi media yang membantu pelanggan memahami cara mereka berinteraksi dengan pengguna akhir

Anda harus menambahkan cuplikan peristiwa konversi ke halaman konversi saja (mis., konfirmasi pembelian, konfirmasi pengiriman formulir). Perlu diketahui bahwa Anda tetap harus menambahkan tag Google di setiap halaman situs.

Peristiwa dikirim menggunakan perintah event. Perintah ini mencakup ID Developer tag Google yang sama dengan yang Anda sertakan dalam tag situs global yang dijelaskan di atas: 

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

Misalnya, Anda dapat menggunakan perintah event untuk mengirim peristiwa login dengan nilai method "Google":

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

Perhatikan hal berikut:

  • ID Developer Anda <developer ID> bersifat unik dan spesifik untuk platform Anda. Sertakan ID ke setiap peristiwa.
  • Parameter berikut bersifat opsional dan dapat dihilangkan:
    • 'value' adalah nilai numerik konversi (mis., harga pembelian)
    • 'currency' adalah kode mata uang tiga huruf yang berguna untuk pengiklan yang menerima beberapa mata uang
    • 'transaction_id' adalah ID unik untuk transaksi (mis., ID pesanan); yang digunakan untuk tujuan penghapusan duplikat.
  • Meskipun beberapa parameter bersifat opsional, sebaiknya Anda menyertakan sebanyak mungkin informasi yang tersedia untuk setiap peristiwa.
    • Parameter memberikan informasi tambahan tentang interaksi pengguna dengan situs atau aplikasi Anda. Misalnya, saat seseorang melihat produk yang Anda jual, Anda dapat menyertakan parameter yang mendeskripsikan produk yang mereka lihat, seperti nama, kategori, dan harga.
    • Beberapa parameter akan otomatis mengisi dimensi dan metrik bawaan di Google Analytics dan memberi pengguna pemahaman yang lebih baik tentang pelanggan mereka.

Jika ingin mengukur peristiwa konversi berdasarkan klik (mis., klik pada tombol atau respons dinamis untuk situs yang menggunakan AJAX), Anda juga dapat menggunakan cuplikan berikut:

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

Menyiapkan setidaknya 8 peristiwa inti

Sebaiknya siapkan kumpulan peristiwa inti yang paling bernilai bagi pemilik situs. Minimal, Anda sebaiknya menyiapkan peristiwa berikut:

  • view_item_list: saat pengguna melihat daftar item (mis., daftar produk). Pelajari lebih lanjut

    gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

  • add_to_cart: saat pengguna menambahkan satu atau beberapa produk ke keranjang belanja. Pelajari lebih lanjut

    gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • begin_checkout: saat pengguna memulai proses checkout untuk satu atau beberapa produk. Pelajari lebih lanjut

    gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • purchase: saat pengguna membeli satu atau beberapa produk atau layanan. Pelajari lebih lanjut

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});

  • sign_up: saat pengguna mendaftar, sehingga pengguna akhir dapat melihat metode pendaftaran yang paling populer (mis., Akun Google, alamat email). Pelajari lebih lanjut

    gtag('event', 'sign_up', {method: 'web'});

  • generate_lead: saat pengguna mengirimkan formulir. Pelajari lebih lanjut

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});

  • subscribe: saat pengguna berlangganan layanan atau newsletter.

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});

  • book_appointment: saat pengguna membuat janji temu.

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

Rekomendasi tambahan

Google mendukung banyak peristiwa dan parameter lainnya, khususnya untuk e-commerce. Secara umum, sebaiknya Anda menangkap peristiwa berikut:

  • Semua peristiwa sukses yang terkait langsung dengan nilai
  • Peristiwa sukses yang berkontribusi pada konversi inti (add_to_cart, sign_up, dll.)
  • Engagement dan interaksi pengguna yang membantu pengiklan memahami cara mereka berinteraksi dengan pengguna akhir

Berikut adalah referensi tambahan yang menjelaskan pengumpulan peristiwa lebih lanjut:

Kami ingin membahas kemungkinan ekstensi untuk skema ini, jadi beri tahu kami jika Anda memiliki saran.

Memverifikasi integrasi yang diperbarui

Sebelum menerapkan perubahan ke produksi, verifikasi kompatibilitasnya dengan hal berikut:

  • Tag Google Anda dengan tujuan Google Analytics 4
  • Tag Google Anda untuk pemasaran ulang dan pengukuran konversi

Selain itu, pastikan bahwa tag diaktifkan dengan benar di semua halaman, termasuk halaman konversi, menggunakan salah satu alat berikut:

  • Google Tag Assistant: Tag Assistant memungkinkan Anda melihat tag Google mana yang telah diaktifkan beserta urutannya. Mode debug Tag Assistant menampilkan data yang diteruskan ke lapisan data, dan peristiwa yang memicu pertukaran data tersebut.
  • Chrome Developer Tools: Gunakan tab Jaringan untuk memfilter permintaan yang berisi "google" untuk memverifikasi cara data dikirim.
  • (Sisi server) Laporan real-time Google Analytics: Buat akun Google Analytics gratis dan gunakan laporan Real-Time untuk melihat apakah hit tag diterima oleh server Google.

Untuk melaporkan bug atau memberikan masukan tentang informasi yang tidak ada, isi formulir Dukungan Sistem Pengelolaan Konten.

Jika memungkinkan, berikan akses pengujian kepada Google untuk verifikasi berkelanjutan.

Memperbarui petunjuk deployment pengguna

Perbarui dokumentasi Anda untuk memberikan petunjuk yang jelas tentang cara menerapkan produk pengukuran Google melalui penerapan Anda. Berikan draf petunjuk ini dengan mengisi formulir peninjauan Dokumentasi Penyiapan Integrasi CMS agar kami dapat memberikan masukan.