ضمیمه ه: جزئیات کامل تحلیل داده‌ها با Plausible (فصل ۱۱)

این ضمیمه جزئیات کامل پیاده‌سازی تحلیل داده‌ها با استفاده از ماژول @nuxtjs/plausible در اپلیکیشن مرکز اجاره کشتی‌های کروز را ارائه می‌دهد. تمرکز بر ردیابی رویدادهای سفارشی، تنظیم داشبورد Plausible، و تحلیل داده‌های کاربران است. این بخش جنبه‌هایی که در فصل یازدهم یا ضمیمه‌های اولیه به‌صورت خلاصه یا غایب بودند را به‌طور جامع پوشش می‌دهد، تا درک کاملی از نحوه استفاده از Plausible برای ردیابی رفتار کاربران فراهم شود.

---

نصب و پیکربندی اولیه

Plausible Analytics یک ابزار تحلیل سبک و متمرکز بر حریم خصوصی است که جایگزینی برای Google Analytics ارائه می‌دهد. ماژول @nuxtjs/plausible ادغام ساده‌ای با Nuxt 3 فراهم می‌کند.

مراحل نصب

1. نصب ماژول:

   npm install @nuxtjs/plausible

1. به‌روزرسانی nuxt.config.ts:

   export default defineNuxtConfig({
     modules: [
       '@pinia/nuxt',
       '@nuxtjs/tailwindcss',
       '@nuxt/image',
       '@nuxt/content',
       '@sidebase/nuxt-auth',
       '@nuxtjs/supabase',
       '@nuxtjs/plausible',
     ],
     plausible: {
       domain: process.env.PLAUSIBLE_DOMAIN || 'your-app-url.com', // دامنه اپلیکیشن
       apiHost: process.env.PLAUSIBLE_API_HOST || 'https://plausible.io', // سرور Plausible
       autoOutboundTracking: true, // ردیابی لینک‌های خارجی
       autoPageviews: true, // ردیابی خودکار بازدید صفحات
     },
     runtimeConfig: {
       public: {
         plausibleDomain: process.env.PLAUSIBLE_DOMAIN,
       },
     },
   });

• توضیحات:

  • domain: دامنه اپلیکیشن (مانند your-app-url.com) که در Plausible ثبت شده است.
  • apiHost: آدرس سرور Plausible (برای Plausible خودهاست‌شده قابل تغییر است).
  • autoOutboundTracking: کلیک روی لینک‌های خارجی (مانند لینک‌های شبکه‌های اجتماعی) را ردیابی می‌کند.
  • autoPageviews: بازدیدهای صفحات (/, /ships, /bookings) را به‌صورت خودکار ردیابی می‌کند.

• متغیرهای محیطی در .env:

   PLAUSIBLE_DOMAIN=your-app-url.com
   PLAUSIBLE_API_HOST=https://plausible.io

• توضیحات:
  • PLAUSIBLE_DOMAIN: دامنه‌ای که در داشبورد Plausible ثبت شده است.
  • PLAUSIBLE_API_HOST: برای Plausible ابری، از https://plausible.io استفاده کنید؛ برای خودهاست‌شده، آدرس سرور خود را وارد کنید.

---

ردیابی رویدادهای سفارشی

رویدادهای سفارشی امکان ردیابی اقدامات خاص کاربران (مانند کلیک روی دکمه‌ها یا تکمیل رزرو) را فراهم می‌کنند. این رویدادها برای تحلیل رفتار کاربران و بهبود تجربه کاربری حیاتی هستند.

ردیابی کلیک روی دکمه‌ها در ShipCard.vue:

<!-- components/ShipCard.vue -->
<template>
  <div class="card">
    <NuxtImg :src="ship.image" alt="Ship" class="w-full h-48 object-cover" provider="static" />
    <div class="p-4">
      <h2 class="text-xl font-semibold">{{ ship.name }}</h2>
      <p class="text-gray-600">Capacity: {{ ship.capacity }}</p>
      <p class="text-gray-600">Price: ${{ ship.pricePerDay }}/day</p>
      <NuxtLink
        :to="`/ships/${ship.id}`"
        @click="trackViewDetails"
        class="text-blue-500 hover:underline"
      >
        View Details
      </NuxtLink>
    </div>
  </div>
</template>

<script setup>
import { usePlausible } from '#plausible';
import type { Ship } from '~/types';

defineProps<{ ship: Ship }>();

const plausible = usePlausible();

const trackViewDetails = () => {
  plausible('View Ship Details', { props: { shipId: ship.id, shipName: ship.name } });
};
</script>

• توضیحات:

• usePlausible: هوک ارائه‌شده توسط @nuxtjs/plausible برای ارسال رویدادهای سفارشی.

• رویداد View Ship Details: زمانی که کاربر روی لینک "View Details" کلیک می‌کند، ثبت می‌شود.
• props: اطلاعات اضافی مانند shipId و shipName برای تحلیل دقیق‌تر.

