앰플리튜드(Amplitude) #1 설치와 이벤트 세팅하기 with GTM

 

본 글에서는 데이터 분석 툴인 앰플리튜드(Amplitude)를 구글 태그 매니저, 즉 GTM(Google Tag Manager)으로 설치하고 이벤트 전송하는 기본 방법에 대해 설명합니다. 따라서 GTM 환경에 대한 이해와 사용방법을 알고 있는 분, GTM을 이용해서 설치하고자 하는 분께서 읽으셔야 도움이 됩니다. 그렇지 않은 분들을 위해서도 아주 기특한 녀석인 GTM에 대한 설명은 따로 포스팅해보겠습니다. (그게 언제가 될 지는 장담할 수 없습ㄴ..)

---

 

1. 가입하기 (대시보드 만들기)

홈페이지 메인에서 [ Get Started ] 버튼을 눌러서 회원가입을 진행한다.

회원가입 마지막 단계에서, 가입 후 뭘 할 거냐고 묻는 질문에는 아래와 같이 각자의 상황에 맞는 걸 선택하면 된다.

 

* Send existing data into amplitude: 기존 다른 데이터 소스에서 가져올 게 있는 경우

* Plan and instrumen new events: 그냥 빈 대시보드로 시작하고 싶은 경우 -> 가입 후 깔끔하게 시작하는 환경을 원하면 선택

* Explore product demo: 데모 값으로 채워진 대시보드를 보고 싶은 경우?.. (안 눌러봐서 모름)

 

2. SDK 설치 > JavaScript SDK 선택 

대시보드 자체는 만들어졌다. 하지만 대시보드에서 보여줄 데이터는 아직 아무 것도 없다. 따라서, 앰플리튜드의 정보를 우리 서비스에 설치해야 한다. 우리 서비스에서 앰플리튜드로 데이터를 보내기 위해 연결 다리 놔주는 작업이라고 생각하면 된다.

 

왼쪽 메뉴에서 Setup Data Source를 누르면 위와 같은 화면이 나온다.

본 글은 GTM으로 설치하는 방법을 설명하는 글이기 때문에 JavaScript SDK를 선택한다.

 

(GTM이라는 툴 자체를 처음 듣거나 잘 모르겠다면 이 단계에서 개발자에게 도움을 요청하면 된다.
개발자가 알아서 설치할 수 있는 적합한 SDK를 선택하여 진행할 것이다.)

 

(SDK는 해당 소프트웨어에서 제공하는, 설치를 위한 키트라고 간단하게 이해하면 된다.)

 

3. SDK 설치 > JavaScript SDK 선택 > 코드 복사

직접 긁거나 우측에 있는 버튼을 눌러서 클립보드에 복사한다.

 

4. GTM > 태그 새로 만들기

아래와 같이 태그를 새로 만들고 저장한다.

• 태그 유형: 맞춤 HTML
• HTML: 방금 전 복사했던 SDK 코드 붙여넣기
• 트리거: All Pages

 

여기까지 만들고 컨테이너를 제출해도 설치 자체는 끝난다. 하지만 이렇게 했을 때 우리가 확인할 수 있는 데이터는 여전히 없다. 설치만 했을 뿐 이 환경을 통해 서비스에서 앰플리튜드로 보내줄 이벤트는 정의하지 않았기 때문이다. 그러니 최소 1개의 이벤트를 추가한 후, 한 번에 제출하는 것이 의미 있는 버전 기록이 될 듯하다.

 

5-1. 이벤트 정의_트리거 만들기

원하는 트리거 포인트로 이벤트를 정의한다. 간략히 설명하자면 트리거를 정의한다는 건, 원하는 지점에서 이벤트가 발생해 값으로 잡힐 수 있도록 하는 것이다. (GTM 이해가 있는 분 대상의 글이기 때문에 자세한 설명은 스킵합니다.)

 

5-2. 이벤트 정의_태그 만들기

트리거를 통해 서비스 내에서 발생한 값을 그대로 두면 그 어디에서도 확인할 수 없다. 유저의 행동 값을 의미있는 데이터로써 앰플리튜드나 GA와 같은 곳으로 보내주는 역할이 바로 태그다. 아마 대부분 GTM 통해서 GA로 많이 보냈을텐데 이번엔 앰플리튜드로 설정해주면 된다.

다만, 태그 유형으로 앰플리튜드가 따로 있는 게 아니라 '맞춤 HTML' 을 선택하는 게 기본이라고 생각하면 된다.

• 태그 유형: 맞춤 HTML
• HTML: 아래 코드 블록에서 설명
• 트리거 실행: 5-1에서 정의한 각자의 트리거

 

