Morioh
Login
CODE VN

CODE VN

10 months ago

Thêm Google Analytics vào ứng dụng Next.js của bạn

Google Analytics là một cách tuyệt vời, miễn phí để theo dõi hiệu suất của ứng dụng web và thiết bị di động của bạn. Trong hướng dẫn này, chúng ta sẽ tìm hiểu cách thêm Google Analytics vào ứng dụng Next.js của bạn theo 4 bước đơn giản. 

  • Bước 1: Tạo biến môi trường tìm kiếm Google Analytics
  • Bước 2: Chèn tập lệnh Google Analytics vào _document.js
  • Bước 3: Theo dõi lượt xem trang trong _app.js
  • Bước 4: Tùy chọn - chỉ theo dõi trong sản xuất

Bước 1: Tạo biến môi trường tìm kiếm Google Analytics

Trước tiên, hãy tạo một biến môi trường cho ID đo lường Google Analytics tìm kiếm của chúng tôi.

NEXT_PUBLIC_GA_ID=G-XXXXX

Tại địa phương, điều này sẽ nằm trong một  tập tin .env.local hoặc  .env .

Hãy nhớ đặt biến môi trường này ở bất cứ nơi nào ứng dụng này được triển khai trong sản xuất.

Bước 2: Chèn tập lệnh Google Analytics vào _document.js

Tiếp theo, chúng tôi sẽ chèn Thẻ trang web toàn cầu của Google Analytics ( gtag.js) vào  <head>.

Để truy cập  <Head> thẻ tìm kiếm Next.js, chúng ta sẽ cần một  tài liệu tùy chỉnh Next.js  có tên là  /pages/_document.js.

Tại đây, chúng tôi sẽ đưa tập lệnh Google Analytics vào  /pages/_document.js.

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

Bước 3: Theo dõi lượt xem trang trong _app.js

Để theo dõi lượt xem trang trong ứng dụng của chúng tôi, chúng tôi sẽ muốn thêm một  useEffect() hook đơn giản vào  _app.js để lắng nghe  routeChangeComplete các sự kiện.

import { useEffect } from 'react';
import { useRouter } from 'next/router';
function MyApp({ Component, pageProps }) {
  const router = useRouter();
  useEffect(() => {
    const handleRouteChange = url => {
      window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
        page_path: url,
      });
    }
    router.events.on('routeChangeComplete', handleRouteChange);
    return () => {
      router.events.off('routeChangeComplete', handleRouteChange);
    }
  }, [router.events]);
  return <Component {...pageProps} />
}
export default MyApp

Bước 4: Tùy chọn - chỉ theo dõi trong sản xuất

Nếu chúng tôi muốn giới hạn phân tích trong môi trường sản xuất của mình, chúng tôi có thể kiểm tra  process.env.NODE_ENV.

Biến đổi _document.js

Trong  /pages/_document.js, hãy khai báo một biến boolean để kiểm tra quá trình sản xuất (có thể nằm ngoài thành phần).

const isProd = process.env.NODE_ENV === "production";

Sau đó, chúng ta có thể gói mọi thứ  <Head> trong một điều kiện.

<Head>
  {isProd && (
    <>
      {/* The two script tags */}
    </>
  )}
</Head>

Biến đổi _app.js

Trong  /pages/_app.js, hãy khai báo cùng một biến boolean cho sản xuất.

const isProd = process.env.NODE_ENV === "production";

Sau đó, chúng ta có thể sửa đổi  handleRouteChange thành chỉ kích hoạt trong quá trình sản xuất.

const handleRouteChange = url => {
  if (isProd) {
    window.gtag('config', process.env.NEXT_PUBLIC_GA_ID, {
      page_path: url,
    });
  }
};

Cảm ơn vì đã đọc!!!

1.05 GEEK