ردیابی تکمیل رزرو در pages/ships/[id].vue:

<!-- pages/ships/[id].vue -->
<script setup>
import { usePlausible } from '#plausible';
import { useBookingsStore } from '~/stores/bookings';
import { loadStripe } from '@stripe/stripe-js';
import type { Ship } from '~/types';

const route = useRoute();
const bookingsStore = useBookingsStore();
const config = useRuntimeConfig();
const plausible = usePlausible();

const { data: ship } = await useAsyncData('ship', () => $fetch(`/api/ships/${route.params.id}`));

const handleBooking = async (values: { startDate: string; endDate: string }) => {
  if (!ship.value) return;
  const days = (new Date(values.endDate) - new Date(values.startDate)) / (1000 * 60 * 60 * 24);
  const totalPrice = days * ship.value.pricePerDay;
  const booking = {
    shipId: ship.value.id,
    startDate: new Date(values.startDate),
    endDate: new Date(values.endDate),
    totalPrice,
  };

  const { id } = await $fetch('/api/stripe-checkout', {
    method: 'POST',
    body: { booking },
  });

  const stripe = await loadStripe(config.public.stripePublishableKey);
  await stripe.redirectToCheckout({ sessionId: id });

  await bookingsStore.addBooking(booking);
  plausible('Booking Completed', { props: { shipId: ship.value.id, totalPrice } });
  alert('Booking successful!');
};
</script>

• توضیحات:

• رویداد Booking Completed: پس از تکمیل موفقیت‌آمیز رزرو (و پرداخت با Stripe) ثبت می‌شود.

• props: شامل shipId و totalPrice برای تحلیل ارزش رزروها.

ردیابی ورود کاربران در pages/login.vue:

<!-- pages/login.vue -->
<script setup>
import { usePlausible } from '#plausible';
import { signIn } from '#auth';

const plausible = usePlausible();

const signInWithGithub = async () => {
  await signIn('github', { callbackUrl: '/bookings' });
  plausible('Sign In', { props: { provider: 'github' } });
};

const signInWithGoogle = async () => {
  await signIn('google', { callbackUrl: '/bookings' });
  plausible('Sign In', { props: { provider: 'google' } });
};
</script>

• توضیحات:

• رویداد Sign In: هنگام ورود کاربر با GitHub یا Google ثبت می‌شود.

• props.provider: مشخص می‌کند کدام ارائه‌دهنده OAuth استفاده شده است.

---

تنظیم و استفاده از داشبورد Plausible

Plausible Analytics یک داشبورد ساده و متمرکز بر حریم خصوصی ارائه می‌دهد که داده‌های تحلیلی را به‌صورت بصری نمایش می‌دهد.

ایجاد پروژه در Plausible

1. به Plausible.io بروید و یک حساب کاربری ایجاد کنید.
2. یک پروژه جدید برای دامنه اپلیکیشن (مانند your-app-url.com) اضافه کنید.
3. در تنظیمات پروژه، دامنه را تأیید کنید (با DNS یا متا تگ).
4. کد اسکریپت Plausible به‌صورت خودکار توسط @nuxtjs/plausible در اپلیکیشن تزریق می‌شود.

گزارش‌های ردیابی

• بازدیدهای صفحات:

• صفحات ردیابی‌شده: /, /ships, /ships/[id], /bookings, /login.

• داده‌ها: تعداد بازدیدکنندگان منحصربه‌فرد، مدت زمان بازدید، نرخ پرش (Bounce Rate).

• رویدادهای سفارشی:

• View Ship Details: تعداد کلیک‌ها روی لینک‌های جزئیات کشتی، با تفکیک shipId و shipName.

• Booking Completed: تعداد رزروهای موفق، با جزئیات shipId و totalPrice.
• Sign In: تعداد ورودها، با تفکیک ارائه‌دهنده (github یا google).

• داده‌های جغرافیایی و دستگاه:

• موقعیت جغرافیایی کاربران (کشور، شهر).

• نوع دستگاه (دسکتاپ، موبایل، تبلت) و مرورگر.

• منابع ترافیک:

• منابعی مانند موتورهای جستجو، شبکه‌های اجتماعی، یا لینک‌های مستقیم.

تحلیل در داشبورد

• نمودارهای بازدید:

• نمایش تعداد بازدیدکنندگان در بازه‌های زمانی (روزانه، هفتگی، ماهانه).

• امکان فیلتر بر اساس صفحه یا رویداد.

• گزارش‌های رویداد:

• نمایش تعداد کل رویدادها (مانند Booking Completed) و ارزش‌های مرتبط (مانند مجموع totalPrice).

• تنظیمات سفارشی:

