next plausible

next plausible

Código-Fonte de IA

1.0.0

Baixar

Próximo plausível ·

Integração simples para https://nextjs.org e https://plausible.io Analytics.

Veja em ação em https://next-plausible.vercel.app, e esse comprometimento para um exemplo do mundo real.

IMPORTANTE: Se você estiver usando uma versão do próximo mais de 11.1.0 , use next-plausible@2 para evitar erros de verificação do tipo (consulte #25).

Uso

Inclua o script de análise

Para ativar análises plausíveis em seu aplicativo Next.js, você precisará expor o contexto plausível, <PlausibleProvider /> , no nível superior do seu aplicativo dentro _app.js :

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

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

Se você deseja ativar análises plausíveis apenas em uma única página, envolva a página em um componente PlausibleProvider :

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

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

Se estiver usando o diretório de aplicativos, inclua PlausibleProvider dentro do layout da raiz:

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

Adereços `PlausibleProvider`

Nome	Descrição
`domain`	O domínio do site que você deseja monitorar.
`customDomain`	Defina isso se você usar um domínio personalizado para servir o script de análise. Padrões para https://plausible.io. Consulte https://plausible.io/docs/custom-domain para obter mais detalhes.
`trackOutboundLinks`	Defina isso como `true` se desejar ativar o link de saída, clique em rastreamento.
`trackFileDownloads`	Defina isso como `true` se você deseja ativar o rastreamento de download de arquivos.
`taggedEvents`	Defina isso como `true` se você deseja ativar o rastreamento de eventos personalizado nos elementos HTML.
`trackLocalhost`	Defina isso como `true` se você deseja ativar o rastreamento de localhost.
`manualPageviews`	Defina isso como `true` se você deseja desativar eventos automáticos de visualização de página.
`pageviewProps`	Defina as propriedades personalizadas para visualizações de página. O prefixo `event-` será adicionado automaticamente. Veja um exemplo.
`revenue`	Defina isso como `true` se você deseja ativar o rastreamento de receita de comércio eletrônico.
`hash`	Defina isso como `true` se você quiser usar o roteamento baseado em hash.
`exclude`	Defina isso se você deseja excluir um conjunto de páginas do rastreado. Consulte https://plausible.io/docs/excluding-pages para obter mais detalhes.
`selfHosted`	Defina isso como `true` se você estiver auto -hospedando sua instância plausível. Caso contrário, você receberá um 404 ao solicitar o script.
`enabled`	Use isso para decidir explicitamente se deve ou não renderizar script. Se não for aprovado, o script será renderizado em ambientes de produção (verificando o Node_ENV e o vercel_env).
`integrity`	Opcionalmente, defina o atributo de integridade do Sub -Redimento para obter segurança extra.
`scriptProps`	Opcionalmente substitui qualquer um dos adereços passados para o elemento de script. Veja o exemplo.

Proxy O script de análise

Para evitar ser bloqueado por Adblockers Plausible recomenda proxy o script. Para fazer isso, você precisa embrulhar seu next.config.js com a função 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
} )

Isso configurará as reescritas necessárias, conforme descrito aqui e configurará PlausibleProvider para usar os URLs locais para que você possa continuar usando assim:

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

Opcionalmente, você pode substituir o subdiretório e o nome do script proxado, bem como o domínio personalizado para o script original:

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

Isso carregará o script de /yoursubdirectory/js/scriptName.js e buscá -lo em http://example.com/js/script.js .

Notas:

A proxying só funcionará se você servir seu site usando next start . Sites gerados estaticamente não serão capazes de reescrever as solicitações.
Se você for plausível de hospedagem, precisará definir customDomain para sua instância, caso contrário, nenhum dados será enviado.

Lembre -se de que as solicitações de rastreamento serão feitas para o mesmo domínio, para que os cookies sejam encaminhados. Veja #67. Se este é um problema para você, de [email protected] , você pode usar o Middleware para retirar os cookies como este:

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

Envie eventos personalizados

A Plausible suporta eventos personalizados, conforme descrito em https://plausible.io/docs/custom-event-goals. Este pacote fornece o gancho usePlausible para acessar com segurança a função plausible como esta:

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

Se você usar o TypeScript, pode digitar seus eventos personalizados como este:

 import { usePlausible } from 'next-plausible'

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

const plausible = usePlausible < MyEvents > ( )