Next.js 앱에 Splitbee Analytics 추가

I talk about Splitbee — a new analytics tool; and how to add it to your Next.js app.





소개



애널리틱스는 대부분 Google 애널리틱스만큼 복잡할 필요가 없습니다. Splitbee은 분석에 대한 새로운 접근 방식을 취하며 다음과 더불어 감사할 이유를 찾을 수 있습니다.
  • 실시간 업데이트 및 여정 보기와 같은 기능이 포함된 깔끔하고 반응이 빠르고 사용자 친화적인 UI가 있습니다
  • .
  • SPA 라우팅을 위한 추가 설정이 필요하지 않음
  • 온보딩 프로세스가 가장 간단합니다
  • .

    그러나 Google Analytics와 달리 Splitbee는 무료가 아닙니다. 앱에 방문자가 없는 한 조만간 이 메시지가 표시되고 사용자 지정 이벤트 데이터가 수정됩니다.



    가격 책정에 대해 자세히 알아볼 수 있습니다here.

    Next.js 재작성에 대한 참고 사항



    Next.js는 즉시 URL을 다시 매핑할 수 있는 Rewrites 을 지원합니다. 자신의 도메인을 통해 Splitbee 통신을 라우팅하면 다음을 얻을 수 있습니다.
  • DNS 조회 감소
  • 외부 도메인에서 콘텐츠 로드를 방지하는 광고 차단기를 우회합니다
  • .
  • 클린업 CSP 헤더 - connect-src https://hive.splitbee.io; script-src https://cdn.splitbee.io;에서 connect-src 'self'; script-src 'self';

  • 아래의 두 가지 접근 방식 각각에서 Rewrites를 구성할 것입니다.

    "물만 추가" 방식



    Splitbee에서 직접 스크립트를 추가합니다.

    // ./pages/_document.tsx
    
    ...
    <Head>
      <script async src="https://cdn.splitbee.io/sb.js"></script>
    </Head>
    ...
    


    이제 다음과 같이 이벤트를 추적할 수 있습니다.

    // Anywhere
    
    if ((window as any).splitbee) {
    
      const action: string = 'action';
      const data: any = {};
    
      (window as any).splitbee.track(action, data);
    
    }
    


    다음과 같이 사용자에 대해 데이터를 설정할 수 있습니다.

    // Anywhere
    
    if ((window as any).splitbee) {
    
      const data: any = {};
    
      (window as any).splitbee.user.set(data);
    
    }
    


    이 접근 방식의 단점은 track() 또는 user.set()가 호출될 때 라이브러리가 로드되지 않을 수 있다는 것입니다. 따라서 if() 랩이 필요합니다.

    대신 스크립트 태그를 상대 경로로 지정하여 Next.js Rewrite를 구성합니다.

    // ./pages/_document.tsx
    
    ...
    <Head>
      <script async data-api="/sb-api" src="/sb.js"></script>
    </Head>
    ...
    


    그런 다음 해당 상대 경로에 대한 Rewrite를 추가합니다.

    // ./next.config.js
    
    const rewrites = async () => [
      {
        destination: 'https://cdn.splitbee.io/sb.js',
        source: '/sb.js'
      },
      {
        destination: 'https://hive.splitbee.io/:slug',
        source: '/sb-api/:slug'
      }
    ];
    module.exports = {
      rewrites
    };
    


    NPM 패키지 접근법



    Splitbee NPM package을 사용하면 다음과 같은 여러 가지 이점이 있습니다.
  • 자동으로 클라이언트에서 라이브러리를 사용할 수 있게 합니다
  • .
  • 동기 로직 쓰기가 가능합니다
  • .
  • TypeScript와 함께 사용할 타이핑을 제공합니다
  • .

    NPM에서 패키지를 설치합니다.

    // Command
    
    npm i @splitbee/web
    


    Splitbee 초기화:

    // ./pages/_app.tsx
    
    import splitbee from '@splitbee/web';
    import type { AppProps } from 'next/app';
    import { useEffect } from 'react';
    
    const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => {
    
      useEffect((): void => { splitbee.init(); }, []);
    
      return <Component {...pageProps} />
    
    }
    


    이제 다음과 같이 이벤트를 추적할 수 있습니다.

    // Anywhere
    
    import splitbee from '@splitbee/web';
    
    const action: string = 'action';
    const data: any = {};
    
    splitbee.track(action, data);
    


    다음과 같이 사용자에 대해 데이터를 설정할 수 있습니다.

    // Anywhere
    
    import splitbee from '@splitbee/web';
    
    const data: any = {};
    
    splitbee.user.set(data);
    


    먼저 상대 경로의 구성 개체를 init()에 전달하여 Next.js Rewrite를 구성합니다.

    // ./pages/_app.tsx
    
    import splitbee from '@splitbee/web';
    import type { AppProps } from 'next/app';
    import { useEffect } from 'react';
    
    const MyApp: (props: AppProps) => JSX.Element = ({ Component, pageProps }: AppProps): JSX.Element => {
    
      useEffect((): void => {
    
        splitbee.init({
          apiUrl: '/sb-api',
          scriptUrl: '/sb.js'
        });
    
      }, []);
    
      return <Component {...pageProps} />
    
    }
    


    그런 다음 해당 상대 경로에 대한 Rewrite를 추가합니다.

    // ./next.config.js
    
    const rewrites = async () => [
      {
        destination: 'https://cdn.splitbee.io/sb.js',
        source: '/sb.js'
      },
      {
        destination: 'https://hive.splitbee.io/:slug',
        source: '/sb-api/:slug'
      }
    ];
    
    module.exports = {
      rewrites
    };
    



    건배!

    좋은 웹페이지 즐겨찾기