Tích hợp GA4 Google Analytics vào Zalo MiniApp

#zalo #miniapp #ga4

Hệ thống SaaS Evotech bên mình đã chạy được gần 1 năm, khách hàng có doanh nghiệp lên đến hàng nghìn lượt truy cập mỗi ngày, tuy nhiên vẫn chưa có 1 cơ chế tracking đầy đủ để tracking user behavior, lượt truy cập, revenue,... Chính vì vậy, team mình đã tìm các giải pháp tracking đang có trên thị trường.

1. Posthog Self-hosted
Mình có thử qua Posthog self-hosted nhưng triển khai server khá phức tạp, tài liệu ko rõ ràng, và bản thân team Posthog thông báo công khai là không có customer support cho self-hosted nên đành phải quay xe, mặc dù tính năng của Posthog rất hay.

2. Google Analytics
Dạo qua 1 vòng Community của miniapp thì thấy ae hay dùng GA4, tuy nhiên các câu hỏi Q&A đã outdate, và Zalo cũng ko có tài liệu chính thức, vì vậy mình tổng hợp lại các bước dưới đây cho anh em tham khảo. Hiện tại cách duy nhất gửi dữ liệu lên GA4 là thông qua gọi API Measurement Protocol. Thư viện https://www.npmjs.com/package/zmp-ga4 đã deprecated.

Tạo API Key
Truy cập Google Analytics trên Google Console -> Admin -> Data streams -> Add stream -> Web -> Copy API Key
Gắn vào mini app
Tạo 1 file Tracking.ts dùng chung cho việc xử lý event tracking:

// utils/Tracking.ts - Measurement Protocol cho Zalo Mini App
const MEASUREMENT_ID = 'G-XXXXXXXXXX';  // Thay bằng ID của bạn
const API_SECRET = 'YOUR_API_SECRET';   // Thay secret

async function sendGA4Event(eventName, params = {}) {
  try {
    // Lấy Zalo user ID làm client_id (unique tracking)
    const zaloUser = await zmp.getCurrentUserInfo();
    const clientId = zaloUser?.userId || `zalo_anonymous_${Date.now()}`;

    const payload = {
      client_id: clientId,
      user_id: clientId,
      user_properties: currentUserProperties,
      events: [{
        name: eventName,
        params: {
          // Auto params
          page_title: document.title || zmp.currentPage?.title || 'Zalo Mini App',
          page_location: `zalo://miniapp${window.location.pathname || '/'}`,
          engagement_time_msec: 100,  // Tăng retention
          // Custom params
          ...params
        }
      }]
    };

    const url = `https://www.google-analytics.com/mp/collect?measurement_id=${MEASUREMENT_ID}&api_secret=${API_SECRET}`;

    const response = await fetch(url, {
      method: 'POST',
      headers: { 'Content-Type': 'application/json' },
      body: JSON.stringify(payload)
    });

    if (!response.ok) {
      console.warn('GA4 send fail:', response.status, await response.text());
    }
  } catch (error) {
    console.error('GA4 error:', error);
  }
}

// Export functions dùng
export const GA4 = {
  pageView: (pageTitle) => sendGA4Event('page_view', { page_title: pageTitle }),
  buttonClick: (buttonName) => sendGA4Event('button_click', { button_name: buttonName }),
  purchase: (value, currency = 'VND') => sendGA4Event('purchase', { value, currency }),
  // Thêm events khác...
};