구글에서 제공하는 무료 웹로그 분석 툴 구글 애널리틱스(Google Analytics).
최근 우리나라에서도 이 툴을 사용하는 홈페이지가 정말 많이 늘었다.

불과 몇년전 상황과 비교하면 격세지감을 느낄 정도.

최근 네이버 웹마스터도구 개편도 그렇고 네이버 데이터랩으로 변경된 네이버 트랜드도 그렇고
점점 국내 트랜드도 데이터를 중심으로 한 의사결정이 보편화 될 것 같아 꽤나 설레는 상황.

본 블로그에도 구글 애널리틱스에 관한 글이 몇개 있는데 이번에는 카테고리가 좀 다른 팁을 하나 적어보려한다.

GA를 사용해본 유저라면 모두 알겠지만 GA는 웹을 기반으로 한 로그 분석툴이다.
웹을 기반으로 했기 때문에 주로 브라우저를 통해 내용을 확인하게 되는데
가끔 이런 아쉬움이 있었지 않으셨나?

  • 그래프가 더 크게 표시됐으면 좋겠는데.
  • 보고서를 캡쳐잡을 때 불필요한 요소를 미리 제거했으면 좋겠는데.

혹시 이런 문제 때문에 고민했던 분이라면 이번 글을 유심하게 살펴보시라.

먼저 오늘은 제목처럼 구글 애널리틱스 보고서 그래프를 확대시키는 방법을 먼저 말씀드리려한다.

일단 현재 GA의 기본 보고서 그래프의 모습이다.

본 블로그의 모든 세션 및 기기별 세션을 포함한 GA 체널 보고서 그래프다. 여러 세그먼트를 비교해 측정하거나 특정 demention의 plot을 그려 표시할 때 그래프 높이가 작아 시각적으로 구분하기 어렵다.
본 블로그의 모든 세션 및 기기별 세션을 포함한 GA 체널 보고서 그래프다. 여러 세그먼트를 비교해 측정하거나 특정 demention의 plot을 그려 표시할 때 그래프 높이가 작아 시각적으로 구분하기 어렵다.

아래는 팁 적용 후의 그래프 모습이다.

그래프 높이가 확대대 각 요소별 추이가 확연하게 구분된다.
그래프 높이가 확대대 각 요소별 추이가 확연하게 구분된다.

어떠신가 꽤 쓸만해지지 않았는가?
내 경우 보고서용 그래프 생성시 가능하면 GA 화면 자체를 직접 캡쳐하는데 이 정도라면 논지에 대한 근거자료로 충분히 써먹을만해진다.

여담으로 2월 이후 트래픽이 증가한 이유는 다음의 글에서 확인하실 수있다.
네이버 웹마스터도구에 블로그와 RSS 주소 등록 후 10일, 검색 트래픽 변화 추이는?

이제 방법을 알아보자.

글 서두에서 언급했듯이 GA 보고서는 웹브라우저에서 주로 확인가능하다.
특히 크롬 등의 웹브라우저에선 위의 그래프와 같은 시각적인 요소를 수정, 변경할 수 있는 플러그인이 존재한다.

웹기술은 이해하시는 분을 위해 한마디로 정리하자면
GA내에서 그래프를 표시하는데 쓰여지는 canvas 요소의 css height 값을 키운 것.
이라 정리 가능하다.

canvas, css 등등 이런거 다 필요없고 그냥 방법이 필요한 분은 아래 수순을 살펴보시라.

  1.  크롬브라우저를 기준으로 한다.
  2.  크롬 웹스토어에서 userscriptcss라는 확장기능을 설치한다.
  3.  설치 후 크롬 확장프로그램으로 접속한다(주소창에 chrome://extensions/ 라고 입력)
  4.  userscriptcss 항목에서 “옵션” 링크를 클릭.
  5. Enter a URL regexp here. 항목에 다음과 같이 입력
    https://www.google.com/analytics
  6. Enter your user stylesheet here. 항목에 다음과 같이 입력
    .ID-chartDest{ height:400px !important;}

    첫번째 항목은 적용할 웹사이트 주소를 기술하고 user stylesheet 항목에 적용될 CSS를 입력하면 된다.
    첫번째 항목은 적용할 웹사이트 주소를 기술하고 user stylesheet 항목에 적용될 CSS를 입력하면 된다.
  7. “Save” 버튼 클릭으로 저장
  8. 원하는 보고서 화면으로 접속!
  9. 끝!!

수순자체로는 별거 없다.
userscriptcss 사용법은 걍 적용할 홈페이지 주소 기술하고 원하는 css 및 javascript를 기술해 넣는 것으로 마무리된다.
특히 이번 GA 그래프 키우는 방법은 간단한 css 추가만으로 원하는 결과를 뽑아낼 수 있다.

하지만 이는 아주 기초적인 활용에 불과하다.
원한다면 GA 뿐만아니라 어떠한 웹사이트라도 특정 항목을 키우거나 삭제하거나 추가, 심지어는 다른 콘텐츠로 바꿔 표시하게 할 수도 있다.

대충 아래와 같은 예처럼 말이다.
크롬 및 크롬플러스에서 일본 웹사이트를 가독성 높은 폰트(meiryo)로 보는 방법

또한 이는 크롬 브라우저에만 국한된 방법이 아니다.
파이어폭스에도 그리스몽키스타일리쉬등 동일한 기능을 지원하는 플러그인도 있다.

사용방법 또한 크게 다르지 않으니 본인의 환경에 맞게 적절한 플러그인을 선택해 활용해보시라.

부디 이 내용이 GA 활용에 도움이 되시길 빌며
마무으리!

 

이 글의 관련글

Tags:

Leave a Reply

Your email address will not be published. Required fields are marked *