Sediakan Analitis Mixpanel dalam Aplikasi NextJS

Analitik adalah penting untuk mana-mana aplikasi yang menguntungkan, sama ada aplikasi kecil dengan 100 pengguna atau aplikasi besar dengan 10,000 pengguna.

Memahami pengguna anda adalah salah satu perkara yang paling kritikal. Dan panel campuran ialah salah satu alat terbaik untuk melakukannya.

Hari ini, kita akan belajar cara menyepadukan dan memulakan penjejakan panel campuran.

Sediakan projek

Saya menganggap anda sudah mempunyai persediaan projek NextJS. Juga, buat akaun Mixpanel baharu dari sini (Jika anda belum melakukannya).

Perlu diingat bahawa saya menunjukkan untuk NextJS tetapi ia juga terpakai untuk mana-mana apl ReactJS.

Kemudian, pasang kebergantungan

npm install mixpanel-browser

Dapatkan token

Mula-mula, tambahkan pembolehubah persekitaran berikut

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

Kini, anda boleh mendapatkan token panel campuran daripada papan pemuka projek anda.

Kemudian pergi ke Tetapan -> Tetapan Projek

Kemudian ambil Token Projek dan tambahkannya dalam fail persekitaran.

Cipta Fail Konfigurasi

Buat fail bernama mixpanel.ts dan tambah kod berikut

import mixpanel from 'mixpanel-browser';

// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
  PAGE_VIEW: 'Page View',
  BUTTON_CLICK: 'Button Click',
  FORM_SUBMIT: 'Form Submit',
  USER_SIGNED_IN: 'User Signed In',
  USER_SIGNED_UP: 'User Signed Up',
  USER_SIGNED_OUT: 'User Signed Out',
  // ... other events
};

// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;

if (MIXPANEL_TOKEN) {
  mixpanel.init(MIXPANEL_TOKEN, {
    debug: process.env.NODE_ENV === 'development',
    track_pageview: true,
    persistence: 'localStorage',
    ignore_dnt: true,
  });
}

Jadi, mulakan panel campuran setinggi mungkin dalam pokok komponen anda.

Tambah Fungsi Analitis

Sekarang, selepas anda menambah konfigurasi, tiba masanya untuk menambah beberapa fungsi boleh guna semula untuk menjejak acara panel campuran.

Jadi tambah kod berikut dalam fail yang sama:

export const MixpanelAnalytics = {
  track: <T extends Record<string, any>>(
    eventName: string,
    properties?: T & CommonEventProperties
  ) => {
    try {
      if (MIXPANEL_TOKEN) {
        mixpanel.track(eventName, {
          ...properties,
          timestamp: Date.now(),
          path: typeof window !== 'undefined' ? window.location.pathname : undefined,
        });
      }
    } catch (error) {
      console.error('Error tracking event:', error);
    }
  },

  pageView: (pageName: string, properties?: Record<string, any>) => {
    try {
      if (MIXPANEL_TOKEN) {
        MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
          page: pageName,
          ...properties,
        });
      }
    } catch (error) {
      console.error('Error tracking page view:', error);
    }
  }
};

Jika anda menganalisis 2 fungsi di atas ini

jejak

Fungsi ini digunakan untuk mengesan sebarang jenis acara.

Sebagai contoh, jika anda ingin menjejaki pengguna, klik butang untuk melawati tapak web luaran. Mungkin untuk pengiraan affiliate

Anda boleh melakukan perkara berikut:

MixpanelAnalytics.track("VISIT_WEBSITE", {
  website_name: name,
  website_url: website,
  visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});

pageView

Ini ialah kaedah yang cukup mudah untuk menjejaki setiap paparan halaman dalam aplikasi anda.

Sekarang ingat — apabila kami memulakan panel campuran, kami telah memberitahunya untuk menjejak paparan halaman:

mixpanel.init(MIXPANEL_TOKEN, {
  track_pageview: true,  << HERE
  ...others
});

Jadi penjejakan tersuai ini hanya untuk analisis yang lebih terperinci.

Kenali pengguna anda

Sekarang, menjejak klik adalah bagus dan semuanya, tetapi banyak kali, ia tidak mencukupi.

Mungkin anda ingin menjejaki pengguna tertentu. Mungkin anda ingin tahu siapa yang melakukan apa. Mungkin anda sedang mencipta corong untuk menganalisis gelagat pengguna.

Untuk senario ini, mixpanel menyediakan 2 fungsi.

1. mengenal pasti

2. set semula

Jadi, pada tahap yang tinggi, selepas pengguna log masuk, anda boleh menghubungi

mixpanel.identify("whatever identified you want (usually email or userid)")

Dan apabila log keluar, anda boleh menetapkan semula

mixpanel.reset()

Kini anda juga boleh menambah konteks atau butiran tambahan tentang pengguna anda menggunakan kaedah people.set()

Sebagai contoh,

npm install mixpanel-browser

