Menggunakan Google Analytic di Nextjs

22 Maret 2022

Tutorial ini akan membahas cara menambahkan Google Analytics ke aplikasi Next.js Anda. Implementasinya mudah dan tidak memerlukan perpustakaan pihak ketiga.

Dalam 5 langkah mudah, saya akan menunjukkan cara menyiapkan Google Analytics.

Untuk tutorial ini, Anda akan membutuhkan:

Tambahkan ID Google Analytics Anda ke file .env.local Next.js

Pertama, mulailah dengan membuat file .env.local tempat Anda akan menempatkan kunci Google Analytics Anda.

Tip: Periksa .gitignore Anda untuk memastikan bahwa Anda tidak melakukan file ini secara tidak sengaja. .env.local seharusnya sudah disertakan secara default di proyek Next.js Anda, tetapi periksa untuk memastikannya.

NEXT_PUBLIC_GOOGLE_ANALYTICS=<Your_tracking_ID>

Masukkan kode pelacakan Google Analytics ke dalam aplikasi Next.js

Sekarang setelah kunci Anda disetel, Anda perlu memasukkan dan mengonfigurasi tag situs Global Google Analytics (alias gtag) ke jendela browser Anda.

Untuk mengakses elemen kepala di aplikasi Next.js Anda, Anda perlu membuat file _document.js khusus ke dalam folder halaman Anda.

Tip: Bingung tentang apa itu file dokumen kustom? Jangan ragu untuk memeriksa dokumentasi Next.js pada dokumen kustom.

import Document, { Html, Head, Main, NextScript } from 'next/document';

export default class MyDocument extends Document {
  render() {
    return (
      <Html>
        <Head>
          {/* Global Site Tag (gtag.js) - Google Analytics */}
          <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />
        </Head>
        <body>
          <Main />
          <NextScript />
        </body>
      </Html>
    );
  }
}

Fungsi khusus untuk melacak tampilan halaman dan Event

Set kunci: periksa! Tag situs global dikonfigurasi: periksa!

Mari beralih ke bagian pelacakan Google Analytics. Untuk melacak dengan benar perilaku pengguna Anda, Anda perlu mencatat tampilan halaman dan secara opsional, peristiwa tertentu yang dipicu di aplikasi Anda.

Untuk melakukannya, saya sarankan Anda membuat folder lib di mana Anda akan meletakkan semua kode Anda yang terkait dengan perpustakaan pihak ketiga dan folder lain di dalamnya yang disebut ga untuk Google Analytics.

Di dalam folder lib/ga Anda, buat index.js dengan dua fungsi: satu untuk mencatat tampilan halaman dan acara lainnya.

// log the pageview with their URL
export const pageview = (url) => {
  window.gtag('config', process.env.NEXT_PUBLIC_GOOGLE_ANALYTICS, {
    page_path: url,
  });
};

// log specific events happening.
export const event = ({ action, params }) => {
  window.gtag('event', action, params);
};

file lib/ga/index.js

Catat tampilan halaman di aplikasi Next.js Anda

Cara termudah untuk mencatat tampilan halaman di aplikasi Next.js Anda adalah dengan berlangganan router Anda dan mendengarkan acara routeChangeComplete.

Untuk melakukannya, masuk ke file _app.js Anda dan dengan useEffect, periksa peristiwa baru yang terjadi dengan router Anda. Ada banyak jenis acara tetapi kami hanya peduli ketika pengguna berhasil menavigasi ke halaman baru routeChangeComplete.

Catatan: Jika Anda tertarik, ada banyak jenis event router di Next.js. Anda mungkin, misalnya, tertarik untuk mencatat ketika terjadi kesalahan (routeChangeError).

import { useEffect } from 'react';
import { useRouter } from 'next/router';

import * as ga from '../lib/ga';

function MyApp({ Component, pageProps }) {
  const router = useRouter();

  useEffect(() => {
    const handleRouteChange = (url) => {
      ga.pageview(url);
    };
    //When the component is mounted, subscribe to router changes
    //and log those page views
    router.events.on('routeChangeComplete', handleRouteChange);

    // If the component is unmounted, unsubscribe
    // from the event with the `off` method
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    };
  }, [router.events]);

  return <Component {...pageProps} />;
}

export default MyApp;

Buat Event tertentu di aplikasi Next.js Anda

Sekarang setelah tampilan halaman kami dilacak, Anda mungkin tertarik untuk mencatat peristiwa tertentu dalam aplikasi Anda. Berikut adalah daftar peristiwa Default Google Analytics.

Ini adalah contoh cara mencatat istilah penelusuran yang dimasukkan oleh pengguna:

import { useState } from 'react';

import * as ga from '../lib/ga';

export default function Home() {
  const [query, setQuery] = useState('');

  const search = () => {
    ga.event({
      action: 'search',
      params: {
        search_term: query,
      },
    });
  };

  return (
    <div>
      <div>
        <input type="text" onChange={(event) => setQuery(event.target.value)}></input>
      </div>
      <div>
        <button onClick={() => search()}>Search</button>
      </div>
    </div>
  );
}