Langkah Mudah Memasang Google Analytics di website React.js
Panduan ini menjelaskan cara menggunakan Google Analytics untuk melacak halaman dan event pada website yang dibuat dengan React.js
Pada website tradisional atau Multi Page Application (MPA), biasanya kita hanya perlu menambahkan tracking snippet code yang sudah disediakan oleh Google Analytics didalam element <head>. Hal tersebut bekerja karena snippet code tersebut berjalan setiap kali pengguna memuat halaman baru, dimana selalu dilakukan pemuatan halaman penuh. Berbeda dengan website yang dibuat dengan React.js yang merupakan Single Page Application (SPA), dimana semua resources yang diperlukan untuk menavigasi seluruh website dilakukan pada pemuatan halaman pertama. Saat pengguna berinteraksi dalam sebuah halaman dan mengeklik sebuah tautan, konten selanjutnya akan dimuat secara dinamis dan tidak melakukan pemuatan halaman penuh seperti pada website MPA. Hal ini berarti, pada SPA tampilan halaman berikutnya (virtual) harus dilacak secara manual saat konten baru dimuat.
Persiapan dan Instalasi
Pertama-tama, kita perlu mendapatkan Tracking ID (cth: UA-000000–2) yang bisa didapatkan dari Google Analytics Dashboard, kamu bisa ikuti langkah-langkahnya di tautan ini.
Setelah mendapatkan Tracking ID, buka terminal dan mulai instal library React-GA, library tersebut merupakan wrapper dari Google Analytics script.
# yarn
yarn add react-ga# npm
npm install react-ga
Kemudian, kita perlu meng-import library tersebut dan melakukan konfigurasi.
import ReactGA from 'react-ga';...ReactGA.initialize('TRACKING-ID'); // Ganti TRACKING-ID dengan Tracking ID website kamu. cth: UA-000000–2
Memulai Pelacakan
Langkah selanjutnya adalah menerapkan kode pelacakan pada apa pun yang ingin kita lacak, misalnya untuk melacak Page View kita dapat menggunakan kode seperti berikut:
atau untuk pelacakan sebuah event (klik, hover dll), dapat menggunakan kode seperti berikut:
Integrasi dengan React-Router
React-Router merupakan library yang berfungsi untuk melakukan proses navigasi pada aplikasi React.js.
Kali ini, kita akan membuat tracking Page View setiap url website berubah dengan teknik HOC.
Implementasi
Kode HOC
Semoga bermanfaat !!! Happy coding !!!
Apabila suka dengan tulisan ini, jangan lupa kasih 👏 yang banyak dan share di social media kalian biar makin banyak yang terbantu. Jika ada kesalahan atau perihal apapun, silahkan isi di kolom komentar ya. Terimakasih sudah membaca tulisan ini.
