Cara Memasang Heatmap di Toko Shopify Anda (Tanpa Perlu Aplikasi, Cukup Satu Baris Kode)

Ringkasan artikel

• Menambahkan heatmap di Shopify hanya perlu menempelkan satu baris kode ke dalam theme.liquid — tanpa perlu instal aplikasi
• Selalu duplikasi tema Anda sebagai cadangan sebelum mengedit. Perubahan langsung berlaku begitu Anda menyimpan — berbeda dengan STUDIO, tidak ada langkah publikasi ulang terpisah
• Halaman checkout tidak menjalankan kode tema, sehingga tidak terlacak. Keberhasilan berarti angkanya benar-benar bertambah di dashboard HeatMapX — bukan sekadar "tidak ada error"

Bertanya-tanya apakah Anda bisa menambahkan heatmap ke toko Shopify tanpa menginstal aplikasi? Bisa. Shopify memungkinkan Anda menempelkan satu baris kode tag langsung ke dalam tema Anda, tanpa perlu aplikasi apa pun. Panduan ini akan membahas langkah pencadangan yang harus selalu Anda lakukan terlebih dahulu, cara menambahkan tag, cara memastikan pemasangan berhasil, dan beberapa hal yang perlu diperhatikan.

Langkah 1: Dapatkan Site Key Anda

Pertama, daftar di HeatMapX (tersedia paket gratis), daftarkan toko Anda, dan dapatkan site key Anda. Tidak diperlukan kartu kredit.

Setelah Anda memiliki site key, gunakan tag di bawah ini, ganti YOUR_SITE_KEY dengan key sebenarnya yang Anda terima.

<script src="https://heatmapx.com/tracker.js" data-site-key="YOUR_SITE_KEY"></script>

Langkah-langkah: Menambahkan Tag ke theme.liquid

1. (Wajib) Duplikasi tema Anda sebagai cadangan

Sebelum mengedit kode secara langsung, selalu duplikasi tema Anda saat ini terlebih dahulu. Di admin Shopify, buka Online Store → Themes, temukan tema yang sedang dipublikasikan, klik menu "…" (tindakan), lalu pilih Duplicate. Ini memberi Anda salinan aman untuk dikembalikan jika terjadi kesalahan. Melewati langkah ini berarti Anda tidak punya cara untuk membatalkan editan yang keliru.

2. Buka editor kode

1. Di admin Shopify, buka Online Store → Themes
2. Pada tema yang dipublikasikan, klik menu "…" (tindakan) lalu pilih Edit code
3. Penjelajah berkas untuk tema Anda akan terbuka di sebelah kiri

3. Tambahkan tag di dalam layout/theme.liquid

1. Di daftar berkas, buka folder "Layout" lalu klik theme.liquid
2. Cari </head> di dalam berkas tersebut dan tempelkan tag di atas tepat sebelum tag itu
3. Simpan berkas

4. Cukup simpan — tidak perlu publikasi ulang

Di Shopify, mengedit kode tema langsung berlaku begitu Anda menyimpannya. Berbeda dengan STUDIO, tidak ada langkah "publish" atau publikasi ulang terpisah. Setelah Anda menyimpan, toko live Anda sudah memuat tag tersebut.

Cara Memastikan Pemasangan Benar-Benar Berhasil

Setelah Anda menambahkan tag, jelajahi beberapa halaman di toko Anda sendiri. Namun ini bagian pentingnya.

Halaman yang termuat tanpa error bukan berarti pelacakan benar-benar berfungsi. Meskipun konsol browser Anda tidak menunjukkan masalah apa pun, site key yang salah ketik atau tag yang ditempel di tempat yang salah bisa berarti tidak ada data yang pernah sampai ke HeatMapX.

Satu-satunya cara pemeriksaan yang dapat diandalkan adalah membuka dashboard HeatMapX, menemukan situs Anda di daftar situs, dan memastikan angkanya benar-benar bertambah. Setelah mengunjungi beberapa halaman — halaman produk, halaman koleksi, dan sebagainya — jika angkanya bertambah, berarti pemasangan Anda berhasil.

Hal-hal yang Perlu Diperhatikan

Halaman checkout tidak terlacak

Tag yang Anda tambahkan ke theme.liquid berjalan di storefront Anda — beranda, halaman produk, halaman koleksi, dan keranjang — tetapi tidak berjalan di halaman checkout (halaman pembayaran di bawah /checkouts/). Checkout dihosting langsung oleh Shopify, terpisah dari tema Anda, dan kode tema dari theme.liquid tidak pernah dimuat di sana. Jika Anda melihat tidak ada data untuk halaman checkout di dashboard Anda, itu memang perilaku yang diharapkan, bukan bug.

Mengganti tema berarti harus menambahkan ulang tag

Tag hanya ada di berkas theme.liquid dari tema yang Anda edit. Jika nanti Anda beralih ke tema lain (mempublikasikan tema baru), theme.liquid tema tersebut tidak akan otomatis membawa tag tersebut. Setiap kali Anda mengganti tema, ulangi langkah-langkah yang sama untuk menambahkan tag ke tema baru.

FAQ

T. Apakah ini akan memperlambat toko saya? J. Tag dimuat secara asinkron dan ringan, sehingga dampaknya terhadap kecepatan pemuatan halaman minimal.

T. Saya sudah menambahkan tag, tapi angka di dashboard tidak bertambah J. Penyebab paling umum adalah site key yang tidak cocok — menempelkan key dari situs lain, atau ada karakter yang hilang saat Anda menyalinnya. Periksa juga apakah halaman yang Anda uji adalah halaman storefront (beranda, produk, koleksi) dan bukan halaman checkout, karena checkout tidak pernah terlacak.

Penutup

Menambahkan heatmap di Shopify pada dasarnya hanya menempelkan satu baris kode ke dalam theme.liquid — tanpa perlu aplikasi. HeatMapX gratis untuk memulai, jadi coba sekarang dan lihat bagaimana pengunjung sebenarnya berinteraksi dengan toko Anda.