Terima kasih telah melihat pratinjau dokumentasi platform tag Google yang baru. Situs ini berstatus beta versi publik. (Masukan)

Lapisan data

Lapisan data adalah objek yang digunakan oleh Google Tag Manager dan gtag.js untuk meneruskan informasi ke tag. Peristiwa atau variabel dapat diteruskan melalui lapisan data, dan pemicu dapat disiapkan berdasarkan nilai variabel.

Misalnya, jika Anda mengaktifkan tag pemasaran ulang saat nilai purchase_total lebih besar dari $100, atau berdasarkan peristiwa tertentu, misalnya, saat tombol diklik, lapisan data Anda dapat dikonfigurasi agar data tersebut tersedia untuk tag Anda. Objek lapisan data disusun sebagai JSON. Contoh:

{
  event: "checkout_button",
  gtm: {
    uniqueEventId: 2,
    start: 1639524976560,
    scrollThreshold: 90,
    scrollUnits: "percent",
    scrollDirection: "vertical",
    triggers: "1_27"
  },
  value: "120"
}

Tag Google didesain untuk dengan mudah mereferensikan informasi yang ditambahkan ke lapisan data dengan cara yang teratur dan dapat diprediksi, bukan dengan menguraikan variabel, informasi transaksi, kategori halaman, dan sinyal lain yang tersebar di seluruh halaman Anda. Penerapan lapisan data yang diisi dengan variabel dan nilai terkait akan membantu memastikan data yang relevan tersedia saat tag Anda membutuhkannya.

Penginstalan

Untuk penginstalan halaman web Tag Manager, Anda harus membuat lapisan data. Kode yang ditandai di bawah ini menunjukkan tempat lapisan data dibuat, sebelum Tag Manager dimuat.

<script>
window.dataLayer = window.dataLayer || [];
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Dalam penerapan gtag.js standar, dengan tag disalin dari dalam produk dan ditambahkan ke halaman web, kode untuk membuat lapisan data disediakan. Dalam penerapan tag situs global kustom, tambahkan kode lapisan data di awal skrip, seperti yang ditunjukkan pada contoh yang ditandai di bawah ini:

<!-- Global site tag (gtag.js) - Google Ads: CONVERSION_ID -->
<script async src="https://www.googletagmanager.com/gtag/js?id=AW-YYYYYY"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments)};
  gtag('js', new Date());

  gtag('config', 'AW-YYYYYY');
</script>

Cara pemrosesan informasi lapisan data

Saat penampung dimuat, Tag Manager akan mulai memproses semua pesan push lapisan data dalam antrean. Tag Manager memproses pesan berdasarkan yang masuk terlebih dulu: Setiap pesan diproses satu per satu, sesuai dengan urutan penerimaannya. Jika pesan merupakan peristiwa, setiap tag dengan kondisi pemicu yang telah terpenuhi akan diaktifkan sebelum Tag Manager berpindah ke pesan berikutnya.

Jika panggilan gtag() atau dataLayer.push() dibuat oleh kode di halaman, di Template Kustom, atau di tag HTML Kustom, pesan terkait akan dimasukkan dalam antrean dan diproses setelah semua pesan tertunda lainnya dievaluasi. Artinya, setiap nilai lapisan data yang diperbarui tidak dijamin akan tersedia untuk peristiwa berikutnya. Untuk menangani kasus ini, Anda dapat menambahkan nama peristiwa ke pesan saat dikirim ke lapisan data, lalu memproses nama peristiwa tersebut dengan Pemicu Peristiwa Kustom.

Menggunakan lapisan data dengan pengendali peristiwa

Objek dataLayer menggunakan kunci event untuk memulai pengiriman peristiwa.

Tag situs global dan Tag Manager menggunakan variabel lapisan data khusus yang disebut event, yang digunakan oleh pemroses peristiwa JavaScript untuk mengaktifkan tag saat pengguna berinteraksi dengan elemen situs. Misalnya, Anda dapat mengaktifkan tag tracking konversi saat pengguna mengklik tombol konfirmasi pembelian. Peristiwa dapat dipanggil setiap kali pengguna berinteraksi dengan elemen situs seperti link, tombol, scroll, dsb.

