Plausible.io를 사용하여 NextJS에 분석 추가

3672 단어 tutorialnextjsplausiblejavascript

그럴듯한 무엇입니까?



가볍고 오픈 소스 웹 분석으로 그럴듯한 시장 자체. 저자는 그것을 가장 잘 말할 수 있습니다

We are dedicated to making web analytics more privacy-friendly. Our mission is to reduce corporate surveillance by providing an alternative web analytics tool which doesn’t come from the AdTech world. The full-time team consists of Uku Taht and Marko Saric. We are completely independent, self-funded and bootstrapped.



Plausible은 개인 정보를 수집하지 않는 놀라운 Google Analytics 대안입니다.

그럴듯한 설치

Next.js에 Plausible을 설치하는 방법은 매우 간단하고 쉽습니다. 개발자들은 그것을 완벽하게 만들었습니다.

Plausible Analytics를 실행하는 데는 두 가지 옵션이 있습니다.
  • 문서 파일의 다음/머리.

    • 등록을 진행하면 이 스크립트를 받게 됩니다.

    <script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>


    Custom Document 계속하려면 파일이 필요합니다. 실행하는 순간 헤드에 추가하십시오.

    import Document, {Html, Head, Main, NextScript} from 'next/document'

class MyDocument extends Document {
    render() {
        return (
            <Html>
                <Head>
                    <base href="/"></base>
                    <script async defer data-domain="<your-domain.com>" src="https://plausible.io/js/plausible.js"></script>

                </Head>
                <body>
                <Main/>
                <NextScript/>
                </body>
            </Html>
        )
    }
}

export default MyDocument


    그것이 당신이 그것을 설정하기 위해해야 ​​할 전부입니다.
  • NextJS 라이브러리

    • 4lejandrito은 Plausible 분석을 NextJS에 연결하는 훌륭한 도구를 만들었습니다.

    yarn add next-plausible

npm install next-plausible


    중요: 11.1.0 이하의 NextJS 버전을 사용하는 경우

    다음 가능성@2

    Custom App 을 생성하고 모든 페이지에 이 방법을 사용하도록 설정해야 합니다.

    import PlausibleProvider from "next-plausible";

function MyApp({ Component, pageProps }) {
  return 
    <PlausibleProvider domain="<Your domain>">
        <Component {...pageProps} />
    </PlausibleProvider>
}

export default MyApp


    맞춤 이벤트



    Plausible을 사용하면 모든 종류의 정보를 추적할 수 있습니다. 게시물, 개수, 중요하다고 생각하는 데이터 등이 될 수 있습니다.

    후크를 사용할 수 있습니다.

    import {usePlausible} from 'next-plausible'

export default PlausibleButton() {
    const plausible = usePlausible()
    return (
        <button onClick={() => plausible('customEventName')}>
            Send
        </button>
    )
}


    문제 해결



    모든 추적 스크립트와 마찬가지로 사용자에게 추적 차단 확장 프로그램이 있으면 어떤 결과도 얻을 수 없습니다.
    나는 Chrome에서 작동하지 않는 이유를 파악하기 전에 10분을 소비했기 때문에 지적하고 있지만 Firefox에서만 작동합니다(개인 정보 보호 확장 프로그램이 설치되어 있지 않음).

    추가 정보는 공식 문서here에서 찾을 수 있습니다.

    연결
    https://github.com/plausible/analytics
    LZP3(매우 강력한 알고리즘)을 사용하여 JS의 모든 데이터를 압축합니다.
    Go Zero 값 사용

    좋은 웹페이지 즐겨찾기

    개발자 우수 사이트 수집

    개발자가 알아야 할 필수 사이트 100선 추천 우리는 당신을 위해 100개의 자주 사용하는 개발자 학습 사이트를 정리했습니다
    best100-homepage