next plausible 다운로드 - next plausible 소스 코드 다운로드

next plausible

AI 소스 코드

1.0.0

다운로드

다음 플래시 ·

https://nextjs.org 및 https://plausible.io 분석에 대한 간단한 통합.

https://next-plausible.vercel.app에서 실제로 확인하십시오.

중요 : 11.1.0 미만의 Next 버전을 사용하는 경우 next-plausible@2 사용하여 유형 확인 오류를 피하십시오 ( #25 참조).

용법

분석 스크립트를 포함하십시오

다음.js 앱에서 그럴듯한 분석을 활성화하려면 _app.js : 내부의 애플리케이션의 최상위 레벨에서 <PlausibleProvider /> 를 노출시켜야합니다.

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

이름	설명
`domain`	모니터링하려는 사이트의 도메인.
`customDomain`	사용자 정의 도메인을 사용하여 분석 스크립트를 제공하는 경우 설정하십시오. 기본값 https://plausible.io로 자세한 내용은 https://plausible.io/docs/custom-domain을 참조하십시오.
`trackOutboundLinks`	아웃 바운드 링크 클릭 추적을 활성화하려면 `true` 로 설정하십시오.
`trackFileDownloads`	파일 다운로드 추적을 활성화하려면 `true` 로 설정하십시오.
`taggedEvents`	HTML 요소에서 사용자 정의 이벤트 추적을 활성화하려면 `true` 로 설정하십시오.
`trackLocalhost`	LocalHost 추적을 활성화하려면 이것을 `true` 로 설정하십시오.
`manualPageviews`	자동 페이지 뷰 이벤트를 비활성화하려면 `true` 로 설정하십시오.
`pageviewProps`	PageViews의 사용자 정의 속성을 설정하십시오. `event-` 접두사가 자동으로 추가됩니다. 예를 참조하십시오.
`revenue`	전자 상거래 수익 추적을 활성화하려면 이것을 `true` 로 설정하십시오.
`hash`	해시 기반 라우팅을 사용하려면 이것을 `true` 로 설정하십시오.
`exclude`	페이지 세트를 추적하지 않으려면 설정하십시오. 자세한 내용은 https://plausible.io/docs/excluding-pages를 참조하십시오.
`selfHosted`	그럴듯한 인스턴스를 스스로 호스팅하는 경우 이것을 `true` 로 설정하십시오. 그렇지 않으면 스크립트를 요청할 때 404를 얻게됩니다.
`enabled`	이것을 사용하여 스크립트를 렌더링할지 여부를 명시 적으로 결정하십시오. 통과하지 않으면 스크립트가 프로덕션 환경에서 렌더링됩니다 (Node_env 및 Vercel_env 확인).
`integrity`	선택적으로 추가 보안을 위해 하위 소스 무결성 속성을 정의합니다.
`scriptProps`	선택적으로 스크립트 요소로 전달 된 소품을 대체합니다. 예를 참조하십시오.

분석 스크립트 프록시

AdBlockers가 차단하지 않으려면 Plausible은 스크립트를 프록시하는 것이 좋습니다. 이렇게하려면 withPlausibleProxy 함수로 next.config.js 마무리해야합니다.

 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 에서 스크립트를로드하고 http://example.com/js/script.js 에서 가져옵니다.

참고 :

프록시는 next start 사용하여 사이트에 서비스를 제공하는 경우에만 작동합니다. 정적으로 생성 된 사이트는 요청을 다시 작성할 수 없습니다.
자체 호스팅 Plausible 인 경우 customDomain 인스턴스로 설정해야합니다. 그렇지 않으면 데이터가 전송되지 않습니다.

추적 요청은 동일한 도메인으로 이루어질 것이므로 쿠키가 전달됩니다. #67 참조. 이것이 당신에게 문제가되는 경우, [email protected] 에서 미들웨어를 사용하여 다음과 같은 쿠키를 제거 할 수 있습니다.

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

맞춤형 이벤트를 보내십시오

Plausible은 https://plausible.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 > ( )