next plausible загрузка - next plausible исходный код скачать

next plausible

AI Исходный код

1.0.0

Скачать

Следующая продаленная ·

Простая интеграция для https://nextjs.org и https://plaabible.io analytics.

Смотрите это в действии на https://next-laibable.vercel.app, и этот коммит для реального примера.

ВАЖНО: Если вы используете версию следующего ниже 11.1.0 используйте next-plausible@2 чтобы избежать ошибок проверки типа (см. #25).

Использование

Включите аналитический скрипт

Чтобы включить правдоподобную аналитику в вашем приложении Next.js, вам нужно будет разоблачить правдоподобный контекст, <PlausibleProvider /> , на верхнем уровне вашего приложения внутри _app.js :

 // 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://plaabible.io. См. Https://plaabible.io/docs/custom-domain для получения более подробной информации.
`trackOutboundLinks`	Установите это на `true` , если вы хотите включить исходящую ссылку. Нажмите на отслеживание.
`trackFileDownloads`	Установите это на `true` , если вы хотите включить отслеживание загрузки файлов.
`taggedEvents`	Установите это на `true` , если вы хотите включить пользовательское отслеживание событий в HTML -элементах.
`trackLocalhost`	Установите это на `true` , если вы хотите включить Localhost. Отслеживание.
`manualPageviews`	Установите это на `true` , если вы хотите отключить события автоматического просмотра страниц.
`pageviewProps`	Установите пользовательские свойства для просмотра страниц. Префикс `event-` будет добавлен автоматически. См. Пример.
`revenue`	Установите это на `true` , если вы хотите включить отслеживание доходов электронной коммерции.
`hash`	Установите это на `true` , если вы хотите использовать маршрутизацию на основе хэша.
`exclude`	Установите это, если вы хотите исключить набор страниц из отслеживания. См. Https://plaabible.io/docs/excluding-pages для получения более подробной информации.
`selfHosted`	Установите это на `true` , если вы самостоятельно принимаете свой правдоподобный экземпляр. В противном случае вы получите 404 по запросу сценария.
`enabled`	Используйте это, чтобы явно решить, можно ли отображать сценарий. Если не пройден, сценарий будет отображаться в производственных средах (проверка node_env и vercel_env).
`integrity`	При желании определить атрибут целостности Subresource для дополнительной безопасности.
`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 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://plaabible.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 > ( )