Bước 1: Tạo Tài Khoản Mixpanel
- Truy cập mixpanel.com và đăng ký
- Lấy mã token từ project settings
Bước 2: Cài Đặt SDK
# Sử dụng NPM
npm install mixpanel-react-native
# Hoặc Yarn
yarn add mixpanel-react-native
iOS Setup
cd ios && pod install
Bước 3: Khởi Tạo Mixpanel
import { Mixpanel } from 'mixpanel-react-native';
const mixpanel = new Mixpanel(“YOUR_TOKEN”);
mixpanel.init();
Bước 4: Theo Dõi Sự Kiện
// Theo dõi sự kiện cơ bản
await mixpanel.track('Button Clicked', {
'button_name': 'signup',
'screen': 'LoginScreen'
});
// Theo dõi với thuộc tính người dùng
await mixpanel.identify(‘user123’);
await mixpanel.getPeople().set({
‘$email’: ‘[email protected]’,
‘$name’: ‘John Doe’,
‘Plan’: ‘Premium’
});
Ví Dụ Tích Hợp
import React, { useEffect } from 'react';
import { Mixpanel } from 'mixpanel-react-native';
const App = () => {
useEffect(() => {
const initMixpanel = async () => {
const mixpanel = new Mixpanel(“YOUR_TOKEN”);
try {
await mixpanel.init();
console.log(‘Mixpanel initialized’);
} catch (e) {
console.error(‘Failed to initialize Mixpanel:’, e);
}
};
initMixpanel();
}, []);
return (
// Your app components
);
};
export default App;
Các Phương Pháp Hay Nhất
- Khởi tạo Mixpanel trong
useEffect
của component gốc - Xử lý lỗi khi khởi tạo và tracking
- Sử dụng tên sự kiện nhất quán
- Thêm thuộc tính screen_name cho mọi sự kiện
- Dùng try-catch cho các hàm async
Debug Mode
// Bật debug mode để kiểm tra tracking
const mixpanel = new Mixpanel("YOUR_TOKEN", {
debug: true,
trackAutomaticEvents: true
});
Các Bước Tiếp Theo
- Thiết lập user identification
- Cấu hình custom events
- Tạo dashboard đầu tiên
- Thiết lập funnel và retention analysis
Tham khảo thêm tại React Native Mixpanel Documentation.