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）。

用法

包括分析腳本

要在您的下一個應用程序_app.js啟用合理的分析<PlausibleProvider />

 // 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`	如果要在HTML元素中啟用自定義事件跟踪，請將其設置為`true` 。
`trackLocalhost`	如果您想啟用Local -Host跟踪，則將其設置為`true` 。
`manualPageviews`	如果要禁用自動瀏覽量事件，請將其設置為`true` 。
`pageviewProps`	設置pageViews的自定義屬性。 `event-` - 前綴將自動添加。見一個示例。
`revenue`	如果您想啟用電子商務收入跟踪，請將其設置為`true` 。
`hash`	如果要使用基於哈希的路由，請將其設置為`true` 。
`exclude`	如果您想將一組頁排除在跟踪中，請設置此問題。有關更多詳細信息，請參見https://plausible.io/docs/excluding-pages。
`selfHosted`	如果您自行託管合理的實例，則將其設置為`true` 。否則，請求腳本時將獲得404。
`enabled`	用它明確決定是否呈現腳本。如果不通過，則腳本將在生產環境中渲染（檢查Node_env和vercel_env）。
`integrity`	可選定義子資源完整性屬性以獲得額外的安全性。
`scriptProps`	可選地覆蓋任何傳遞給腳本元素的道具。請參見示例。

代理分析腳本

為了避免被Adblockers封鎖，合理的建議建議代表腳本。 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
} )

這將如下所述設置必要的重寫並配置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設置為實例，否則不會發送數據。

請記住，跟踪請求將被對同一域提出，因此Cookie將被轉發。參見＃67。如果這對您來說是一個問題，則可以從[email protected]使用中間件來剝離這樣的cookie：

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