التنزيل next plausible - تنزيل رمز المصدر next plausible

next plausible

كود الذكاء الاصطناعي

1.0.0

تنزيل

المقبل القابل للبلاط ·

تكامل بسيط لـ https://nextjs.org و https://plaedible.io analytics.

شاهدها في العمل على https://next-plaable.vercel.app ، وهذا الالتزام بمثال حقيقي.

هام: إذا كنت تستخدم إصدارًا من التالي أقل من 11.1.0 فيرجى استخدام next-plausible@2 لتجنب أخطاء فحص النوع (انظر #25).

الاستخدام

قم بتضمين البرنامج النصي التحليلي

لتمكين التحليلات المعقولة في تطبيق Next.js الخاص بك ، ستحتاج إلى فضح السياق المعقول ، <PlausibleProvider /> ، في المستوى العلوي من تطبيقك داخل _app.js :

 // pages/_app.js
import PlausibleProvider from 'next-plausible'

export default function MyApp ( { Component , pageProps } ) {
  return (
    < PlausibleProvider domain = "example.com" >
      < Component { ... pageProps } />
    </ PlausibleProvider >
  )
}

إذا كنت ترغب في تمكين التحليلات المعقولة فقط على صفحة واحدة ، فيمكنك لف الصفحة في مكون PlausibleProvider :

 // pages/home.js
import PlausibleProvider from 'next-plausible'

export default Home ( ) {
  return (
    < PlausibleProvider domain = "example.com" >
      < h1 > My Site </ h1 >
      { /* ... */ }
    </ PlausibleProvider >
  )
}

إذا كانت تستخدم دليل التطبيق ، فاحصل على PlausibleProvider داخل تخطيط الجذر:

 // app/layout.js
import PlausibleProvider from 'next-plausible'

export default function RootLayout ( { children } ) {
  return (
    < html >
      < head >
        < PlausibleProvider domain = "example.com" />
      </ head >
      < body > { children } </ body >
    </ html >
  )
}

الدعائم `PlausibleProvider`

اسم	وصف
`domain`	مجال الموقع الذي تريد مراقبته.
`customDomain`	اضبط هذا إذا كنت تستخدم مجالًا مخصصًا لخدمة البرنامج النصي التحليلي. الإعدادات الافتراضية إلى https://plaedible.io. انظر https://plaedible.io/docs/custom-domain لمزيد من التفاصيل.
`trackOutboundLinks`	اضبط هذا على `true` إذا كنت ترغب في تمكين الرابط الخارجي انقر فوق تتبع.
`trackFileDownloads`	اضبط هذا على `true` إذا كنت ترغب في تمكين تتبع تنزيل الملف.
`taggedEvents`	اضبط هذا على `true` إذا كنت ترغب في تمكين تتبع الأحداث المخصص في عناصر HTML.
`trackLocalhost`	اضبط هذا على `true` إذا كنت ترغب في تمكين تتبع المضيف المحلي.
`manualPageviews`	اضبط هذا على `true` إذا كنت ترغب في تعطيل أحداث عرض الصفحة التلقائي.
`pageviewProps`	قم بتعيين الخصائص المخصصة لمشاهدات الصفحة. سيتم إضافة بادئة `event-` تلقائيًا. انظر مثال.
`revenue`	اضبط هذا على `true` إذا كنت ترغب في تمكين تتبع إيرادات التجارة الإلكترونية.
`hash`	اضبط هذا على `true` إذا كنت تريد استخدام التوجيه المستند إلى التجزئة.
`exclude`	اضبط هذا إذا كنت ترغب في استبعاد مجموعة من الصفحات. انظر https://plaedible.io/docs/excluding-fages لمزيد من التفاصيل.
`selfHosted`	اضبط هذا على `true` إذا كنت تستضيف مثيلك المعقول. وإلا ستحصل على 404 عند طلب البرنامج النصي.
`enabled`	استخدم هذا لتحديد ما إذا كان سيتم تقديم البرنامج النصي بشكل صريح أم لا. إذا لم يتم تمريره ، فسيتم تقديم البرنامج النصي في بيئات الإنتاج (التحقق من Node_env و Vercel_env).
`integrity`	حدد اختياريا سمة سلامة subresource لأمان إضافي.
`scriptProps`	تجاوز أي من الدعائم اختياريا إلى عنصر البرنامج النصي. انظر المثال.

بروكسي السيناريو التحليلي

لتجنب أن يتم حظره بواسطة AdBlockers ، يوصي Adblockerseable بتكييف البرنامج النصي. للقيام بذلك ، تحتاج إلى التفاف next.config.js withPlausibleProxy

 const { withPlausibleProxy } = require ( 'next-plausible' )

module . exports = withPlausibleProxy ( ) ( {
  // ...your next js config, if any
  // Important! it is mandatory to pass a config object, even if empty
} )

سيقوم هذا بإعداد إعادة الكتابة الضرورية كما هو موضح هنا وتكوين PlausibleProvider لاستخدام عناوين URL المحلية حتى تتمكن من الاستمرار في استخدامها على هذا النحو:

  < PlausibleProvider domain = "example.com" >
    ...
  </ PlausibleProvider >
}

