[Project/Nextjs] Google Analytics

For

• Google analytics 에서 제공하는 session_id 값을 가져오기 위해 해당 프로젝트에 적용 해 보았다.

Steps taken

• 우선 google analytics 를 불러오기 위해 다음과 같은 script 를 document.js 에 추가 해 주었다.

       <script
            async
            src={`https://www.googletagmanager.com/gtag/js?id=${process.env.GOOGLE_ANALYTICS}`}
          />
          <script
            dangerouslySetInnerHTML={{
              __html: `
            window.dataLayer = window.dataLayer || [];
            function gtag(){dataLayer.push(arguments);}
            gtag('js', new Date());
            gtag('config', '${process.env.GOOGLE_ANALYTICS}', {
              page_path: window.location.pathname,
            });
          `,
            }}
          />

• 여기서 발생한 문제점이 google 에서 제공하는 measurement id 를 .env.local 파일에 추가 해 주었는데, 이를 읽어 올 수가 없었다.
• 검색을 통해 찾은 해결 방법은 next.config.js 에 다음과 같이 module.exports 를 추가 해 줘야 했다. 이는 카카오와 같이 다른 라이브러리에서 제공하는 secret key 에도 똑같이 적용된다.

module.exports = {
  env: {
  KAKAO_KEY: process.env.KAKAO_KEY,
    GOOGLE_ANALYTICS: process.env.GOOGLE_ANALYTICS,
  }
};

• 처음에는 getId 라는 공용 함수를 만들어 session_id 값이 필요한 페이지에서 호출을 해서 사용할 생각으로 다음과 같이 함수를 만들었는데, 어째서인지 id 값에 google_analytics 의 session_id 값이 저장되지 않았다.

export const getId = (id) => {
  window.gtag(
    "get",
    process.env.GOOGLE_ANALYTICS,
    "session_id",
    (session_id) => {
      id = session_id;
    }
  );
};

• 이에 대한 해결책으로 각 페이지에서 state을 만들어 준 후, setState 을 시키니 그 값이 해당 state 에 잘 담기긴 했다.

   window.gtag(
      "get",
      process.env.GOOGLE_ANALYTICS,
      "session_id",
      (session_id) => {
        setSessionId(session_id);
      }
    );

-각 페이지에서 setState 을 하기 이전에 app.js 에서 zustand 를 이용해 session_id 를 저장하고 가져와 쓰게끔 하려고 했으나, session 이 만료되었을 시, 페이지가 로드가 되면 이전에 가지고 있던 값을 한번 가져오고, 바뀐 session_id 를 다시 찍어 event_type = "view" 로그가 두번 찍히는 현상이 발견되어 위와 같이 일일히 setState 을 해주고, sessionId state 이 undefined 가 아닐때만 로그를 보내는 함수를 호출 하게끔 했다.