ดาวน์โหลด next plausible - ดาวน์โหลดซอร์สโค้ด next plausible

next plausible

โค้ดแหล่งที่มา AI

1.0.0

ดาวน์โหลด

ถัดไปเป็นไปได้·

การรวมกันอย่างง่ายสำหรับ https://nextjs.org และ https://plausible.io Analytics

ดูการดำเนินการที่ https://next-plausible.vercel.app และนี่เป็นตัวอย่างของโลกแห่งความเป็นจริง

สำคัญ: หากคุณใช้เวอร์ชันของต่ำกว่า 11.1.0 ถัดไปโปรดใช้ next-plausible@2 เพื่อหลีกเลี่ยงข้อผิดพลาดในการตรวจสอบประเภท (ดู #25)

การใช้งาน

รวมสคริปต์การวิเคราะห์

ในการเปิดใช้งานการวิเคราะห์ที่เป็นไปได้ในแอพถัดไปของคุณคุณจะต้องเปิดเผยบริบทที่เป็นไปได้ <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://plausible.io ดู https://plausible.io/docs/custom-domain สำหรับรายละเอียดเพิ่มเติม
`trackOutboundLinks`	ตั้งค่านี้เป็น `true` หากคุณต้องการเปิดใช้งานการคลิกลิงก์ขาออก
`trackFileDownloads`	ตั้งค่าเป็น `true` หากคุณต้องการเปิดใช้งานการติดตามการดาวน์โหลดไฟล์
`taggedEvents`	ตั้งค่านี้เป็น `true` หากคุณต้องการเปิดใช้งานการติดตามเหตุการณ์ที่กำหนดเองในองค์ประกอบ HTML
`trackLocalhost`	ตั้งค่านี้เป็น `true` หากคุณต้องการเปิดใช้งานการติดตาม LocalHost
`manualPageviews`	ตั้งค่านี้เป็น `true` หากคุณต้องการปิดการใช้งานกิจกรรมการชมอัตโนมัติ
`pageviewProps`	ตั้งค่าคุณสมบัติที่กำหนดเองสำหรับการดูหน้าเว็บ คำนำหน้า `event-` จะถูกเพิ่มโดยอัตโนมัติ ดูตัวอย่าง
`revenue`	ตั้งค่านี้เป็น `true` หากคุณต้องการเปิดใช้งานการติดตามรายได้อีคอมเมิร์ซ
`hash`	ตั้งค่านี้เป็น `true` หากคุณต้องการใช้การกำหนดเส้นทางที่ใช้แฮช
`exclude`	ตั้งค่านี้หากคุณต้องการยกเว้นชุดหน้าจากการถูกติดตาม ดู https://plausible.io/docs/excluding-pages สำหรับรายละเอียดเพิ่มเติม
`selfHosted`	ตั้งค่าสิ่งนี้ให้เป็น `true` หากคุณกำลังโฮสต์อินสแตนซ์ที่เป็นไปได้ของคุณเอง มิฉะนั้นคุณจะได้รับ 404 เมื่อขอสคริปต์
`enabled`	ใช้สิ่งนี้เพื่อตัดสินใจอย่างชัดเจนว่าจะแสดงสคริปต์หรือไม่ หากไม่ผ่านสคริปต์จะแสดงผลในสภาพแวดล้อมการผลิต (ตรวจสอบ node_env และ vercel_env)
`integrity`	เป็นทางเลือกกำหนดแอตทริบิวต์ Subresource Integrity เพื่อความปลอดภัยเป็นพิเศษ
`scriptProps`	เลือกแทนที่อุปกรณ์ประกอบฉากใด ๆ ที่ส่งผ่านไปยังองค์ประกอบสคริปต์ ดูตัวอย่าง

พร็อกซีสคริปต์การวิเคราะห์

เพื่อหลีกเลี่ยงการถูกบล็อกโดย Adblockers น่าเชื่อถือแนะนำให้พร็อกซ์สคริปต์ ในการทำเช่นนี้คุณต้องห่อ 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 และดึงข้อมูลจาก http://example.com/js/script.js

หมายเหตุ:

พร็อกซ์จะทำงานได้ก็ต่อเมื่อคุณให้บริการเว็บไซต์ของคุณโดยใช้ 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://plausible.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 > ( )