اختياريًا ، يمكنك الكتابة فوق الدليل والاسم الفرعي للبرنامج النصي والاسم ، بالإضافة إلى المجال المخصص للنص الأصلي:

 const { withPlausibleProxy } = require ( 'next-plausible' )

module . exports = withPlausibleProxy ( {
  subdirectory : 'yoursubdirectory' ,
  scriptName : 'scriptName' ,
  customDomain : 'http://example.com' ,
} ) ( {
  // ...your next js config, if any
  // Important! it is mandatory to pass a config object, even if empty
} )

سيؤدي ذلك إلى تحميل البرنامج النصي من /yoursubdirectory/js/scriptName.js scriptname.js وجلبه من http://example.com/js/script.js .

ملحوظات:

ستعمل Proxying فقط إذا كنت تخدم موقعك باستخدام next start . لن تتمكن المواقع التي تم إنشاؤها بشكل ثابت من إعادة كتابة الطلبات.
إذا كنت تستضيف ذاتيًا معقولًا ، فأنت بحاجة إلى تعيين customDomain على مثيلك وإلا فلن يتم إرسال أي بيانات.

ضع في اعتبارك أنه سيتم تقديم طلبات التتبع إلى نفس المجال ، لذلك سيتم إرسال ملفات تعريف الارتباط. انظر #67. إذا كانت هذه مشكلة بالنسبة لك ، من [email protected] ، يمكنك استخدام الوسيطة لتجريد ملفات تعريف الارتباط مثل هذا:

 import { NextResponse } from 'next/server'

export function middleware ( request ) {
  const requestHeaders = new Headers ( request . headers )
  requestHeaders . set ( 'cookie' , '' )
  return NextResponse . next ( {
    request : {
      headers : requestHeaders ,
    } ,
  } )
}

export const config = {
  matcher : '/proxy/api/event' ,
}

إرسال الأحداث المخصصة

يدعم المعقول الأحداث المخصصة كما هو موضح في https://plaable.io/docs/custom-event-goals. توفر هذه الحزمة الخطاف usePlausible للوصول إلى الوظيفة plausible بأمان مثل هذا:

 import { usePlausible } from 'next-plausible'

export default function PlausibleButton ( ) {
  const plausible = usePlausible ( )

  return (
    < >
      < button onClick = { ( ) => plausible ( 'customEventName' ) } > Send </ button >

      < button
        id = "foo"
        onClick = { ( ) =>
          plausible ( 'customEventName' , {
            props : {
              buttonId : 'foo' ,
            } ,
          } )
        }
      >
        Send with props
      </ button >
    </ >
  )
}

إذا كنت تستخدم TypeScript ، فيمكنك كتابة التحقق من الأحداث المخصصة مثل هذا:

 import { usePlausible } from 'next-plausible'

type MyEvents = {
  event1 : { prop1 : string }
  event2 : { prop2 : string }
  event3 : never
}

const plausible = usePlausible < MyEvents > ( )