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 merujuk ke 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 kustom tag Google, tambahkan kode lapisan data di awal skrip, seperti yang ditunjukkan pada contoh yang ditandai di bawah ini:

<!-- 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>

Cara pemrosesan informasi lapisan data

Saat penampung dimuat, Tag Manager akan mulai memproses semua pesan push lapisan data dalam antrean. Tag Manager memproses pesan dengan prinsip pertama masuk, pertama keluar (FIFO): 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 beralih 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.

Penting: Jangan gunakan tag HTML Kustom untuk men-deploy kode berbasis gtag.js. Sebagai gantinya, gunakan template tag native Tag Manager untuk Google Ads, Analytics, dan Floodlight.

Penting: Jangan gunakan tag HTML Kustom untuk mengonfigurasi setelan izin di Tag Manager. Karena setelan izin perlu diterapkan sebelum tag yang relevan diaktifkan di penampung Tag Manager, Anda harus menerapkan API Izin Tag Manager untuk mengonfigurasi perilaku default dan pembaruan. Penggunaan API Izin Tag Manager memastikan pembaruan izin diproses sebelum item antrean di lapisan data, sehingga semua tag yang diaktifkan oleh peristiwa yang sama akan memiliki status izin yang sama.

Poin Utama: Anda dapat menggunakan Google Tag Assistant untuk memeriksa status lapisan data Anda kapan saja di rangkaian peristiwa.

Menggunakan lapisan data dengan pengendali peristiwa

Objek dataLayer menggunakan perintah event untuk memulai pengiriman peristiwa.

Tag Google 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'});

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 mengirim 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'});

'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 mengirim beberapa variabel dan peristiwa sekaligus:

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

Penting: Jika Anda mengirim variabel dengan nama yang sama seperti variabel yang sudah ada ke lapisan data, nilai yang sudah ada akan ditimpa oleh nilai baru.

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, menggunakan window.dataLayer = window.dataLayer || [];. Setelah dataLayer dideklarasikan, gunakan dataLayer.push({'item': 'value'}) untuk ditambah 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 mengirim variabel atau peristiwa tanpa kapitalisasi 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 Google 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 Google 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 Google ke nama baru.

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

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

Tag Manager

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

Penting: Jangan ganti nilai parameter yang tidak ditandai.

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

Catatan: Hanya satu objek dataLayer yang didukung per halaman.

Metode lapisan data kustom

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

Penting: Untuk menggunakan metode lapisan data kustom, Anda harus menggunakan .push untuk mengirim data ke variabel dataLayer secara langsung. Jika Anda menggunakan gtag, fungsi tersebut akan ditafsirkan sebagai perintah yang tidak valid dan diabaikan.

set

Fungsi set di model data abstrak memungkinkan Anda menetapkan nilai yang akan 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 datanya terus bertambah dari waktu ke waktu. Untuk mereset lapisan data, gunakan kode berikut:

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