next plausible

Nächste plausible ·

Einfache Integration für https://nextjs.org und https://plausible.io Analytics.

Sehen Sie es in Aktion unter https://next-plausible.vercel.app und diesen Commit für ein Beispiel in der realen Welt.

WICHTIG: Wenn Sie eine Version von Next unter 11.1.0 verwenden, verwenden Sie bitte next-plausible@2 um Typ-Überprüfungsfehler zu vermeiden (siehe Nr. 25).

Verwendung

Fügen Sie das Analytics -Skript hinzu

<PlausibleProvider /> plausible Analysen in _app.js nächsten.

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

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

Wenn Sie plausible Analysen nur auf einer einzelnen Seite aktivieren möchten, können Sie die Seite in eine PlausibleProvider -Komponente einwickeln:

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

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

Wenn Sie das App -Verzeichnis verwenden, enthalten Sie PlausibleProvider im Stammlayout:

 // 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 -Requisiten

Name	Beschreibung
domain	Die Domäne der Website, die Sie überwachen möchten.
customDomain	Legen Sie dies fest, wenn Sie eine benutzerdefinierte Domain verwenden, um das Analyse -Skript zu bedienen. Standardeinstellungen zu https://plausible.io. Weitere Informationen finden Sie unter https://plausible.io/docs/custom-domain.
trackOutboundLinks	Stellen Sie dies auf true , wenn Sie den Outbound -Link aktivieren möchten, klicken Sie auf Tracking.
trackFileDownloads	Legen Sie dies auf true , wenn Sie die Datei -Download -Tracking aktivieren möchten.
taggedEvents	Stellen Sie dies auf true , wenn Sie eine benutzerdefinierte Ereignisverfolgung in HTML -Elementen aktivieren möchten.
trackLocalhost	Stellen Sie dies auf true , wenn Sie Localhost Tracking aktivieren möchten.
manualPageviews	Legen Sie dies auf true , wenn Sie automatische Seitenansichtereignisse deaktivieren möchten.
pageviewProps	Legen Sie die benutzerdefinierten Eigenschaften für Seitenaufrufe fest. Das event- Präfix wird automatisch hinzugefügt. Siehe ein Beispiel.
revenue	Stellen Sie dies auf true , wenn Sie die E -Commerce -Einnahmenverfolgung aktivieren möchten.
hash	Stellen Sie dies auf true , wenn Sie Hash-basierte Routing verwenden möchten.
exclude	Legen Sie dies fest, wenn Sie eine Reihe von Seiten von der Nachverfolgung ausschließen möchten. Weitere Informationen finden Sie unter https://plausible.io/docs/excluding-pages.
selfHosted	Stellen Sie dies auf true , wenn Sie Ihre plausible Instanz selbst veranstalten. Andernfalls erhalten Sie einen 404, wenn Sie das Skript anfordern.
enabled	Verwenden Sie dies, um explizit zu entscheiden, ob das Skript rendern oder nicht. Wenn nicht bestanden, wird das Skript in Produktionsumgebungen (Überprüfung von NODE_ENV und Vercel_env) gerendert.
integrity	Definieren Sie optional das SubResource -Integritätsattribut für zusätzliche Sicherheit.
scriptProps	Überschreiben Sie optional eine der an das Skriptelement übergebenen Requisiten. Siehe Beispiel.

Proxy das Analytics -Skript

Um zu vermeiden, von Adblockers blockiert zu werden, empfiehlt plausible das Drehbuch. Zu diesem Zweck müssen Sie Ihre next.config.js mit der withPlausibleProxy -Funktion einwickeln:

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

Auf diese Weise werden die hier beschriebenen erforderlichen Umschreibungen eingerichtet und PlausibleProvider so konfiguriert, dass Sie die lokalen URLs verwenden, damit Sie sie weiterhin wie folgt verwenden können:

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

Optional können Sie das Proxied -Skript -Unterverzeichnis und den Namen des Proxied -Skripts sowie die benutzerdefinierte Domäne für das ursprüngliche Skript überschreiben:

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

Dadurch wird das Skript von /yoursubdirectory/js/scriptName.js geladen und von http://example.com/js/script.js abgerufen.

Anmerkungen:

• Proxying funktioniert nur, wenn Sie Ihre Website mit next start bedienen. Statisch generierte Websites können die Anforderungen nicht umschreiben.

• Wenn Sie selbst hosting plausibel sind, müssen Sie customDomain auf Ihre Instanz setzen, sonst werden keine Daten gesendet.

• Denken Sie daran, dass die Verfolgung von Anfragen an derselben Domäne gestellt werden, sodass Cookies weitergeleitet werden. Siehe #67. Wenn dies ein Problem für Sie ist, können Sie von [email protected] mit Middleware die Cookies wie folgt entfernen:

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

Senden Sie benutzerdefinierte Ereignisse

Plausible unterstützt benutzerdefinierte Ereignisse wie unter https://plausible.io/docs/custom-event-goals. Dieses Paket bietet den usePlausible -Haken, um sicher auf die plausible Funktion wie folgt zugreifen zu können:

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

Wenn Sie TypeScript verwenden, können Sie Ihre benutzerdefinierten Ereignisse wie folgt überprüfen:

 import { usePlausible } from 'next-plausible'

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

const plausible = usePlausible < MyEvents > ( )

Nur diese Ereignisse mit den richtigen Requisiten dürfen mit der plausible Funktion gesendet werden.

Entwicklung

• npm run build erzeugt die Produktionsskripte im Ordner dist .