Download next plausible - unduhan kode sumber next plausible

next plausible

Kode Sumber AI

1.0.0

Unduh

·

Integrasi Sederhana untuk https://nextjs.org dan https://plauSible.io Analytics.

Lihat itu beraksi di https://next-plauSible.vercel.app, dan komit ini untuk contoh dunia nyata.

PENTING: Jika Anda menggunakan versi lebih rendah berikutnya dari 11.1.0 silakan gunakan next-plausible@2 untuk menghindari kesalahan pemeriksaan jenis (lihat #25).

Penggunaan

Sertakan skrip analitik

Untuk mengaktifkan analitik yang masuk akal di aplikasi selanjutnya.js Anda, Anda akan perlu mengekspos konteks yang masuk akal, <PlausibleProvider /> , di tingkat atas aplikasi Anda di dalam _app.js :

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

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

Jika Anda ingin mengaktifkan analitik yang masuk akal hanya pada satu halaman, Anda dapat membungkus halaman dalam komponen PlausibleProvider :

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

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

Jika menggunakan direktori aplikasi termasuk PlausibleProvider di dalam tata letak root:

 // 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 >
  )
}

Alat peraga `PlausibleProvider`

Nama	Keterangan
`domain`	Domain situs yang ingin Anda pantau.
`customDomain`	Atur ini jika Anda menggunakan domain khusus untuk melayani skrip analitik. Default ke https://plaSible.io. Lihat https://plaSible.io/docs/custom-domain untuk lebih jelasnya.
`trackOutboundLinks`	Atur ini ke `true` jika Anda ingin mengaktifkan tautan keluar klik pelacakan.
`trackFileDownloads`	Atur ini ke `true` jika Anda ingin mengaktifkan pelacakan unduhan file.
`taggedEvents`	Tetapkan ini ke `true` jika Anda ingin mengaktifkan pelacakan acara khusus di elemen HTML.
`trackLocalhost`	Tetapkan ini ke `true` jika Anda ingin mengaktifkan pelacakan localhost.
`manualPageviews`	Atur ini ke `true` jika Anda ingin menonaktifkan acara pageView otomatis.
`pageviewProps`	Atur Properti Kustom untuk PageViews. `event-` awalan akan ditambahkan secara otomatis. Lihat contoh.
`revenue`	Tetapkan ini ke `true` jika Anda ingin mengaktifkan pelacakan pendapatan eCommerce.
`hash`	Tetapkan ini ke `true` jika Anda ingin menggunakan perutean berbasis hash.
`exclude`	Atur ini jika Anda ingin mengecualikan satu set halaman agar tidak dilacak. Lihat https://plaSible.io/docs/excluding-pages untuk lebih jelasnya.
`selfHosted`	Atur ini ke `true` jika Anda menampung sendiri contoh yang masuk akal. Kalau tidak, Anda akan mendapatkan 404 saat meminta skrip.
`enabled`	Gunakan ini untuk secara eksplisit memutuskan apakah akan membuat skrip atau tidak. Jika tidak lulus skrip akan diterjemahkan di lingkungan produksi (memeriksa node_env dan vercel_env).
`integrity`	Secara opsional mendefinisikan atribut integritas SubResource untuk keamanan ekstra.
`scriptProps`	Secara opsional mengesampingkan salah satu alat peraga yang diteruskan ke elemen skrip. Lihat contoh.

Proxy skrip analitik

Untuk menghindari diblokir oleh Adblockers yang masuk akal merekomendasikan proksi skrip. Untuk melakukan ini withPlausibleProxy next.config.js :

 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
} )

Ini akan mengatur penulisan ulang yang diperlukan seperti yang dijelaskan di sini dan mengkonfigurasi PlausibleProvider untuk menggunakan URL lokal sehingga Anda dapat terus menggunakannya seperti ini:

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

Secara opsional Anda dapat menimpa subdirektori dan nama skrip proksi, serta domain khusus untuk skrip asli:

 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
} )

Ini akan memuat skrip dari /yoursubdirectory/js/scriptName.js dan mengambilnya dari http://example.com/js/script.js .

Catatan:

Proxy hanya akan berfungsi jika Anda melayani situs Anda menggunakan next start . Situs yang dihasilkan secara statis tidak akan dapat menulis ulang permintaan.
Jika Anda hosting sendiri masuk akal, Anda perlu mengatur customDomain ke instance Anda jika tidak, tidak ada data yang akan dikirim.

Ingatlah bahwa permintaan pelacakan akan dibuat ke domain yang sama, sehingga cookie akan diteruskan. Lihat #67. Jika ini adalah masalah untuk Anda, dari [email protected] Anda dapat menggunakan middleware untuk melepaskan cookie seperti ini:

 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' ,
}

Kirim acara khusus

PlaSible mendukung acara kustom seperti yang dijelaskan di https://plauble.io/docs/custom-event-goals. Paket ini menyediakan kait usePlausible untuk mengakses fungsi plausible seperti ini:

 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 >
    </ >
  )
}

Jika Anda menggunakan TypeScript, Anda dapat mengetik periksa acara khusus Anda seperti ini:

 import { usePlausible } from 'next-plausible'

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

const plausible = usePlausible < MyEvents > ( )