Analisis data adalah suatu keharusan jika Anda ingin melacak jumlah pengunjung yang diperoleh situs web Anda. Ada berbagai cara untuk menambahkan analitik ke proyek Anda, termasuk Google Analytics. Ini adalah layanan gratis dan relatif mudah diatur.
Pelajari cara menambahkan Google Analytics ke situs Anda menggunakan Next.js, kerangka kerja React untuk membangun situs web yang ramah SEO.
Menyiapkan Google Analytics
Google Analytics memberikan wawasan ke dalam perilaku orang yang mengunjungi situs web Anda. Ini memberi tahu Anda halaman mana yang mendapatkan jumlah tampilan dan memberi Anda data audiens seperti lokasi, usia, minat, dan perangkat yang mereka gunakan. Data ini dapat membantu membuat keputusan tentang arah yang harus diambil bisnis Anda agar berhasil.
Untuk memulai, kunjungi dasbor analitik dan buat akun baru dengan mengikuti langkah-langkah berikut:
- Klik Buat Akun tombol di tab admin untuk membuat akun baru.
- Tambahkan nama akun di bagian Pengaturan akun.
- Buat properti analitik dengan memberikan nama.
- Tambahkan detail bisnis. Pilih opsi yang berlaku untuk situs web Anda.
- Klik Membuat tombol untuk menyelesaikan penyiapan properti.
- Klik aliran web untuk menentukan aliran data yang harus dilacak oleh Google Analytics.
- Tentukan URL ke situs web Anda dan beri nama aliran data.
- Klik petunjuk pemberian tag dan dapatkan skrip yang akan Anda gunakan di situs web Anda.
- Salin ID pengukuran (kode pelacakan) untuk digunakan nanti.
Setelah mendapatkan kode pelacakan, Anda dapat menyiapkan proyek Next.js.
Menyiapkan Proyek Next.js
Jika Anda belum menyiapkan proyek Next.js, lihat Panduan resmi Next.js untuk memulai.
Saat Anda membuat properti tag situs Global, Anda mendapatkan skrip seperti ini:
<!-- Tag Google (gtag.js) -->
<skrip asinkron src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></script>
<naskah>
jendela.dataLayer = jendela.dataLayer || [];
fungsigtag(){dataLayer.push(argumen);}
gtag('js', baruTanggal());
gtag('config', 'G-NHVWK8L97D');
</script>
Anda perlu menambahkan skrip ini ke tag kepala situs web Anda. Di Next.js, Anda menggunakan komponen Script dari next/script. Komponen ini merupakan perpanjangan dari tag skrip HTML. Ini memungkinkan Anda untuk memasukkan skrip pihak ketiga ke situs web Next.js Anda dan mengatur strategi pemuatannya, meningkatkan kinerja.
Itu Skrip Next.js komponen menawarkan strategi pemuatan yang berbeda. Strategi "setelah interaktif" cocok untuk skrip analitik. Ini berarti akan dimuat setelah halaman interaktif.
impor Naskah dari "berikutnya/skrip"
<skrip src="" strategi="afterInteraktif" />
Buka halaman/_app.js file dan impor komponen Script di atas.
impor Naskah dari 'berikutnya/skrip'
Selanjutnya, ubah pernyataan pengembalian komponen Aplikasi untuk menyertakan tag skrip dari Google Analytics.
impor '../styles/globals.css'
impor Tata letak dari '../komponen/Layout/Layout'
impor Naskah dari 'berikutnya/skrip'fungsiAplikasi Saya({ Komponen, pageProps }) {
kembali (
<>
<Strategi skrip="afterInteraktif" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"/>
<Naskah
id='google-analytics'
strategi="afterInteraktif"
berbahayaSetInnerHTML={{
__html: `
jendela.dataLayer = jendela.dataLayer || [];
fungsigtag(){dataLayer.push(argumen);}
gtag('js', baruTanggal());
gtag('config', 'G-XXXXXX', {
page_path: jendela.lokasi.pathname,
});
`,
}}
/>
<Tata letak>
<Komponen {...pageProps} />
</Layout>
</>
)
}
eksporbawaan Aplikasi Saya
Perhatikan bahwa tag ini sedikit berbeda dari yang disediakan Google Analytics. Ini menggunakan SetInnerHTML yang berbahaya dan menyertakan strategi pemuatan. Namun, mereka bekerja sama.
Ingatlah untuk mengganti G-XXXXXX dengan kode pelacakan Anda. Juga disarankan untuk menyimpan kode pelacakan dalam file .env untuk menjaga kerahasiaannya.
Menambahkan Google Analytics ke Aplikasi Halaman Tunggal
Anda dapat menggunakan tag skrip di atas untuk situs web biasa dan membiarkannya begitu saja. Namun, untuk aplikasi satu halaman seperti situs web Next.js, Anda perlu melakukan beberapa langkah tambahan.
A aplikasi satu halaman (SPA) adalah situs web yang memuat semua konten di muka, sebagai tanggapan atas permintaan awal. Browser memuat konten secara dinamis saat pengguna mengeklik tautan untuk menavigasi situs. Itu tidak membuat permintaan halaman, hanya URL yang berubah.
Ini berbeda untuk halaman Next.js yang menggunakan getServerSideProps saat browser merendernya berdasarkan permintaan.
Tag Google berfungsi dengan merekam tampilan halaman saat halaman baru dimuat. Jadi, untuk SPA, tag Google hanya dijalankan satu kali, saat halaman pertama kali dimuat. Oleh karena itu, Anda harus merekam tampilan secara manual saat pengguna membuka halaman yang berbeda.
Lihat pengukuran satu halaman Panduan Google Analytics untuk mempelajari lebih lanjut.
Untuk merekam kunjungan halaman secara manual di Next.js menggunakan skrip gtag, buat folder baru bernamalib dan tambahkan file baru, gtag.js.
eksporconst GA_MEASUREMENT_ID = process.env. GA_MEASUREMENT_ID;eksporconst tampilan halaman = () => {
jendela.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
eksporconst acara = ({ aksi, kategori, label, nilai }) => {
jendela.gtag("peristiwa", tindakan, {
event_category: kategori,
event_label: label,
nilai,
});
};
Selanjutnya, ubah /pages/_app.js untuk menggunakan fungsi ini dan lacak tampilan halaman di hook useEffect.
impor '../styles/globals.css'
impor Tata letak dari '../komponen/Layout/Layout'
impor Naskah dari 'berikutnya/skrip'
impor { gunakanRouter } dari 'berikutnya/router';
impor { gunakanEfek } dari "reaksi";
impor * sebagai gtag dari "../lib/gtag"fungsiAplikasi Saya({ Komponen, pageProps }: AppProps) {
const router = gunakanRouter();gunakanEfek(() => {
const handleRouteChange = (url) => {
gtag.tayangan laman(url);
};router.events.on("routeChangeComplete", handleRouteChange);
kembali () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
kembali (
<>
<Strategi skrip="afterInteraktif" src="https://www.googletagmanager.com/gtag/js? id=G-XXXXXX"></Script>
<Naskah
id='google-analytics'
strategi="afterInteraktif"
berbahayaSetInnerHTML={{
__html: `
jendela.dataLayer = jendela.dataLayer || [];
fungsigtag(){dataLayer.push(argumen);}
gtag('js', baruTanggal());
gtag('config', 'G-XXXXXX', {
page_path: jendela.lokasi.pathname,
});
`,
}}
/>
<Tata letak>
<Komponen {...pageProps} />
</Layout>
</>
)
}
eksporbawaan Aplikasi Saya
Contoh ini menggunakan useRouter dan useEffect hooks untuk merekam tampilan halaman setiap kali pengguna menavigasi ke halaman lain.
Panggil metode useRouter dari next/router dan tetapkan ke variabel router. Di hook useEffect, dengarkan event routeChangeComplete di router. Saat peristiwa terjadi, rekam tampilan halaman dengan memanggil fungsi handleRouteChange.
Pernyataan return useEffect hook berhenti berlangganan dari event routeChangeComplete dengan metode 'off'.
Gunakan Google Analytics untuk Mengumpulkan Data Pengguna
Data sangat bermanfaat untuk membuat keputusan yang baik, dan menambahkan Google Analytics ke situs web Anda adalah salah satu cara untuk mengumpulkannya.
Anda dapat menambahkan Google Analytics ke proyek Next.js menggunakan pengait untuk memastikan Anda merekam semua tampilan halaman bahkan saat halaman menggunakan perutean sisi klien. Sekarang Anda dapat melihat berapa banyak tampilan yang didapat situs Anda di dasbor Google Analytics Anda.