구글 애널리틱스 초보 시절 가장 많이 했던 고민은 제가 심은 추적 스크립트가 제대로 작동하는 지 , 이러한 스크립트를 심더라도 문제가 없을 지에 대한 두려움 이었습니다.
실제 운영하고 있는 사이트에 잘 이해하지 못하는 스크립트를 심는 것은 누구에게나 매우 두려운 일 일 수 있습니다.
그래서 이번 포스팅에서는 실제 운영사이트가 아닌 테스트 환경에서 구글 애널리틱스를 심어보고 잘 작동하는 지 확인 함으로써 실제 운영하는 사이트에 심기 전에 해당 코드가 잘 작동하는 코드 인지 알아보는 방법을 알아보고자 합니다.
먼저 테스트를 위해 구글 애널리틱스 계정을 만들겠습니다.
이 계정은 실제 운영용이 아니며 데이터를 쌓고 분석하는 용도가 아닌 데이터가 저희의 의도 대로 잘 들어오는 지 확인하고 테스트 하는 용도로 사용 될 것 입니다.
이제 https://analytics.google.com/ 로 이동하여 애널리틱스 계정을 만들어주겠습니다.
테스트용 계정이기 때문에 테스트 라는 이름으로 계정을 만들어주겠습니다.
저희는 웹 용 추적 코드 (gtag.js) 를 테스트할 예정이니 Web 을 체크 하겠습니다.
Website Name 을 테스트로 설정해주고 Website URL 은 test.com 으로 설정 해주었습니다.
Website URL 의 경우 처음에 입력된 사이트에만 트래픽이 집계 되는 것이 아닌가? 하는 의문을 가지시는 분이 조금 있을 수 있습니다.
사실 Website URL 은 구글 애널리틱스 내부에 PAGE 관련 디멘션을 조회 하게 되면 우측에 링크 아이콘이 뜨는데 이 아이콘 클릭시에 Website URL 에 기록된 URL 과 PAGE 를 더해서 링크로 보내주는 기능에 사용됩니다. 데이터 집계에는 영향을 끼치는 부분이 없음으로 사실 어떤 사이트를 기재하더라도 해당 사이트에 피해를 주거나 영향을 주는 일은 없으니 참고해주시면 좋을 것 같습니다.
이어서 Industry Category 는 Other , TimeZone 은 한국으로 설정해 주었습니다.
이후 약관을 동의하고 나면 다음과 같은 화면이 뜨면서 구글 애널리틱스 계정이 생성 됩니다.
빨간박스의 코드가 생성된 계정에 데이터를 쌓을 수 있게 하는 스크립트이며 이후 해당 코드를 테스트할 사이트에 심어 트래픽이 발생하는 것을 확인하게 될 것 입니다.
이제 테스트를 할 환경을 소개 하도록 하겠습니다. 저희는 구글 애널리틱스 테스트를 위해 CodePen 이라는 서비스를 이용하려고 합니다.
CodePen
An online code editor, learning environment, and community for front-end web development using HTML, CSS and JavaScript code snippets, projects, and web applications.
codepen.io
CodePen 은 온라인 코드 에디터로 HTML , CSS , Javascript 를 온라인에서 테스트 할 수 있는 서비스 입니다.
구글 애널리틱스는 JavaScript 라는 프로그래밍 언어로 구성되어 있기 때문에 CodePen 을 이용하면 쉽게 구글 애널리틱스가 어떻게 작동하는 지 테스트 할 수 있습니다.
이제 실제로 방금 생성한 구글 애널리틱스 코드를 CodePen 에 넣어 트래픽을 일으켜보겠습니다.
https://codepen.io/0505/pen/RwPxxNM
구글 애널리틱스 페이지뷰 테스트
...
codepen.io
위에 링크로 들어가시면 다음과 같은 화면이 보이실겁니다.
HTML 이라는 마크업 언어로 간단하게 화면을 구성하였고 <head> 태그 안에 구글 애널리틱스 코드를 심어주었습니다.
그러면 이제 빨간색 박스 영역을 지우고 방금 생성하신 코드를 대신 Ctrl + C , V 하여 넣어주겠습니다.
CodePen 은 위의 HTML , CSS , JS 의 내용이 바뀔 때마다 페이지를 갱신하게 되어 있습니다.
현재 HTML 에 구글 애널리틱스 코드가 들어가 있기 때문에 내용이 바뀔 때마다 구글 애널리틱스의 페이지뷰가 일어나게 될 것 입니다.
그럼 한번 내부 내용을 한번 더 바꿔 보겠습니다.
<body> 태그 안에 있는 '구글 애널리틱스 테스트' 라는 문자를 '구글 애널리틱스 테스트1111' 이라는 텍스트로 바꿔주니 아래 화면이 바뀐 것을 확인 할 수 있으실 겁니다. 이제 구글 애널리틱스 실시간 리포트에서 제대로 트래픽이 발생하고 있는 지 확인 해보겠습니다.
좌측 메뉴에 Real-time - Overview 를 클릭하면 Right now 에 1이 찍혀 있는 것을 보실 수 있으실 겁니다.
이렇게 CodePen 을 이용해 방금 생성한 구글 애널리틱스를 심어보고 트래픽을 일으켜보았습니다.
페이지뷰를 일으키는 부분은 사실 매우 간단하여 따로 테스트가 필요없을 지 모르지만 이후에 이벤트나 커스텀 디멘션, 메트릭 , 전자상거래 다소 복잡한 트래킹을 계획하고 계시다면 정확한 트래킹을 위해 테스트의 중요성은 매우 커질 수 있습니다.
이후에는 이벤트 , 커스텀 디멘션 등의 트래킹을 테스트 하는 포스팅을 진행하도록 하겠습니다.
감사합니다 :)
'Google Analytics' 카테고리의 다른 글
| 구글 애널리틱스 이벤트 일으키기 (5) | 2020.06.22 |
|---|---|
| 구글 애널리틱스 커스텀 디멘션 만들기 (0) | 2020.06.20 |
| 구글 태그매니저를 통한 구글 애널리틱스 실행 속도 비교 (0) | 2020.03.08 |
| Google Analytics 코드 삽입 위치에 따른 차이점 (1) | 2020.03.07 |
| GA 트래킹 브라우져 개발자 도구로 확인하기 (0) | 2020.03.07 |
