brunch

You can make anything
by writing

C.S.Lewis

by 이키리우스 Jul 23. 2018

03 내 웹사이트에 GA 넣기

본 내용도 아주 초보적인 내용이니 아시는 분은 스킵을 권합니다.


자 이제 가게에 CCTV를 설치하듯 GA를 내 웹사이트에 넣어보자.


CCTV를 설치하는 과정은 다음과 같다.

1. CCTV를 산다

2. 적당한 장소에 설치한다(우리 가게는 천장이다)

3. 잘 보이는지 영상을 확인한다

4. 녹화를 시작한다


GA를 설치하는 과정도 다음과 같다.

1. 나만의 GA 추척코드를 발급받는다(Google analytics에서 공짜로)

2. 적당한 장소에 설치한다(천장=Head)

3. 잘 기록되는지 데이터를 확인한다(Google tag assistant로, 요건 다음에 자세히)

4. 데이터 수집을 시작한다


각 단계별 자세한 설명은 아래에서 확인




1. 나만의 GA 추척코드를 발급받는다(Google analytics에서 공짜로)

1) https://analytics.google.com에 접속한다.


2) 어드민에서 계정의 이름과 웹사이트명, 그리고 내 웹사이트 주소를 입력한다.(속에서 천불이 나지 않으려면 크롬브라우저를 이용하시라)

가짜임

# You have access to 30 accounts. The maximum is 100. 

나에게는 위와 같은 메시지가 나온다. 이미 30개의 계정에 접근이 가능한데, 100개까지만 된다고 한다(100개까지 할 일은 없을테니 무시)


3) Get Tracking ID


4) 약관에 동의하면 발급완료

자 이렇게 나의 Tracking ID가 생겼고(UA-122753515-1, 다른 사람들이 글 쓴거 보면 이거 감추던데, 어차피 F12 눌러서 사이트 소스보기하면 다 나오는데 왜 숨기는지 모르겠다...)


2. 적당한 장소에 설치한다(천장=Head)

1) 아래 Tracking code 복사 후 내 사이트 천장인 Head에 넣기

<!-- Global site tag (gtag.js) - Google Analytics -->

아래부터는 구글분석코드입니다. 라는 주석을 달아 둔 것으로 아무 기능을 안하는 텍스트이다.

<script async src="https://www.googletagmanager.com/gtag/js?id=UA-122753515-1"></script>

<script>

  window.dataLayer = window.dataLayer || [];

  function gtag(){dataLayer.push(arguments);}

  gtag('js', new Date());

  gtag('config', 'UA-122753515-1');

</script>

<script 부터 </script> 까지 요게 잘 들어가 있어야 추척이 가능하다. 혹시 정말 초보가 있을까봐 부연 설명하면 HTML문서 규칙은 <문이 열리면 </이렇게 문을 반드시 닫아야한다. 그래서 <이거와 </는 꼭 쌍이 맞아야 한다.


2) Code를 천장에(Head) 어케 넣나?

개발자가 있으면 넣어주세요 하면 되고.

개발자가 없으면 내가 넣어야한다. 카페24나 가비아로 만든 쇼핑몰은 관리자 페이지에서 GA를 넣을 수 있다.(알아서 Head에 들어감)

빌드형 사이트가 있는 사람은 더 설명안해도 무슨말인지 알 것이다.

정 모르겠으면 크몽에 의뢰하면 된다.(싸다)


3. 잘 기록되는지 데이터를 확인한다

1) 크롬브라우저로 구글에 접속한다.


2) Google tag assistant를 검색한다.


3) 요걸 클릭하고 설치한다

Tag Assistant (by Google) - Chrome Web Store  

https://chrome.google.com/.../tag-assistant...google/kejbdjndbnbjg...      

 평점: 4.1 - ‎1,072표 - ‎무료 - ‎Chrome

Tag Assistant helps to troubleshoot installation of various Google tags including Google Analytics,Google Tag Manager and more.


4) 설치가 완료되면 크롬브라우저 오른쪽 상단 도구 모음에 요놈이 나타난다


5) 내 웹사이트에 가서 요놈을 클릭한다.


6) 그럼 이게 나오는데

Enable 버튼을 누르면 Disable로 바뀌는데,

이놈을 닫고 새로고침하면(F5) 데이터가 들어온다.


정상적으로 데이터가 수신되면 초록색으로 잘 웃는 이런 값이 보인다.(남들 다 숨기길래 왜 숨기는지 모르겠지만 나도 숨긴다)

만약 빨간색으로 슬픈 표정 아이콘이 나온다면 잘 못된 것이니 수정해야한다.


계속.

매거진의 이전글 02 GA는 우리 사이트에서 일어나는 일을 어찌 알까?
브런치는 최신 브라우저에 최적화 되어있습니다. IE chrome safari