BÀI 24: TÍCH HỢP GOOGLE ANALYTICS 4 VỚI NUXT 3

Cùng tiếp tục với Bài 24 – Tích hợp Google Analytics 4 (GA4) với Nuxt 3. Đây là bước cực kỳ quan trọng để bạn theo dõi hành vi người dùng, đo lường hiệu quả nội dung, biết trang nào được truy cập nhiều nhất, và từ đâu người dùng đến.

---

1. Vì sao nên dùng GA4?

• Đo số lượt xem trang (pageview)
• Theo dõi sự kiện: đăng ký, click button, mua hàng,…
• Biết nguồn traffic: Google, Facebook, direct,…
• Theo dõi thời gian đọc, tỷ lệ thoát, thiết bị truy cập

---

2. Lấy mã đo GA4

Truy cập https://analytics.google.com:

• Tạo tài khoản Google Analytics mới
• Chọn loại: GA4 (Google Analytics 4)
• Lấy Measurement ID dạng: G-XXXXXXXXXX

---

3. Cài @vueuse/head (nếu bạn chưa có)

📋 Copynpm install @vueuse/head

Trong nuxt.config.ts, đã được Nuxt tự tích hợp nếu dùng useHead(), nên có thể bỏ qua bước này.

---

4. Gắn GA4 vào Nuxt bằng plugin

Tạo file: plugins/ga.client.ts

📋 Copyexport default defineNuxtPlugin(() => {
  if (process.env.NODE_ENV !== 'production') return

  const id = 'G-XXXXXXXXXX' // Thay bằng ID thực tế của bạn

  // Tạo thẻ script
  const script = document.createElement('script')
  script.setAttribute('async', '')
  script.setAttribute('src', `https://www.googletagmanager.com/gtag/js?id=${id}`)
  document.head.appendChild(script)

  window.dataLayer = window.dataLayer || []
  function gtag() {
    window.dataLayer.push(arguments)
  }

  gtag('js', new Date())
  gtag('config', id)

  // Theo dõi pageview khi route thay đổi
  const router = useRouter()
  router.afterEach((to) => {
    gtag('event', 'page_view', {
      page_title: document.title,
      page_path: to.fullPath
    })
  })
})

---

5. Kiểm tra có hoạt động chưa?

Mở DevTools → tab Network → filter collect hoặc gtag
→ Nếu thấy request gửi đến https://www.google-analytics.com/g/collect?... là OK.

Bạn cũng có thể vào GA → Realtime để test live

---

6. Gửi sự kiện tùy chỉnh (event tracking)

Trong component:

📋 Copyfunction trackRegister() {
  window.gtag?.('event', 'sign_up', {
    method: 'email',
    content_type: 'button',
    value: 1
  })
}

Một số sự kiện gợi ý:

Tên sự kiện	Khi nào?
sign_up	Khi người dùng đăng ký
login	Khi người dùng đăng nhập
search	Khi người dùng tìm kiếm
select_content	Khi người đọc bài viết cụ thể
generate_lead	Khi gửi form liên hệ

---

7. Nâng cao: Dùng Google Tag Manager (GTM)

Thay vì dùng GA4 trực tiếp, bạn có thể tích hợp GTM để quản lý nhiều nền tảng tracking.

Dùng module community:

📋 Copynpm install @nuxtjs/gtm

Trong nuxt.config.ts:

📋 Copyexport default defineNuxtConfig({
  modules: ['@nuxtjs/gtm'],
  gtm: {
    id: 'GTM-XXXXXXX',
    enabled: process.env.NODE_ENV === 'production',
    pageTracking: true
  }
})

---

Bạn đã học được

• Tạo tài khoản Google Analytics 4
• Tích hợp GA4 vào Nuxt bằng plugin
• Theo dõi pageview khi route thay đổi
• Gửi event tuỳ chỉnh: đăng ký, đăng nhập,…
• Biết cách dùng Google Tag Manager (GTM)

---

Bài tập mở rộng

1. Gắn ID thực của bạn và test real-time
2. Track page_view mỗi lần chuyển trang
3. Track sign_up, login, share qua các nút tương ứng
4. Dùng gtag() để gửi thêm thông tin tùy chỉnh