쪽빛하늘

구글 애널리틱스는 구글에서 무료로 제공해주는 서비스로 웹사이트 통계 분석 프로그램 중 많은 사람들이 활용하고 있는 프로그램이다.

구글에서 신청만 한다고 사용할 수 있는 것이 아니라 웹사이트 소스에 직접 추적코드를 넣어야 사용할 수 있으며,

홈페이지 방문자 통계와 관련된 내용을 기간을 지정하거나, 실시간으로 확인할 수 있다.

구글 애널리틱스를 사용하기 위해서는 일단 구글 애널리틱스에 가입하는 것부터 시작해야한다.

https://www.google.com/analytics/

해당 페이지로 넘어갈 경우 가입과 관련 된 화면을 확인 할 수 있다.

이 화면에서 [가입] 버튼을 눌러 항목을 보면서 하나씩 채운다.

(이미 구글 애널리틱스를 사용하고 있어 가입 화면 확인이 불가해 화면은 없다.)

항목을 채운 화면 하단에 [추적 ID 가져오기] 버튼을 누르면 통계 분석을 하고자하는 홈페이지 소스에 넣을 스크립트 내용을 확인할 수 있다.

하지만 기존에 만들어진 계정에서 추적 코드를 알기 위해서는 당연히 가입 과정을 거친 이 방법으로는 확인을 할 수 없다.

이 경우 구글 애널리틱스 메인 화면에 들어가서 확인을 할 수 있다.

https://www.google.com/intl/ko_KR/analytics/

위 URL로 갈 경우

해당 화면에서 오른쪽 상단에 빨간색으로 줄 그어놓은 로그인을 눌러 화면을 이동한다.

(대시보드의 경우 자신이 설정할 수 있으므로, 간단하게 자주 확인하는 데이터가 있다면 대시보드에 넣어놓는 방법이 유용할 수 있다.)

왼쪽 화면 하단에 톱니바퀴 모양의 아이콘과 함께 있는 관리를 누를경우 홈페이지의 상세 설정 값을 확인 할 수 있는 화면으로 넘어가게 된다.

그리고 두 번째에 홈페이지 주소가 적혀있는 화면에서 추적 정보라고 적힌 부분을 누른다.

그러면 아래에 소메뉴가 보이게 되는데, 그 중에 추적코드를 선택하면 된다.

추적코드를 선택해 들어올 경우 위와 같은 화면을 확인할 수 있다.

이 화면에서 추적 ID와 추적 코드가 적힌 것을 확인 할 수 있으며, 웹사이트 추적이라고 적힌 부분 아래에 스크립트를 복사해서 홈페이지 스크립트에 넣으면 된다. 공통으로 사용하는 스크립트에 넣거나 화면을 불러올때 사용하는 스크립트에 넣어도 상관없다.

*) 개인적으로 JSP를 사용하여 예제를 만들어 봤기 때문에 PHP의 경우 설명에 따라 하면 될거라고 파악된다.

한 3일동안 아래 이미지로 보이는 오류로 인해 예제가 계속 되지 않았다.

https://developers.google.com/analytics/devguides/reporting/core/v3/quickstart/web-js

위의 URL로 들어가면 알겠지만 version 3 예제를 이용해보았다.

*) 현재는 version 4로 예제를 만들어보는 중이다. version 4 는 아래 URL로 확인할 수 있다.

https://developers.google.com/analytics/devguides/reporting/core/v4/quickstart/web-js

- Get https://~ 400 ()

- Refused to display '~' in a frame because it set 'X-Frame-Options' to 'SAMEORIGIN'.

오류 내용을 찾기 위해 가장 먼저 확인했던 내용은 Client ID가 잘못되지 않았는지 확인하는 것이었다.

다른 종류의 API ID가 존재해서 혹시나 잘못된 것을 넣지 않았는지 확인했으나, 제대로 된 ID 값이 들어간 것을 확인 할 수 있었다.

다시 API Key 값을 만드는 것부터 확인하면서 찾아본 결과

위의 화면 중 리디렉션 URI에 표시한 부분에서 문제가 생겼었다.

저 URI가 내 프로젝트의 경로를 적는다고 생각을 하고, 프로젝트 경로(프로젝트 명)가 들어가 있었다.

다시 위와 같은 URI로 수정을 하고나니 아래와 같이 예제가 보이는 것을 확인 할 수 있었다.

이런 실수를 줄이기 위해 더 꼼꼼히 읽으면서 해봐야겠다.

구글 API는 한글로 된 설명이 적을 뿐더러 Analytics API를 활용한 한글 설명을 찾기가 힘들어 아쉽다.

조만간 API 사용 방법을 정리해서 올려야겠다.

javascript를 사용하다보면 alert나 log를 이용하여 변수의 값을 확인하고 싶어도 확인하지 못하는 경우가 종종 생긴다.

특히, [Object object]로 보여지는 경우를 자주 만나게된다.

자바의 경우 obj.toString() 이나 obj.toJSON()로 처리할 수 있지만 javascript에서 저렇게 간단하게 보여지지 않는다.

아래는 JSON을 만들어 값을 넘기면서 값이 제대로 들어갔는지 확인하기 위해 사용한 방법이다.

*) key의 경우 for문 안에서만 사용하는 변수이므로 어떤 변수명을 사용하더라도 무관하다.

obj의 경우 값을 알고자하는 object의 변수명을 적으면 된다.

위의 내용을 입력하고 실행시키면 콘솔창에 object 변수 내에 있는 변수명과 값들을 확인할 수 있다.

object내의 변수가 많을 경우 alert로 확인하는 것 보다 console.log로 확인하는 것이 한눈에 파악이 쉽다.

단, 확인이 끝날 경우 꼭 주석처리를 하거나 지우는 것을 잊지 말자!