• در داشبورد Plausible، می‌توانید اهداف (Goals) برای رویدادهای سفارشی (مانند Booking Completed) تنظیم کنید تا تبدیل‌ها (Conversions) را ردیابی کنید.

• امکان ادغام با ابزارهای دیگر (مانند Slack یا Zapier) برای اعلان‌های بلادرنگ.

نمونه داشبورد (تصویر فرضی):

تصویر زیر نمونه‌ای از داشبورد Plausible را نشان می‌دهد که بازدیدهای صفحه و رویدادهای سفارشی را نمایش می‌دهد:

(توجه: تصویر واقعی در اینجا قابل نمایش نیست. در داشبورد Plausible، انتظار نمودارهایی برای بازدیدها، رویدادها، و داده‌های جغرافیایی را داشته باشید.)

---

ادغام با سایر بخش‌های اپلیکیشن

برای تحلیل دقیق‌تر، Plausible با بخش‌های دیگر اپلیکیشن (مانند رزروها و احراز هویت) ادغام می‌شود:

• ردیابی رزروها:

• در stores/bookings.ts:

    import { defineStore } from 'pinia';
    import { usePlausible } from '#plausible';
    import type { Booking } from '~/types';

    export const useBookingsStore = defineStore('bookings', {
      state: () => ({
        bookings: [] as Booking[],
      }),
      actions: {
        async addBooking(booking: Omit<Booking, 'id'>) {
          const plausible = usePlausible();
          const newBooking = await $fetch('/api/bookings', {
            method: 'POST',
            body: booking,
          });
          this.bookings.push(newBooking);
          plausible('Booking Added', { props: { shipId: booking.shipId, totalPrice: booking.totalPrice } });
        },
      },
    });

- **توضیحات**: رویداد `Booking Added` هنگام افزودن رزرو به store ثبت می‌شود.

• ردیابی رفتار کاربران احراز هویت‌شده:

• با استفاده از useAuth، می‌توانید رفتار کاربران واردشده را ردیابی کنید:

    <script setup>
    import { useAuth } from '#auth';
    import { usePlausible } from '#plausible';

    const { data: authData } = useAuth();
    const plausible = usePlausible();

    watch(authData, (newAuthData) => {
      if (newAuthData) {
        plausible('User Session', { props: { userId: newAuthData.user.id } });
      }
    });
    </script>

---

چرا این بخش در ضمیمه‌ها خلاصه بود؟

ضمیمه‌های اولیه فقط به نصب اولیه @nuxtjs/plausible و یک نمونه ردیابی رویداد اشاره کردند و جزئیات زیر را پوشش ندادند:

-ردیابی رویدادهای سفارشی در بخش‌های مختلف اپلیکیشن (مانند کلیک‌ها، رزروها، و ورود).

• تنظیم و استفاده از داشبورد Plausible برای تحلیل داده‌ها.

• ادغام با store و احراز هویت برای تحلیل دقیق‌تر.

---

نکات عملی برای پیاده‌سازی

1. راه‌اندازی Plausible:

2. یک حساب در Plausible.io ایجاد کنید و دامنه اپلیکیشن را ثبت کنید.

3. اگر از Plausible خودهاست‌شده استفاده می‌کنید، apiHost را در nuxt.config.ts به‌روزرسانی کنید.

4. تست ردیابی:

5. با npm run dev، اپلیکیشن را در محیط توسعه اجرا کنید.

6. در کنسول مرورگر یا داشبورد Plausible، بررسی کنید که رویدادها (مانند View Ship Details) به‌درستی ثبت می‌شوند.

7. بهینه‌سازی:

8. برای کاهش بار سرور، فقط رویدادهای مهم (مانند رزروها یا ورود) را ردیابی کنید.

9. از autoPageviews و autoOutboundTracking برای کاهش کد دستی استفاده کنید.

10. گسترش:

11. رویدادهای جدید مانند Search Performed برای جستجوی کشتی‌ها اضافه کنید:

     // stores/ships.ts
     actions: {
       setSearch(query: string) {
         this.search = query;
         usePlausible()('Search Performed', { props: { query } });
       },
     }

• اهداف (Goals) در Plausible برای ردیابی تبدیل‌های کلیدی (مانند رزروها) تنظیم کنید.

---

جمع‌بندی ضمیمه ه

این ضمیمه جزئیات کامل پیاده‌سازی تحلیل داده‌ها با @nuxtjs/plausible را ارائه داد، شامل نصب، ردیابی رویدادهای سفارشی (مانند کلیک‌ها، رزروها، و ورود)، و تنظیم داشبورد Plausible برای تحلیل رفتار کاربران. این ابزار اپلیکیشن را با تحلیل‌های متمرکز بر حریم خصوصی تقویت می‌کند. برای اطلاعات بیشتر، به فصل یازدهم یا مخزن فرضی GitHub (https://github.com/khosronz/cruise-rental-app) مراجعه کنید.