next plausible

next plausible

Código Fuente de IA

1.0.0

Descargar

Next-Plausible ·

Integración simple para https://nextjs.org y https://plausible.io Analytics.

Véalo en acción en https://next-plausible.vercel.app, y este se compromete para un ejemplo del mundo real.

IMPORTANTE: Si está utilizando una versión de la siguiente inferior a 11.1.0 use next-plausible@2 para evitar errores de verificación de tipo (consulte el #25).

Uso

Incluir el script de análisis

Para habilitar analíticos plausibles en su aplicación Next.js deberá exponer el contexto plausible, <PlausibleProvider /> , en el nivel superior de su aplicación dentro de _app.js :

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

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

Si desea habilitar el análisis plausible solo en una sola página, puede envolver la página en un componente PlausibleProvider :

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

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

Si están utilizando el directorio de aplicaciones, incluye PlausibleProvider dentro del diseño de la raíz:

 // 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` Props

Nombre	Descripción
`domain`	El dominio del sitio que desea monitorear.
`customDomain`	Establezca esto si utiliza un dominio personalizado para servir el script de análisis. El valor predeterminado es https://plausible.io. Ver https://plausible.io/docs/custom-domain para obtener más detalles.
`trackOutboundLinks`	Establezca esto en `true` si desea habilitar el enlace de salida, haga clic en el seguimiento.
`trackFileDownloads`	Establezca esto en `true` si desea habilitar el seguimiento de descarga de archivos.
`taggedEvents`	Establezca esto en `true` si desea habilitar el seguimiento de eventos personalizados en elementos HTML.
`trackLocalhost`	Establezca esto en `true` si desea habilitar el seguimiento de LocalHost.
`manualPageviews`	Establezca esto en `true` si desea deshabilitar los eventos automáticos de PageView.
`pageviewProps`	Establezca las propiedades personalizadas para PageViews. El prefijo `event-` se agregará automáticamente. Ver un ejemplo.
`revenue`	Establezca esto en `true` si desea habilitar el seguimiento de ingresos de comercio electrónico.
`hash`	Establezca esto en `true` si desea usar el enrutamiento basado en hash.
`exclude`	Establezca esto si desea excluir un conjunto de páginas de ser rastreadas. Consulte https://plausible.io/docs/excluding-pages para más detalles.
`selfHosted`	Establezca esto en `true` si está alojando su instancia plausible. De lo contrario, obtendrá un 404 al solicitar el script.
`enabled`	Use esto para decidir explícitamente si el script o no. Si no se pasa, el script se representará en entornos de producción (verificar Node_env y Vercel_env).
`integrity`	Opcionalmente, defina el atributo de integridad Subresource para una seguridad adicional.
`scriptProps`	Opcionalmente, anule cualquiera de los accesorios pasados al elemento de script. Ver ejemplo.

Proxy el script de análisis

Para evitar ser bloqueado por AdBlockers Plausible, recomienda la proxy del script. Para hacer esto, necesita envolver su next.config.js con la función 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
} )

Esto configurará las reescrituras necesarias como se describe aquí y configurará PlausibleProvider para usar las URL locales para que pueda seguir usandolo así:

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

Opcionalmente, puede sobrescribir el subdirectorio y el nombre de script proxy, así como el dominio personalizado para el 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
} )

Esto cargará el script de /yoursubdirectory/js/scriptName.js y lo buscará en http://example.com/js/script.js .

Notas:

La proxy solo funcionará si sirve a su sitio usando next start . Los sitios generados por está estáticos no podrán reescribir las solicitudes.
Si está a sí mismo alojando plausible, debe establecer customDomain en su instancia, de lo contrario no se enviarán datos.

Tenga en cuenta que las solicitudes de seguimiento se realizarán al mismo dominio, por lo que se enviarán cookies. Ver #67. Si este es un problema para usted, de [email protected] puede usar el middleware para despojar las cookies como esta:

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

Enviar eventos personalizados

Plausible admite eventos personalizados como se describe en https://plausible.io/docs/custom-event-goals. Este paquete proporciona el gancho usePlausible para acceder de manera segura a la función 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 >
    </ >
  )
}

Si usa TypeScript, puede escribir sus eventos personalizados como este:

 import { usePlausible } from 'next-plausible'

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

const plausible = usePlausible < MyEvents > ( )