Hướng dẫn chèn Google Tag Manager trong dự án Next.js

Khi dự án online và cần tracking lượt view, event… mặc định ta có thể nghĩ ngay đến Google Tag Manager kết hợp với Google Analytics.

Hoặc trong trường hợp bạn không quan tâm thì đây chỉ là một task cần phải làm khi website on-air.

Để cài đặt trong website thông thường, bạn chỉ việc làm theo các hướng dẫn của Google Tag Manager là xong (chèn script ở 2 nơi).

Tuy vậy trong dự án NextJS sẽ có một số vấn đề liên quan đến load custom javascript ở phần head. Đó là lý do bạn cần đọc tutorial này.

Thay vì phải custom document hay làm các bước dài phức tạp, chúng ta đã có một package ngon nghẽ để làm điều này.

Xin giới thiệu: @phntms/next-gtm

Các bước cài đặt

npm i @phntms/next-gtm

Tạo file .env ở thư mục gốc (nếu chưa có), thêm vào dòng này

NEXT_PUBLIC_GA_TRACKING_ID="your-gtm-id"

Sửa file pages/_app.js thành thế này, chú ý các dòng in đậm

import '../styles/globals.css'
import { TrackingHeadScript } from "@phntms/next-gtm";

const GA_TRACKING_ID = process.env.NEXT_PUBLIC_GA_TRACKING_ID || "";

function MyApp({ Component, pageProps }) {
  return (
    <>
      <TrackingHeadScript id={GA_TRACKING_ID} />
      <Component {...pageProps} />
    </>
  )
}

export default MyApp

Restart lại app (tắt và chạy lại npm run dev để ứng dụng nhận biến environment vừa thêm.

Tada, thế là xong.