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 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设置为实例，否则不会发送数据。

请记住，跟踪请求将被对同一域提出，因此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 > ( )