نگاهی به پیاده سازی تجزیه و تحلیل PostHog در ابزار هوش مصنوعی Next.js – شروع سفر تجزیه و تحلیل
Summarize this content to 400 words in Persian Lang
همانطور که به ساختن مولد توضیحات محصول هوش مصنوعی خود ادامه می دهم، متوجه شدم که باید بفهمم مردم واقعاً چگونه از این ابزار استفاده می کنند. پس از بررسی گزینه‌های مختلف، تصمیم گرفتم تجزیه و تحلیل PostHog را برای ردیابی رفتار کاربر و بهبودهای مبتنی بر داده اضافه کنم.
چرا PostHog؟
هنگام انتخاب یک راه حل تحلیلی، چندین عامل باعث برجسته شدن PostHog شد:
منبع باز: کل پلتفرم منبع باز است که با ارزش های توسعه من مطابقت دارد
Developer-First: به طور خاص با در نظر گرفتن توسعه دهندگان ساخته شده است
ادغام Next.js: اسناد و مدارک تمیز و راه اندازی آسان با پشته فناوری من
Session Recordings: توانایی مشاهده نحوه تعامل کاربران با UI
خود میزبان: گزینه ای برای میزبانی خود در آینده در صورت نیاز
راه اندازی PostHog در Next.js
فرآیند راه اندازی ساده بود. در اینجا نحوه اضافه کردن PostHog به پروژه خود آمده است:
ابتدا بسته PostHog را نصب کنید:
npm install –save posthog-js
# or
yarn add posthog-js
# or
pnpm add posthog-js
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
متغیرهای محیط خود را به آن اضافه کنید .env.local:
NEXT_PUBLIC_POSTHOG_KEY=your-project-key
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
این متغیرها باید از ابتدا شروع شوند NEXT_PUBLIC_ در سمت مشتری قابل دسترسی باشد.
برای برنامه Next.js خود با استفاده از روتر برنامه، دو فایل کلیدی ایجاد کردم:
ابتدا یک فایل ارائه دهنده برای مقداردهی اولیه PostHog:
// app/providers.tsx
‘use client’
import posthog from ‘posthog-js’
import { PostHogProvider } from ‘posthog-js/react’
import { useEffect } from ‘react’
const PostHogPageView = dynamic(() => import(‘./PostHogPageView’), {
ssr: false,
})
export function PHProvider({
children,
}: {
children: React.ReactNode
}) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: “/ingest”,
ui_host: “https://eu.posthog.com”,
person_profiles: ‘identified_only’,
capture_pageview: false,
capture_pageleave: true
})
}, []);
return (
<PostHogProvider client={posthog}>
<PostHogPageView/>
{children}
</PostHogProvider>
)
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
توجه: ما از Import پویا برای PostHogPageView استفاده می کنیم زیرا حاوی قلاب useSearchParams است که در غیر این صورت کل برنامه را مجبور به رندر سمت کلاینت می کند.
سپس، یک مؤلفه برای ردیابی مشاهده صفحه (از آنجایی که Next.js یک برنامه تک صفحه ای است):
// app/PostHogPageView.tsx
‘use client’
import { usePathname, useSearchParams } from “next/navigation”
import { useEffect } from “react”
import { usePostHog } from ‘posthog-js/react’
export default function PostHogPageView(): null {
const pathname = usePathname()
const searchParams = useSearchParams()
const posthog = usePostHog()
useEffect(() => {
if (pathname && posthog) {
let url = window.origin + pathname
if (searchParams.toString()) {
url = url + `?${searchParams.toString()}`
}
posthog.capture(
‘$pageview’,
{
‘$current_url’: url,
}
)
}
}, [pathname, searchParams, posthog])
return null
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
در نهایت، من این مؤلفه ها را در طرح اصلی خود ادغام کردم:
// app/layout.tsx
import ‘./globals.css’
import { PHProvider } from ‘./providers’
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang=”en”>
<PHProvider>
<body>
<PostHogPageView />
{children}
</body>
</PHProvider>
</html>
)
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
راه اندازی یک پروکسی معکوس
برای بهبود حریم خصوصی و جلوگیری از مسدودکننده‌های تبلیغاتی، یک پروکسی معکوس نیز با استفاده از بازنویسی‌های Next.js تنظیم کردم. در اینجا چگونه است:
ابتدا پیکربندی پروکسی را به آن اضافه کردم next.config.js:
// next.config.js
const nextConfig = {
async rewrites() {
return [
{
source: “/ingest/static/:path*”,
destination: “https://us-assets.i.posthog.com/static/:path*”,
},
{
source: “/ingest/:path*”,
destination: “https://us.i.posthog.com/:path*”,
},
{
source: “/ingest/decide”,
destination: “https://us.i.posthog.com/decide”,
},
];
},
// Required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
}
module.exports = nextConfig
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
سپس، مقداردهی اولیه PostHog را برای استفاده از پروکسی به روز کردم:
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: “/ingest”,
ui_host: ‘https://eu.posthog.com’ // Adjust if you’re using EU cloud
// … other options
})
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
توجه: اگر از ابر EU PostHog (مانند من) استفاده می کنید، جایگزین کنید us با eu در تمام حوزه ها در next.config.js فایل
چیزی که من قصد ردیابی آن را دارم
من با رویدادهای اساسی برای درک رفتار کاربر شروع می کنم:
اقدامات اصلی کاربر:
// Track when users attempt to generate descriptions
function handleGenerate() {
posthog.capture(‘generate_description’, {
productType: product.type,
inputLength: product.input.length
})
}
// Track successful generations
function onGenerationSuccess(result) {
posthog.capture(‘generation_success’, {
responseLength: result.length,
timeToGenerate: performance.now() – startTime
})
}
// Track errors
function onGenerationError(error) {
posthog.capture(‘generation_error’, {
errorType: error.type,
errorMessage: error.message
})
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
رویدادهای جریان کاربر:
// Track form interactions
function trackFormInteraction(fieldName: string, action: string) {
posthog.capture(‘form_interaction’, {
field: fieldName,
action: action // focus, blur, change, etc.
})
}
وارد حالت تمام صفحه شوید
از حالت تمام صفحه خارج شوید
سوالاتی که می خواهم به آنها پاسخ دهم
با پیاده سازی تجزیه و تحلیل، من امیدوار هستم که بفهمم:
رفتار کاربر
کاربران معمولاً چند توصیف ایجاد می کنند؟
چه نوع محصولاتی را توصیف می کنند؟
کاربران کجا در فرآیند گیر می کنند؟
معیارهای عملکرد
نسل ها معمولا چقدر طول می کشند؟
آیا الگوهای خطای رایجی وجود دارد؟
میزان موفقیت نسل ها چقدر است؟
الگوهای استفاده
چه زمان هایی بیشتر فعال هستند؟
کدام ویژگی بیشتر مورد استفاده قرار می گیرد؟
آیا کاربران برای چندین جلسه برمی گردند؟
مراحل بعدی
اکنون که تنظیمات اولیه کامل شده است، مراحل بعدی من عبارتند از:
ایجاد قیف
سفر کامل کاربر را دنبال کنید
نقاط سقوط را شناسایی کنید
اندازه گیری نرخ تبدیل
تست A/B را تنظیم کنید
طرح بندی های مختلف رابط کاربری را آزمایش کنید
با فیلدهای فرم آزمایش کنید
اعلان های مختلف نسل را امتحان کنید
نظارت بر عملکرد
زمان بارگذاری را پیگیری کنید
زمان پاسخگویی API را اندازه گیری کنید
تنگناها را شناسایی کنید
یادگیری به صورت عمومی
این تازه شروع سفر تحلیلی من است. وقتی اطلاعات واقعی کاربر را جمع‌آوری می‌کنم و بر اساس این بینش‌ها بهبود می‌دهم، آنچه را که یاد می‌گیرم به اشتراک می‌گذارم.
چند سوال که کنجکاو هستم:
چه معیارهایی را در پروژه های خود دنبال می کنید؟
چگونه حریم خصوصی را با جمع آوری داده ها متعادل می کنید؟
کدام بینش تحلیلی شما را بیشتر متعجب کرده است؟
من دوست دارم در مورد تجربیات شما در مورد تجزیه و تحلیل و هر پیشنهادی برای آنچه که باید دنبال کنم بشنوم. نظرات خود را در نظرات بیان کنید!
سفر من را دنبال کنید:
بیایید با هم یاد بگیریم و بسازیم! 🚀
همانطور که به ساختن مولد توضیحات محصول هوش مصنوعی خود ادامه می دهم، متوجه شدم که باید بفهمم مردم واقعاً چگونه از این ابزار استفاده می کنند. پس از بررسی گزینه‌های مختلف، تصمیم گرفتم تجزیه و تحلیل PostHog را برای ردیابی رفتار کاربر و بهبودهای مبتنی بر داده اضافه کنم.
چرا PostHog؟
هنگام انتخاب یک راه حل تحلیلی، چندین عامل باعث برجسته شدن PostHog شد:
- منبع باز: کل پلتفرم منبع باز است که با ارزش های توسعه من مطابقت دارد
- Developer-First: به طور خاص با در نظر گرفتن توسعه دهندگان ساخته شده است
- ادغام Next.js: اسناد و مدارک تمیز و راه اندازی آسان با پشته فناوری من
- Session Recordings: توانایی مشاهده نحوه تعامل کاربران با UI
- خود میزبان: گزینه ای برای میزبانی خود در آینده در صورت نیاز
راه اندازی PostHog در Next.js
فرآیند راه اندازی ساده بود. در اینجا نحوه اضافه کردن PostHog به پروژه خود آمده است:
- ابتدا بسته PostHog را نصب کنید:
npm install --save posthog-js
# or
yarn add posthog-js
# or
pnpm add posthog-js
- متغیرهای محیط خود را به آن اضافه کنید
.env.local:
NEXT_PUBLIC_POSTHOG_KEY=your-project-key
NEXT_PUBLIC_POSTHOG_HOST=https://eu.i.posthog.com
این متغیرها باید از ابتدا شروع شوند NEXT_PUBLIC_ در سمت مشتری قابل دسترسی باشد.
- برای برنامه Next.js خود با استفاده از روتر برنامه، دو فایل کلیدی ایجاد کردم:
ابتدا یک فایل ارائه دهنده برای مقداردهی اولیه PostHog:
// app/providers.tsx
'use client'
import posthog from 'posthog-js'
import { PostHogProvider } from 'posthog-js/react'
import { useEffect } from 'react'
const PostHogPageView = dynamic(() => import('./PostHogPageView'), {
ssr: false,
})
export function PHProvider({
children,
}: {
children: React.ReactNode
}) {
useEffect(() => {
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: "/ingest",
ui_host: "https://eu.posthog.com",
person_profiles: 'identified_only',
capture_pageview: false,
capture_pageleave: true
})
}, []);
return (
<PostHogProvider client={posthog}>
<PostHogPageView/>
{children}
</PostHogProvider>
)
}
توجه: ما از Import پویا برای PostHogPageView استفاده می کنیم زیرا حاوی قلاب useSearchParams است که در غیر این صورت کل برنامه را مجبور به رندر سمت کلاینت می کند.
سپس، یک مؤلفه برای ردیابی مشاهده صفحه (از آنجایی که Next.js یک برنامه تک صفحه ای است):
// app/PostHogPageView.tsx
'use client'
import { usePathname, useSearchParams } from "next/navigation"
import { useEffect } from "react"
import { usePostHog } from 'posthog-js/react'
export default function PostHogPageView(): null {
const pathname = usePathname()
const searchParams = useSearchParams()
const posthog = usePostHog()
useEffect(() => {
if (pathname && posthog) {
let url = window.origin + pathname
if (searchParams.toString()) {
url = url + `?${searchParams.toString()}`
}
posthog.capture(
'$pageview',
{
'$current_url': url,
}
)
}
}, [pathname, searchParams, posthog])
return null
}
در نهایت، من این مؤلفه ها را در طرح اصلی خود ادغام کردم:
// app/layout.tsx
import './globals.css'
import { PHProvider } from './providers'
export default function RootLayout({
children,
}: {
children: React.ReactNode
}) {
return (
<html lang="en">
<PHProvider>
<body>
<PostHogPageView />
{children}
</body>
</PHProvider>
</html>
)
}
راه اندازی یک پروکسی معکوس
برای بهبود حریم خصوصی و جلوگیری از مسدودکننده‌های تبلیغاتی، یک پروکسی معکوس نیز با استفاده از بازنویسی‌های Next.js تنظیم کردم. در اینجا چگونه است:
- ابتدا پیکربندی پروکسی را به آن اضافه کردم
next.config.js:
// next.config.js
const nextConfig = {
async rewrites() {
return [
{
source: "/ingest/static/:path*",
destination: "https://us-assets.i.posthog.com/static/:path*",
},
{
source: "/ingest/:path*",
destination: "https://us.i.posthog.com/:path*",
},
{
source: "/ingest/decide",
destination: "https://us.i.posthog.com/decide",
},
];
},
// Required to support PostHog trailing slash API requests
skipTrailingSlashRedirect: true,
}
module.exports = nextConfig
- سپس، مقداردهی اولیه PostHog را برای استفاده از پروکسی به روز کردم:
posthog.init(process.env.NEXT_PUBLIC_POSTHOG_KEY!, {
api_host: "/ingest",
ui_host: 'https://eu.posthog.com' // Adjust if you're using EU cloud
// ... other options
})
توجه: اگر از ابر EU PostHog (مانند من) استفاده می کنید، جایگزین کنید us با eu در تمام حوزه ها در next.config.js فایل
چیزی که من قصد ردیابی آن را دارم
من با رویدادهای اساسی برای درک رفتار کاربر شروع می کنم:
- اقدامات اصلی کاربر:
// Track when users attempt to generate descriptions
function handleGenerate() {
posthog.capture('generate_description', {
productType: product.type,
inputLength: product.input.length
})
}
// Track successful generations
function onGenerationSuccess(result) {
posthog.capture('generation_success', {
responseLength: result.length,
timeToGenerate: performance.now() - startTime
})
}
// Track errors
function onGenerationError(error) {
posthog.capture('generation_error', {
errorType: error.type,
errorMessage: error.message
})
}
- رویدادهای جریان کاربر:
// Track form interactions
function trackFormInteraction(fieldName: string, action: string) {
posthog.capture('form_interaction', {
field: fieldName,
action: action // focus, blur, change, etc.
})
}
سوالاتی که می خواهم به آنها پاسخ دهم
با پیاده سازی تجزیه و تحلیل، من امیدوار هستم که بفهمم:
- رفتار کاربر
- کاربران معمولاً چند توصیف ایجاد می کنند؟
- چه نوع محصولاتی را توصیف می کنند؟
-
کاربران کجا در فرآیند گیر می کنند؟
-
معیارهای عملکرد
-
نسل ها معمولا چقدر طول می کشند؟
-
آیا الگوهای خطای رایجی وجود دارد؟
-
میزان موفقیت نسل ها چقدر است؟
-
الگوهای استفاده
-
چه زمان هایی بیشتر فعال هستند؟
-
کدام ویژگی بیشتر مورد استفاده قرار می گیرد؟
-
آیا کاربران برای چندین جلسه برمی گردند؟
مراحل بعدی
اکنون که تنظیمات اولیه کامل شده است، مراحل بعدی من عبارتند از:
- ایجاد قیف
- سفر کامل کاربر را دنبال کنید
- نقاط سقوط را شناسایی کنید
-
اندازه گیری نرخ تبدیل
-
تست A/B را تنظیم کنید
-
طرح بندی های مختلف رابط کاربری را آزمایش کنید
-
با فیلدهای فرم آزمایش کنید
-
اعلان های مختلف نسل را امتحان کنید
-
نظارت بر عملکرد
-
زمان بارگذاری را پیگیری کنید
-
زمان پاسخگویی API را اندازه گیری کنید
-
تنگناها را شناسایی کنید
یادگیری به صورت عمومی
این تازه شروع سفر تحلیلی من است. وقتی اطلاعات واقعی کاربر را جمع‌آوری می‌کنم و بر اساس این بینش‌ها بهبود می‌دهم، آنچه را که یاد می‌گیرم به اشتراک می‌گذارم.
چند سوال که کنجکاو هستم:
- چه معیارهایی را در پروژه های خود دنبال می کنید؟
- چگونه حریم خصوصی را با جمع آوری داده ها متعادل می کنید؟
- کدام بینش تحلیلی شما را بیشتر متعجب کرده است؟
من دوست دارم در مورد تجربیات شما در مورد تجزیه و تحلیل و هر پیشنهادی برای آنچه که باید دنبال کنم بشنوم. نظرات خود را در نظرات بیان کنید!
سفر من را دنبال کنید:
بیایید با هم یاد بگیریم و بسازیم! 🚀
