Cách tích hợp Google Analytics 4 (GA4) & Google Tag Manager vào Next.js chuẩn SEO
Để đánh giá hiệu quả của các chiến dịch SEO và chiến dịch quảng cáo, việc cài đặt công cụ đo lường lượt truy cập Google Analytics 4 (GA4) là bắt buộc đối với mọi website. Tuy nhiên, nếu nhúng script GA4 sai cách, bạn có thể làm giảm điểm tốc độ Google PageSpeed (Core Web Vitals) của trang web. Bài viết này hướng dẫn nhúng GA4 chuẩn Performance vào Next.js App Router.
1. 2 Cách tích hợp GA4 vào Next.js không làm chậm Web
Cách 1: Sử dụng package chính thức @next/third-parties/google (Khuyên dùng)
Từ phiên bản Next.js 14+, Vercel cung cấp thư viện tối ưu sẵn mã nạp script của Google. Cài đặt thư viện:
npm install @next/third-parties@latestTrong file layout chính src/app/layout.tsx, nhúng component GoogleAnalytics:
import { GoogleAnalytics } from '@next/third-parties/google';
export default function RootLayout({ children }) {
return (
<html lang="vi">
<body>{children}</body>
<GoogleAnalytics gaId="G-XXXXXXXXXX" />
</html>
);
}Cách 2: Tự tạo Component với Next.js <Script> Tag
Sử dụng component <Script strategy="afterInteractive" /> mặc định của Next.js để tải đoạn mã tracking sau khi giao diện trang đã dựng xong mượt mà.
2. Hướng dẫn đo lường sự kiện Click nút bấm & Chuyển đổi (Event Tracking)
Để đo lường có bao nhiêu khách bấm vào nút Call To Action (CTA) hoặc đặt hàng thành công, bạn gửi custom event về GA4 bằng đoạn code:
import { sendGAEvent } from '@next/third-parties/google';
// Gọi hàm khi khách bấm nút
sendGAEvent('event', 'buttonClicked', { value: 'SubmitForm' });3. Cách kiểm tra GA4 đã nhận dữ liệu chưa (DebugView)
- Mở Google Analytics Console → Vào Admin (Quản trị) → Chọn DebugView.
- Mở trang web của bạn trên trình duyệt, lướt qua các trang blog và kiểm tra xem màn hình DebugView có nảy các chấm dữ liệu Realtime hay không.
Kết luận
Tích hợp GA4 chuẩn bằng thư viện Next.js sẽ giúp bạn vừa thu thập dữ liệu hành vi người dùng chính xác 100%, vừa giữ nguyên điểm tốc độ tải trang đạt màu xanh tối đa. Uwmee Software nhận thiết kế website Next.js tích hợp sẵn trọn gói GA4 & Google Search Console. Đọc thêm bài viết cách nộp Sitemap.xml lên Google.
Cần vượt Closed Testing nhanh chóng?
Đội 12+ tester thật của Uwmee tương tác hằng ngày đủ 14 ngày — trọn gói chỉ 300.000đ, chạy lại miễn phí nếu không đạt.