Cách thêm Google Analytics vào trang web Next.js
Phân tích dữ liệu là điều bắt buộc nếu bạn muốn theo dõi số lượng khách truy cập mà trang web của bạn đang nhận được. Có nhiều cách khác nhau để bạn có thể thêm phân tích vào dự án của mình, bao gồm cả Google Analytics. Đây là một dịch vụ miễn phí và tương đối đơn giản để thiết lập.
Tìm hiểu cách thêm Google Analytics vào trang web của bạn bằng cách sử dụng Next.js, một khuôn khổ React để xây dựng các trang web thân thiện với SEO.
Mục Lục
Thiết lập Google Analytics
Google Analytics cung cấp thông tin chi tiết về hành vi của những người truy cập trang web của bạn. Nó cho bạn biết những trang nào nhận được số lượt xem và cung cấp cho bạn dữ liệu đối tượng như vị trí, độ tuổi, sở thích và thiết bị họ sử dụng. Dữ liệu này có thể giúp đưa ra quyết định về hướng đi mà doanh nghiệp của bạn nên thực hiện để thành công.
Để bắt đầu, hãy truy cập trang tổng quan phân tích và tạo tài khoản mới bằng cách thực hiện theo các bước sau:
- Nhấn vào Tạo tài khoản trong tab quản trị để tạo tài khoản mới.
- Thêm tên tài khoản trong phần Thiết lập tài khoản.
- Tạo thuộc tính phân tích bằng cách cung cấp tên.
- Thêm chi tiết doanh nghiệp. Chọn các tùy chọn áp dụng cho trang web của bạn.
- Nhấn vào Tạo ra để hoàn tất việc thiết lập thuộc tính.
- Nhấp vào luồng web để chỉ định luồng dữ liệu mà Google Analytics sẽ theo dõi.
- Chỉ định URL cho trang web của bạn và đặt tên cho luồng dữ liệu.
- Nhấp vào hướng dẫn gắn thẻ và nhận tập lệnh bạn sẽ sử dụng trên trang web của mình.
- Sao chép ID đo lường (mã theo dõi) để sử dụng sau này.
Sau khi nhận được mã theo dõi, bạn có thể thiết lập dự án Next.js.
Thiết lập Dự án Next.js
Nếu bạn chưa thiết lập dự án Next.js, hãy xem hướng dẫn chính thức của Next.js để bắt đầu.
Khi bạn tạo thuộc tính Thẻ trang web toàn cầu, bạn nhận được một tập lệnh như sau:
<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-NHVWK8L97D');
</script>
Bạn cần thêm tập lệnh này vào thẻ head của trang web của mình. Trong Next.js, bạn sử dụng thành phần Script từ next / script. Thành phần này là một phần mở rộng của thẻ tập lệnh HTML. Nó cho phép bạn bao gồm các tập lệnh của bên thứ ba vào trang web Next.js của bạn và thiết lập chiến lược tải của chúng, cải thiện hiệu suất.
Thành phần Next.js Script cung cấp các chiến lược tải khác nhau. Chiến lược “tương tác sau” phù hợp với tập lệnh phân tích. Điều này có nghĩa là nó sẽ tải sau khi trang tương tác.
import Script from "next/script"
<Script src="" strategy="afterInteractive" />
Mở trang / _app.js và nhập thành phần Tập lệnh ở trên cùng.
import Script from 'next/script'
Tiếp theo, hãy sửa đổi câu lệnh trả về của Thành phần ứng dụng để bao gồm thẻ tập lệnh từ Google analytics.
import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'function MyApp({ Component, pageProps }) {
return (
<>
<Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXXX"/>
<Script
id='google-analytics'
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXXX', {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
export default MyApp
Lưu ý rằng thẻ này hơi khác với thẻ mà Google Analytics cung cấp. Nó sử dụng một cách nguy hiểmSetInnerHTML và bao gồm một chiến lược tải. Tuy nhiên, chúng hoạt động giống nhau.
Hãy nhớ thay thế G-XXXXXXX bằng mã theo dõi của bạn. Bạn cũng nên lưu trữ mã theo dõi trong tệp .env để giữ bí mật.
Thêm Google Analytics vào một ứng dụng trang
Bạn có thể sử dụng thẻ script ở trên cho một trang web thông thường và để nó ở đó. Tuy nhiên, đối với ứng dụng một trang như trang web Next.js, bạn cần thực hiện thêm một số bước.
Ứng dụng một trang (SPA) là một trang web tải trước tất cả nội dung theo yêu cầu ban đầu. Trình duyệt tải nội dung động khi người dùng nhấp vào các liên kết để điều hướng trang web. Nó không thực hiện yêu cầu trang, chỉ thay đổi URL.
Điều này khác với các trang Next.js sử dụng getServerSideProps khi trình duyệt hiển thị các trang đó theo yêu cầu.
Thẻ Google hoạt động bằng cách ghi lại một lượt xem trang khi một trang mới tải. Vì vậy, đối với các SPA, thẻ Google chỉ được thực thi một lần khi trang tải lần đầu. Do đó, bạn phải ghi lại các chế độ xem theo cách thủ công khi người dùng điều hướng đến các trang khác nhau.
Xem hướng dẫn Google Analytics đo lường một trang để tìm hiểu thêm.
Để ghi lại các lần xem trang theo cách thủ công trong Next.js bằng cách sử dụng tập lệnh gtag, hãy tạo một thư mục mới có tên lib và thêm một tệp mới, gtag.js.
export const GA_MEASUREMENT_ID = process.env.GA_MEASUREMENT_ID;export const pageview = () => {
window.gtag("config", GA_MEASUREMENT_ID, {
page_path: url,
});
};
export const event = ({ action, category, label, value }) => {
window.gtag("event", action, {
event_category: category,
event_label: label,
value,
});
};
Tiếp theo, sửa đổi /pages/_app.js để sử dụng các chức năng này và theo dõi lượt xem trang trong móc useEffect.
import '../styles/globals.css'
import Layout from '../components/Layout/Layout'
import Script from 'next/script'
import { useRouter } from 'next/router';
import { useEffect } from "react";
import * as gtag from "../lib/gtag"function MyApp({ Component, pageProps }: AppProps) {
const router = useRouter();
useEffect(() => {
const handleRouteChange = (url) => {
gtag.pageview(url);
};
router.events.on("routeChangeComplete", handleRouteChange);
return () => {
router.events.off("routeChangeComplete", handleRouteChange);
};
}, [router.events]);
return (
<>
<Script strategy="afterInteractive" src="https://www.googletagmanager.com/gtag/js?id=G-XXXXXX"></Script>
<Script
id='google-analytics'
strategy="afterInteractive"
dangerouslySetInnerHTML={{
__html: `
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'G-XXXXXX', {
page_path: window.location.pathname,
});
`,
}}
/>
<Layout>
<Component {...pageProps} />
</Layout>
</>
)
}
export default MyApp
Ví dụ này sử dụng các móc useRouter và useEffect để ghi lại một lượt xem trang mỗi khi người dùng điều hướng đến một trang khác.
Gọi phương thức useRouter từ next / router và gán nó cho biến router. Trong hook useEffect, hãy lắng nghe sự kiện routeChangeComplete trên bộ định tuyến. Khi sự kiện kích hoạt, hãy ghi lại một lần xem trang bằng cách gọi hàm handleRouteChange.
Câu lệnh trả về của useEffect hook hủy đăng ký sự kiện routeChangeComplete bằng phương thức ‘off’.
Sử dụng Google Analytics để thu thập dữ liệu người dùng
Dữ liệu rất có lợi cho việc đưa ra quyết định tốt và thêm Google Analytics vào trang web của bạn là một cách để thu thập dữ liệu đó.
Bạn có thể thêm Google Analytics vào dự án Next.js bằng cách sử dụng hook để đảm bảo bạn ghi lại tất cả các lần xem trang ngay cả khi một trang sử dụng định tuyến phía máy khách. Giờ đây, bạn có thể xem trang web của mình nhận được bao nhiêu lượt xem trên trang tổng quan Google Analytics.