Terdapat beberapa kaedah tambahan seperti tambah, kesatuan, kenaikan dsb., untuk mengendalikan lebih banyak senario, tetapi langkaukannya kerana ia bukan fokus artikel ini. Anda boleh membaca lebih lanjut di sini

Tetapi bagaimana dengan pengguna tanpa nama?

Kini, dalam banyak aplikasi (terutamanya tapak awam) — log masuk tidak wajib untuk melihat kandungannya.

Tetapi bagaimana kita menjejaki orang tersebut jika mereka tidak log masuk?

Untuk mengendalikan semua senario ini, mari buat dua lagi fungsi utiliti.

NEXT_PUBLIC_MIXPANEL_TOKEN="YOUR_TOKEN_HERE"

Jadi anda boleh menjejaki pengguna anda yang dikenali dan tidak dikenali dengan ini.

Contoh penggunaan boleh kelihatan seperti berikut: Dalam salah satu fail akar — (fail layout.tsx dalam penghala apl, _app.tsx dalam penghala halaman)

Tambah yang berikut

import mixpanel from 'mixpanel-browser';

// Define event names as constants to prevent typos
export const ANALYTICS_EVENTS = {
  PAGE_VIEW: 'Page View',
  BUTTON_CLICK: 'Button Click',
  FORM_SUBMIT: 'Form Submit',
  USER_SIGNED_IN: 'User Signed In',
  USER_SIGNED_UP: 'User Signed Up',
  USER_SIGNED_OUT: 'User Signed Out',
  // ... other events
};

// Initialize mixpanel
const MIXPANEL_TOKEN = process.env.NEXT_PUBLIC_MIXPANEL_TOKEN;

if (MIXPANEL_TOKEN) {
  mixpanel.init(MIXPANEL_TOKEN, {
    debug: process.env.NODE_ENV === 'development',
    track_pageview: true,
    persistence: 'localStorage',
    ignore_dnt: true,
  });
}

Jadi ini akan memulakan pengguna dengan sewajarnya apabila mereka melawat tapak.

Anda boleh mengumpulkan data dan menyerahkannya kepada pengguna tertentu ini pada masa hadapan.

Contoh penggunaan

Kini tibalah bahagian yang menyeronokkan. Perhatikan kod berikut dan kemas kini mengikut keperluan anda.

export const MixpanelAnalytics = {
  track: <T extends Record<string, any>>(
    eventName: string,
    properties?: T & CommonEventProperties
  ) => {
    try {
      if (MIXPANEL_TOKEN) {
        mixpanel.track(eventName, {
          ...properties,
          timestamp: Date.now(),
          path: typeof window !== 'undefined' ? window.location.pathname : undefined,
        });
      }
    } catch (error) {
      console.error('Error tracking event:', error);
    }
  },

  pageView: (pageName: string, properties?: Record<string, any>) => {
    try {
      if (MIXPANEL_TOKEN) {
        MixpanelAnalytics.track(ANALYTICS_EVENTS.PAGE_VIEW, {
          page: pageName,
          ...properties,
        });
      }
    } catch (error) {
      console.error('Error tracking page view:', error);
    }
  }
};

Dalam fungsi di atas kami menjejaki profil pengguna tertentu dengan data penjejakan dan juga memastikan bahawa kami mengira lawatan mereka ke tapak web tertentu juga.

Sejuk kan?

Amalan terbaik

Apabila bekerja dengan analitis — adalah sangat penting untuk memastikan data konsisten.

Jadi, pastikan anda menambah jenis yang sesuai untuk acara analitis.

Contohnya

Tentukan pemalar untuk peristiwa.

Jangan sekali-kali menggunakan rentetan biasa untuk nama acara.

MixpanelAnalytics.track("VISIT_WEBSITE", {
  website_name: name,
  website_url: website,
  visit_count: (mixpanel.get_property('total_website_visits') ?? 0) + 1,
});

Jenis keselamatan

Untuk muatan acara, pastikan anda menggunakan struktur yang konsisten dengan menggunakan jenis

mixpanel.init(MIXPANEL_TOKEN, {
  track_pageview: true,  << HERE
  ...others
});

Sifat Pengguna

Sentiasa mengekalkan sifat pengguna yang konsisten merentas sesi.

mixpanel.identify("whatever identified you want (usually email or userid)")

Jika tidak, di bawah jalan, data akan menjadi sia-sia.

Kesimpulan

Ingat untuk mengendalikan pemulaan analitis dengan betul dalam komponen bahagian pelanggan anda.

Selain itu, pastikan data pengguna sensitif dikendalikan dengan sewajarnya mengikut dasar privasi dan peraturan perlindungan data anda.

Semoga anda belajar sesuatu yang baharu hari ini.

Selamat hari raya!

Atas ialah kandungan terperinci Sediakan Analitis Mixpanel dalam Aplikasi NextJS. Untuk maklumat lanjut, sila ikut artikel berkaitan lain di laman web China PHP!