SEO, Konten, Website, dan Otomasi

Implementasi Header Interaction Tracking untuk Optimasi Navigasi SVRG.ID

Mengukur interaksi header agar optimasi navigasi e-commerce bisa diarahkan oleh data, bukan asumsi

Header Interaction Tracking Dashboard
Klien / MerekSVRG.ID
Peran SayaSEO Specialist
PeriodeOktober 2026
IndustriSports, Fitness & E-Commerce
WebsiteKunjungi Website

Ringkasan Metrik

Event header tercatat dalam 2 hari

382

User terukur

107

Open search — interaksi tertinggi

101

Submit search event

92

Konteks Proyek

Header adalah salah satu area paling penting pada website e-commerce karena berfungsi sebagai pintu masuk menuju koleksi, pencarian, akun, cart, dan promo. Sebelum proyek ini, penempatan elemen header di SVRG lebih banyak didasarkan pada asumsi mengenai apa yang dianggap penting.

Saya melihat bahwa pendekatan tersebut perlu diubah. Agar arah optimasi lebih tepat, setiap elemen penting harus dapat diukur. Karena itu saya menyusun dan mengimplementasikan header interaction tracking menggunakan dataLayer, Google Tag Manager, dan Google Analytics 4 agar tim dapat membaca perilaku interaksi pengguna pada header secara lebih terstruktur.

Tujuan

  • Mengukur interaksi pengguna pada elemen-elemen utama header seperti menu, search, logo, account, cart, dan promo bar.
  • Menyediakan dasar data untuk mengevaluasi elemen header yang paling sering digunakan.
  • Mengurangi ketergantungan pada asumsi dalam menentukan prioritas informasi dan struktur navigasi.
  • Mendukung upaya mempersingkat customer journey dari navigasi awal menuju halaman yang relevan hingga potensi pembelian.

Masalah yang Perlu Diselesaikan

Sebelum tracking aktif, tim belum memiliki data yang spesifik untuk mengetahui bagian header mana yang paling sering digunakan. Elemen seperti search, menu, cart, atau promo hanya dinilai berdasarkan anggapan umum, bukan data perilaku pengguna.

Dalam konteks e-commerce, kondisi ini cukup berisiko karena header berperan besar dalam mempercepat pengguna menemukan produk atau halaman yang mereka butuhkan. Tanpa pengukuran yang jelas, optimasi header berpotensi tidak tepat sasaran.

Kondisi Awal

Sebelum implementasi, belum ada event khusus untuk section header. Artinya, klik pada menu, tombol search, logo, account, cart, maupun promo belum terbaca secara terstruktur pada GA4 untuk analisis khusus header.

Akibatnya, evaluasi header lebih banyak mengandalkan observasi manual dan asumsi tentang elemen mana yang dianggap penting bagi pengguna.

Strategi Penyelesaian

Bangun kontrak tracking yang jelas

Saya merancang satu event utama header_click dengan parameter seperti header_element, item_label, header_action, dan konteks layout untuk membedakan interaksi secara lebih rinci.

Hubungkan Shopify ke GTM dan GA4

Saya menggunakan pendekatan Kode tema → dataLayer → GTM → GA4 agar interaksi header dapat diteruskan ke sistem analitik tanpa mengganggu fungsi navigasi.

Siapkan pembacaan data untuk keputusan UX

Saya merancang custom dimension dan tampilan laporan Explore agar data yang terkumpul bisa langsung dipakai untuk membaca elemen header paling aktif serta peluang optimasinya.

Langkah yang Saya Kerjakan

  1. Mendefinisikan kebutuhan tracking. Saya mengidentifikasi elemen header yang perlu diukur: menu, submenu, search, logo, account, cart, dan announcement promo.
  2. Menyusun spesifikasi event. Saya menetapkan event utama header_click beserta parameter yang relevan untuk analisis.
  3. Menerapkan tracking pada theme Shopify. Saya menyiapkan script tracking berbasis event delegation agar klik header dapat dibaca dan dikirim ke dataLayer.
  4. Menghubungkan ke GTM dan GA4. Saya menyiapkan trigger custom event, data layer variables, tag GA4 Event, serta custom dimensions yang diperlukan untuk pelaporan.
  5. Menyusun panduan pengujian dan pembacaan data. Saya mendokumentasikan proses validasi melalui GTM Preview, GA4 DebugView, serta contoh konfigurasi laporan di Explore.
  6. Membaca hasil awal pasca implementasi. Dua hari setelah implementasi, saya meninjau interaksi yang sudah masuk untuk melihat elemen header yang paling sering digunakan.

Tools yang Digunakan

Shopify Theme, Liquid/JavaScript, dataLayer, Google Tag Manager, Google Analytics 4, GA4 Explore, ChatGPT

Hasil dan Dampak

Setelah implementasi, interaksi pada header sudah dapat dibaca di GA4. Dalam 2 hari pertama, tracking mencatat 382 event dari 107 user.

Interaksi tertinggi berasal dari elemen pencarian. Open search tercatat 101 event dari 47 user, sedangkan Submit search mencapai 92 event dari 42 user. Temuan ini menunjukkan bahwa fitur pencarian memegang peran penting dalam journey pengguna dan layak menjadi salah satu prioritas utama dalam optimasi header.

Data awal juga menunjukkan interaksi lain seperti Open menu (32 event), Close announcement (29 event), SHOP (27 event), Cart (17 event), serta logo SVRG (16 event). Dengan data ini, keputusan UX dan prioritas informasi pada header dapat mulai diarahkan oleh perilaku pengguna yang terukur.

Batas kesimpulan: data ini menunjukkan interaksi header, bukan bukti langsung pembelian. Tracking membantu membaca niat dan pola penggunaan elemen navigasi, tetapi masih perlu dikombinasikan dengan data funnel atau konversi untuk menilai dampak bisnis secara menyeluruh.

Perbandingan Hasil Optimasi

Kondisi Sebelum Tracking Header Aktif

Sebelum implementasi, belum ada data interaksi header yang terstruktur. Sehingga tidak bisa dipastikan menu yang muncul bermanfaat atau tidak. Setelah 2 hari pemasangan tracking, behaviour dan menu yang bermanfaat untuk user mulai terekam.

Sebelum
Ilustrasi sebelum dipasang tracking header.
Sesudah
Kondisi setelah dipasanga tracking header selama H+ 2 hari.

Hal yang Bisa Dipelajari dari Proyek Ini

  • Setiap elemen penting harus bisa diukur. Dari proyek ini saya belajar bahwa optimasi UX yang baik harus dimulai dari data, bukan semata-mata asumsi.
  • Header e-commerce sangat strategis. Elemen header dapat mempersingkat customer journey menuju pencarian produk, kategori, cart, dan halaman penting lainnya.
  • Search terbukti sangat bernilai. Data awal menunjukkan bahwa open search dan submit search merupakan interaksi dominan, sehingga area pencarian layak menjadi fokus utama pengembangan lanjutan.
  • Measurement membuka arah optimasi. Setelah tracking tersedia, keputusan seperti prioritas menu, penempatan elemen, dan penyederhanaan jalur navigasi dapat dibahas dengan dasar perilaku pengguna yang lebih nyata.

Ada tantangan yang ingin Anda diskusikan?

Ceritakan kondisi website dan tujuan Anda. Kita bisa mulai dari menentukan masalah yang paling perlu ditangani.

Mulai Diskusi

Sertifikat