Téléchargement next plausible - Téléchargement de code source next plausible

next plausible

Code Source AI

1.0.0

Télécharger

Suivant-plausible ·

Intégration simple pour https://nextjs.org et https://plausible.io Analytics.

Voyez-le en action sur https://next-plausible.vercel.app, et cela engage pour un exemple du monde réel.

IMPORTANT: Si vous utilisez une version de Next inférieur à 11.1.0 , veuillez utiliser next-plausible@2 pour éviter les erreurs de vérification de type (voir # 25).

Usage

Inclure le script d'analyse

Pour activer les analyses plausibles dans votre application Next.js, vous devrez exposer le contexte plausible, <PlausibleProvider /> , au niveau supérieur de votre application à l'intérieur _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 vous souhaitez activer des analyses plausibles uniquement sur une seule page, vous pouvez envelopper la page dans un composant PlausibleProvider :

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

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

Si vous utilisez le répertoire de l'APP, incluez PlausibleProvider à l'intérieur de la disposition racine:

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

Accessoires `PlausibleProvider`

Nom	Description
`domain`	Le domaine du site que vous souhaitez surveiller.
`customDomain`	Définissez-le si vous utilisez un domaine personnalisé pour servir le script d'analyse. Par défaut est https://plausible.io. Voir https://plausible.io/docs/custom-domain pour plus de détails.
`trackOutboundLinks`	Définissez ceci sur `true` si vous souhaitez activer le lien sortant Cliquez sur le suivi.
`trackFileDownloads`	Définissez ceci sur `true` si vous souhaitez activer le suivi du téléchargement de fichiers.
`taggedEvents`	Définissez ceci sur `true` si vous souhaitez activer le suivi des événements personnalisés dans les éléments HTML.
`trackLocalhost`	Définissez ceci sur `true` si vous souhaitez activer le suivi localhost.
`manualPageviews`	Définissez ceci sur `true` si vous souhaitez désactiver les événements de page de page automatique.
`pageviewProps`	Définissez les propriétés personnalisées pour les pages vues. L' `event-` le préfixe sera ajouté automatiquement. Voir un exemple.
`revenue`	Définissez ceci sur `true` si vous souhaitez activer le suivi des revenus du commerce électronique.
`hash`	Définissez ceci sur `true` si vous souhaitez utiliser le routage basé sur le hachage.
`exclude`	Définissez-le si vous souhaitez exclure un ensemble de pages de suivi. Voir https://plausible.io/docs/excluding-pages pour plus de détails.
`selfHosted`	Définissez ceci sur `true` si vous hébergez votre instance plausible. Sinon, vous obtiendrez un 404 lors de la demande du script.
`enabled`	Utilisez-le pour décider explicitement de rendre ou non un script. S'il n'est pas passé, le script sera rendu dans des environnements de production (vérification node_env et vercel_env).
`integrity`	Définissez éventuellement l'attribut d'intégrité de sous-resource pour une sécurité supplémentaire.
`scriptProps`	Éventuellement, remplacer l'un des accessoires transmis à l'élément de script. Voir l'exemple.

Proxy le script d'analyse

Pour éviter d'être bloqué par les adblockers, plausible recommande de proxyer le script. Pour ce faire, vous devez envelopper votre next.config.js avec la fonction 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
} )

Cela mettra en place les réécritures nécessaires comme décrit ici et configurera PlausibleProvider pour utiliser les URL locales afin que vous puissiez continuer à l'utiliser comme ceci:

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

Éventuellement, vous pouvez écraser le sous-répertoire et le nom du script proxyé, ainsi que le domaine personnalisé pour le 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
} )

Cela chargera le script de /yoursubdirectory/js/scriptName.js et le récupérera à partir de http://example.com/js/script.js .

Notes:

Le proxyage ne fonctionnera que si vous servez votre site en utilisant next start . Les sites générés statiquement ne pourront pas réécrire les demandes.
Si vous hébergez l'auto-hébergement plausible, vous devez définir customDomain sur votre instance, sinon aucune donnée ne sera envoyée.

Gardez à l'esprit que les demandes de suivi seront faites dans le même domaine, de sorte que les cookies seront transmis. Voir # 67. S'il s'agit d'un problème pour vous, à partir de [email protected] , vous pouvez utiliser le middleware pour éliminer les cookies comme ceci:

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

Envoyer des événements personnalisés

Plausible prend en charge les événements personnalisés comme décrit sur https://plausible.io/docs/custom-event-goals. Ce package fournit le crochet usePlausible pour accéder en toute sécurité à la fonction plausible comme celle-ci:

 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 vous utilisez TypeScript, vous pouvez taper consulter vos événements personnalisés comme celui-ci:

 import { usePlausible } from 'next-plausible'

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

const plausible = usePlausible < MyEvents > ( )