+1

Sử dụng Google Analytics 4 để tracking web của bạn P2

Mayfest2023

Như ở phần 1 mình đã giới thiệu cho mọi người về cách setup GA4 ở đây. Thì ở phần này mình sẽ hướng dẫn mọi người cách để GA4 có thể tracking được web của mình.

Lưu ý: Ở đây mình sử dụng Vuejs để code nhé. Mình sẽ không nói về phần cài đặt một dự án bằng vuejs vì nó có rất nhiều trên mạng rồi.

Setup

  • Cài package plugin-google-analytics
npm i -D @vuepress/plugin-google-analytics@next
  • Plugin này cho phép chúng ta truy cập vào gtag của google analytics 4
  • Bạn có thể đọc thêm về cách thêm gtag vào trang web ở đây.

Sau khi cài xong package thì bạn chỉ cần thêm vào plugin của vue là được.

import { googleAnalyticsPlugin } from '@vuepress/plugin-google-analytics'

export default () {
  plugins: [
    googleAnalyticsPlugin({
        id: 'G-XXXXXXXXXX',
        debug: true,
      // more options
    }),
  ],
}
  • Để dử dụng DebugView thì bạn cần cài thêm một extentions là Google Analytics Debugger ở đây

Gửi dữ liệu lên GA4

  • Theo mặc định thì GA4 sẽ thu thập tự động các sự kiện: page_view, first_visit, session_start, scroll,...
  • Những bạn cũng có thể tạo thêm những sự kiện riêng theo ý muốn ở đây:
gtag('event', 'login', {'method': 'Google'});
  • trong đó:
    • event : là xác định lệnh gửi lên là event
    • login: là tên của sự kiện.
    • {}: option method, send_to,...

Check xem có kết quả chưa nào

  • Mở Google Analytics Debugger lên rồi vào GA4 thôi nào

image.png

image.png

Peek 2023-04-26 15-24.gif

  • Nếu bạn thấy phần DebugView như trên thì bạn đã cài đặt thành công GA4 cho trang web của mình.

All Rights Reserved

Viblo
Let's register a Viblo Account to get more interesting posts.