Fungsi ini dijalankan dengan memanggil dataLayer.push() saat suatu peristiwa terjadi. Sintaksis untuk mengirim peristiwa dengan dataLayer.push() adalah sebagai berikut:

dataLayer.push({'event': 'event_name'});

Dengan event_name adalah string yang mendeskripsikan peristiwa, seperti 'login', purchase, atau search.

Gunakan dataLayer.push() untuk mengirim data peristiwa saat terjadi tindakan yang ingin Anda ukur. Misalnya, untuk mengirim peristiwa saat pengguna mengklik tombol, ubah pengendali onclick tombol untuk memanggil dataLayer.push():

<button onclick="dataLayer.push({'event': 'login'});">Button 1</button>

Anda dapat mendorong variabel lapisan data ke lapisan data secara dinamis untuk mengambil informasi seperti nilai yang dimasukkan atau dipilih dalam formulir, metadata yang terkait dengan video yang diputar pengunjung, warna produk (misalnya, mobil) yang disesuaikan oleh pengunjung, URL tujuan dari link yang diklik, dsb.

Seperti halnya peristiwa, fungsi ini dijalankan dengan memanggil API push() untuk menambahkan atau mengganti variabel lapisan data di lapisan data. Sintaksis dasar untuk menetapkan variabel lapisan data dinamis adalah sebagai berikut:

dataLayer.push({'variable_name': 'variable_value'});

Dengan 'variable_name' adalah string yang menunjukkan nama variabel lapisan data yang akan ditetapkan, dan 'variable_value' adalah string yang menunjukkan nilai variabel lapisan data yang akan ditetapkan atau diganti.

Misalnya: Untuk menetapkan variabel lapisan data dengan preferensi warna saat pengunjung berinteraksi dengan alat penyesuaian produk, Anda dapat mengirim variabel lapisan data dinamis berikut:

dataLayer.push({'color': 'red'});

Satu push, beberapa variabel

Anda dapat mendorong beberapa variabel dan peristiwa sekaligus:

dataLayer.push({
  'color': 'red',
  'conversionValue': 50,
  'event': 'customize'
});

Mempertahankan variabel lapisan data

Untuk mempertahankan variabel lapisan data antar-halaman, panggil dataLayer.push() setelah instance lapisan data dibuat di setiap pemuatan halaman, lalu kirim variabel ke lapisan data. Jika Anda ingin variabel lapisan data ini tersedia untuk Tag Manager saat penampung dimuat, tambahkan panggilan dataLayer.push() di atas kode penampung Tag Manager seperti yang ditunjukkan di bawah ini.

<script>
window.dataLayer = window.dataLayer || [];

dataLayer.push({
 'event': 'Pageview',
 'pagePath': 'https://www.googleanalytics.dev/pancakes',
 'pageTitle': 'Pancake Event Signup',
 'visitorType': 'customer'
});
</script>
<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Setiap variabel yang dideklarasikan dalam objek lapisan data hanya akan dipertahankan selama pengunjung tetap berada di halaman saat ini. Variabel lapisan data yang relevan di seluruh halaman (misalnya, visitorType) harus dideklarasikan di lapisan data di setiap halaman situs Anda. Meskipun tidak perlu menempatkan kumpulan variabel yang sama di lapisan data di setiap halaman, Anda harus menggunakan konvensi penamaan yang konsisten. Dengan kata lain: jika Anda menetapkan kategori halaman di halaman pendaftaran menggunakan variabel yang disebut pageCategory, halaman produk dan pembelian Anda juga akan menggunakan variabel pageCategory.

Pemecahan masalah

Berikut adalah beberapa tips pemecahan masalah lapisan data:

Jangan menimpa variabel window.dataLayer: Saat Anda menggunakan lapisan data secara langsung (misalnya, dataLayer = [{'item': 'value'}]), lapisan ini akan menimpa nilai yang ada di dataLayer. Penginstalan Tag Manager akan membuat instance lapisan data setinggi mungkin dalam kode sumber, di atas penampung cuplikan atau cuplikan penyembunyi halaman Optimize, menggunakan window.dataLayer = window.dataLayer || [];. Setelah dataLayer dideklarasikan, gunakan dataLayer.push({'item': 'value'}) untuk ditambahkan dengan nilai tambahan, dan jika nilai tersebut harus tersedia untuk Tag Manager saat halaman dimuat, berarti dataLayer.push() juga harus berada di atas kode penampung Tag Manager.

