Next.js 블로그에 google analytics

개요

블로그에 트래픽을 추적할 수 있도록 Google Analytics를 연결합니다.

전제

저의 경우 이미 사용중인 Google Analytics 계정이 있습니다.
Tailwind CSS Blog Starter 템플릿 코드로 프로젝트를 시작하였으며, 여기에는 이미 Google Analytics 코드가 구현되어있습니다.

Google Analytics 속성 만들기

Google Analytics에 접속하여 좌측 하단 관리 메뉴를 선택합니다.
- 계정 > 속성 > + 속성 만들기 버튼을 클릭합니다.
속성 만들기
- 속성 이름(필수): 확인할 수 있는 이름을 지정합니다.
- 보고 시간대: 저는 대한민국을 지정했습니다.
- 통화: 저는 미국 달러($)를 지정했습니다.
비즈니스 세부 정보
- 업종 카테고리(필수): 본인에게 맞는 카테고리를 선택합니다.
- 비즈니스 규모(필수): 본인에게 맞는 규모를 선택합니다.
비즈니스 목표 선택
- 원하는 목표를 선택합니다.
만들기 버튼 클릭
데이터 수집 플랫폼 선택
- 웹 선택
- 데이터 스트림 설정: 웹 사이트 URL을 입력합니다. 저는 hlog.kr을 입력했습니다. (스트림 이름도 동일하게 해주었습니다.)
- 스트림 만들기 버튼 클릭
웹 스트림 세부 정보가 나오고, 설치 안내가 표시됩니다.

소스 코드에 Google Analytics 코드 연결하기

Tailwind CSS Blog Starter 템플릿에는 이미 해당 코드가 구현되어있고,
본인의 측정 ID(G-XXXXXXXXXX)만 입력하면 됩니다.

1. 측정ID와 코드 연결

/data/siteMetadata.js > googleAnalyticsId에 본인의 측정 ID(G-XXXXXXXXXX)를 입력합니다.

const siteMetadata = {
  analytics: {
    googleAnalyticsId: '본인의 측정ID', // e.g. UA-000000-2 or G-XXXXXXX
  },
}

네, 이것으로 끝입니다. 연결되었습니다.

2. 로컬에서 확인

로컬 확인은 생략하셔도 됩니다. 생략하시려면 바로 3번으로 넘어가시면 됩니다.

Tailwind CSS Blog Starter 템플릿 코드에서는 production일 경우에만 Google Analytics 코드가 실행되도록 되어있습니다.

로컬에서 확인이 가능하도록 코드를 !잠시! 변경하도록 합니다.

/components/analytics/index.js 코드에서 isProduction을 !isProduction으로 변경하면 로컬에서 확인이 가능합니다.

❗ 배포할때는 isProduction으로 조건을 !꼭! 바꿔주셔야 합니다.

{
  !isProduction && siteMetadata.analytics.googleAnalyticsId && <GA />
}

개발자 도구에서 확인해보면 본인의 측정 ID가 코드에 포함된 것을 확인할 수 있습니다.
하지만!!! 개발자 도구 콘솔에 아래와 같은 오류 메세지가 표시 됩니다.

Refused to load the script 'https://www.googletagmanager.com/gtag/js?id=' because it violates the following Content Security Policy directive: "script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app". Note that 'script-src-elem' was not explicitly set, so 'script-src' is used as a fallback.

로컬에서 문제인가 하고 확인하니, 배포해서도 동일합니다.
이것은 Content Security Policy 문제입니다.

3. Content Security Policy 수정

/next.config.js 파일을 엽니다.
Content-Security-Policy 설정: 방법 1, 2 중 선택

방법 1. `ContentSecurityPolicy` 설정에서 `script-src`에 `*.googletagmanager.com`을 추가합니다.

const ContentSecurityPolicy = `
  default-src 'self';
  script-src 'self' 'unsafe-eval' 'unsafe-inline' giscus.app *.googletagmanager.com;
  style-src 'self' 'unsafe-inline';
  img-src * blob: data:;
  media-src 'none';
  connect-src *;
  font-src 'self';
  frame-src giscus.app
`

방법 2. 아래와 같이 `Content-Security-Policy`의 value를 공백으로 전달하여 해당 정책을 사용하지 않을 수도 있습니다.

const securityHeaders = [
  {
    key: 'Content-Security-Policy',
    value: '', //ContentSecurityPolicy.replace(/\n/g, ''),
  },
]

이 부분은 자동 refresh로 적용이 되지 않아 재시작(npm start)를 해주었습니다.

오류가 사라진 것을 확인할 수 있습니다.

4. Google Analytics에서 확인

Google Analytics에 접속하여 실시간 메뉴를 선택하면, 실시간으로 트래픽이 집계된 것을 확인할 수 있습니다.

(위 링크는 쿠팡 파트너스 활동의 일환으로, 이에 따른 일정액의 수수료를 제공받습니다.)

개요

전제