(참고로 태그명과 트리거명은 정말 자유입니다... 딱히 그렇다 할 명명 규칙의 스탠다드도 없어 보이는 듯. 회사에서는 제가 대부분의 데이터 세팅을 맡아 하기 때문에 그냥 제가 편한 규칙으로 정하고 정리해서 공유하고 있어요)

 

logEvent 안에 앰플리튜드로 보낼 이벤트명을 입력한다.

<!-- 기본:: 이벤트만 보낼 때 -->
<script>
  amplitude.getInstance().logEvent('이벤트명')
</script>

 

그런데 필요에 따라 이벤트명과 함께 추가 정보를 함께 보내고 싶을 때가 있을 것이다. 그럴 땐 이벤트와 함께 속성 정보를 같이 정의해서 보내주면 되는데, 속성이라 함은 GA로 보낼 때 태그에서의 매개변수와 같은 거라고 이해하면 된다. (더 구버전 GA로는, 이벤트의 라벨처럼)

 

 

이 개념을 이해하고 있다면 스킵해도 됩니다.

---

GA로 이벤트를 보낼 때 매개변수 설정 예시

예를 들어,

특정 페이지에서 방문자가 하는 모든 클릭 액션을 수집하는데(VisitorClick) 그 중 SNS 아이콘을 클릭한 값을 구분하고(sns_icon) 또 그 중에서도 인스타그램 아이콘(instagram)을 클릭한 액션까지 자세하게 정의해서 이벤트로 정의할 수 있다. 이렇게 정의를 하면 수집되는 데이터는 아래와 같은 구조로 확인할 수 있을 것이다.

이벤트 이름	매개변수 이름	매개변수 값	수치
visitorClick			42
	sns_icon	instagram	20
	sns_icon	facebook	12
			...

---

 

아무튼, 다시 앰플리튜드로 돌아와서 특정 이벤트에 대해 추가 정보를 함께 보내주고 싶으면 아래와 같은 형태로 HTML 코드를 작성한다.

<!-- 단일 속성 정보를 같이 보낼 때 -->
<script>
  amplitude.getInstance().logEvent('이벤트명', {
     속성: 속성 값
  });
</script>

여러 개의 속성 값을 보낼 때는 간단하게 콤마로 구분해주면 된다.

<!-- 여러 개의 속성 정보를 같이 보낼 때 -->
<script>
  amplitude.getInstance().logEvent('이벤트명', {
     속성: 속성 값,
     속성: 속성 값
  });
</script>

 

원하는 이벤트 수만큼 위와 같은 태그, 트리거를 정의하여 추가한다.

 

6. GTM 컨테이너 제출 (혹은 미리보기 실행)

GTM에서 이벤트 정의/추가가 끝났다면, 이런 변경사항이 반영될 수 있도록 컨테이너를 제출하면 된다. 

 

그런데 제출하지 않고도 미리보기로 열었을 때도 실시간으로 확인할 수 있는 데이터는 전송된다. 이건 GA에서도 마찬가지이기 때문에 다들 알 거라고 생각한다. (물론 당연히 디버그 모드를 실행한 나의 행동 이벤트에 한해) 따라서 단순 테스트는 디버그 모드 먼저 활용해도 좋다.

 

7. 앰플리튜드에서 수집되는 데이터 확인_Analytics > User Look-Up

앰플리튜드 대시보드로 전송되는 데이터가 생기기 시작하면, 앰플리튜드 접속 시 위 스크린샷처럼 왼쪽 메뉴도 생기고 뭔가 대시보드스러운 화면(?)으로 변해있을 것이다. User Look-Up 메뉴를 누르면 이벤트로 정의한 유저의 이벤트가 발생할 때마다 데이터로 쌓이는 것을 확인할 수 있다. 

 

대시보드는 Analytics 화면이 기본인데, Data로 전환하면

 

수집되고 있는 데이터 별로 리스트를 확인할 수도 있다.

 

 

여기까지 따라하며 무리 없이 데이터를 확인했다면 기본적인 이벤트 설정까지는 완벽하게 진행된 것이다! 👏👏👏

다음 포스팅부터는 이렇게 쌓이는 날 것의 데이터를 어떻게 잘 필터링해서 보면 되는지, 원하는 목적으로 데이터를 보려면 어떻게 해야 하는지 등에 대해 작성할 예정이다.

 

---

이해가 잘 될 수 있도록 설명해보았으나, 개인마다 툴을 다루는 이해 수준이나 서비스/데이터 환경이 천차만별이기 때문에 포스팅 내용과 조금만 달라도 길을 잃을 수가 있어요... (저도 처음에 그랬으니까요) 그렇기에 해당 글에서 설명하는 내용대로 하시다가 궁금한 점이 생기시면 언제든 댓글로 달아주세요. 늦지 않게, 텍스트 상으로 질문자 님의 상황을 이해하여 도움 줄 수 있는 부분까지는 최대한 답변 달아볼게요. 모두 화이팅입니다!