Nama objek dataLayer peka huruf besar/kecil: Jika Anda mencoba mendorong variabel atau peristiwa tanpa casing yang tepat, push tersebut tidak akan berfungsi.

datalayer.push({'pageTitle': 'Home'});    // Bad (datalayer in lowercase)
dataLayer.push({'pageTitle': 'Home'});    // Good (dataLayer in camel case)

dataLayer.push harus dipanggil dengan objek JavaScript yang valid. Semua nama variabel lapisan data harus diapit dalam tanda kutip.

dataLayer.push({new-variable: 'value'});      // Bad - no quote marks
dataLayer.push({'new-variable': 'value'});    // Good - proper quote marks

Pastikan nama variabel tetap konsisten di seluruh halaman: Jika Anda menggunakan nama variabel yang berbeda untuk konsep yang sama di halaman yang berbeda, tag Anda tidak akan dapat secara konsisten diaktifkan di semua lokasi yang diinginkan.

Buruk:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitor_type': 'high-value'});

Baik:

// Homepage:
dataLayer.push({'visitorType': 'low-value'});

// Checkout Page:
dataLayer.push({'visitorType': 'high-value'});

Mengganti nama lapisan data

Nama default objek lapisan data yang dimulai oleh tag situs global atau Tag Manager adalah dataLayer. Jika memilih untuk menggunakan nama yang berbeda untuk lapisan data, Anda dapat melakukannya dengan mengedit nilai parameter lapisan data dalam tag situs global atau penampung cuplikan Tag Manager dengan nama pilihan Anda.

gtag.js

Tambahkan parameter kueri yang bernama “l” ke URL untuk menetapkan nama lapisan data baru, misalnya, l=myNewName. Perbarui semua instance dataLayer di cuplikan tag situs global ke nama baru.

<!-- Global site tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-ZZZZZZ&l=myNewName"></script>
<script>
  window.myNewName = window.myNewName || [];
  function gtag(){myNewName.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'G-ZZZZZZ');
</script>

Tag Manager

Ganti nilai parameter lapisan data (ditandai di bawah) dalam penampung cuplikan dengan nama pilihan Anda.

<!-- Google Tag Manager -->
<script>(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','myNewName','GTM-XXXXXX');</script>
<!-- End Google Tag Manager -->

Setelah diganti namanya, semua referensi ke lapisan data Anda (yaitu saat mendeklarasikan lapisan data di atas cuplikan, atau saat mendorong peristiwa atau variabel lapisan data dinamis ke lapisan data dengan perintah .push()) harus disesuaikan untuk merefleksikan nama lapisan data kustom Anda:

<script>
  myNewName = window.dataLayer || [];
  myNewName.push({'variable_name': 'variable_value'});
</script>

Metode lapisan data kustom

Jika Anda mendorong fungsi ke lapisan data, fungsi tersebut akan dipanggil dengan cara ditetapkan ke model data abstrak. Model data abstrak ini dapat memperoleh dan menetapkan nilai ke penyimpanan nilai kunci, serta menyediakan cara untuk mereset lapisan data.

set

Fungsi set di model data abstrak memungkinkan Anda menetapkan nilai untuk diambil melalui fungsi 'get'.

window.dataLayer.push(function() {
  this.set('time', new Date());
});

get

Fungsi get di model data abstrak memungkinkan Anda mengambil nilai yang telah ditetapkan.

window.dataLayer.push(function() {
  const existingTime = this.get('time');
  if (existingTime !== null) {
    // Change behavior based on whether or not this value exists...
  } else {
    // ...
  }
})

reset

Fungsi reset di model data abstrak memungkinkan Anda mereset data di lapisan data. Fungsi ini paling berguna untuk halaman yang akan tetap terbuka dan ukuran lapisan data terus bertambah dari waktu ke waktu. Untuk mereset lapisan data, gunakan kode berikut:

window.dataLayer.push(function() {
  this.reset();
})