Google Tag Manager로 로그인 데이터 처리하기

Problem

Google Tag Manager를 이용하여 Google Analytics나 Mixpanel, Amplitude 등의 분석 툴에 로그인 데이터를 보내줘야 할 때가 있습니다.

다른 이벤트의 경우 GTM에서 DOM Element를 이용하여 트리거를 잡아가면 크게 어려움이 없습니다.

 

하지만 로그인의 경우 사용자의 정보가 클라이언트에서 서버로 보냈다가 성공 시 반환되는 과정이 존재합니다.

주로 클라이언트에서 GTM을 이용하기 때문에 "로그인 완료"에 대한 정보를 잡아내기란 쉽지 않습니다.

그렇다고 분석 툴로 데이터를 보내는 작업을 "로그인 완료"만 따로 처리하기는 애매합니다. (가능하긴 하나, Google Tag Manager를 이용하여 이벤트 추적을 하고 있는 경우 GMT 내부에서 모든 이벤트를 관리하는 것이 유지 보수 측면에서 더 좋기 때문입니다.)

 

그렇다면 어떻게 해야 로그인 데이터를 GTM에서 다룰 수 있을까요?

해답은, Data Layer를 이용하면 됩니다.

 

Data Layer란?

Data Layer는 Google Tag Manager로 정보를 전달하기 위해 사용되는 임시 저장소라고 생각하면 편합니다.

이렇게 Google Tag Manager가 이용하는 데에 필요한 정보만 Data Layer에 보내주는 방식을 이용하는 겁니다.

 

로그인 추적하기

그렇다면 로그인 성공했을 때, 사용자의 아이디만 Data Layer에 보내고 싶은 경우를 알아보겠습니다.

 

스크립트 심기 - 직접 넣어줘야 하는 부분

로그인 성공 이벤트를 처리하는 웹사이트 코드에 아래 스크립트를 추가해줍니다.

<script>
  window.dataLayer = window.dataLayer || [];
  window.dataLayer.push({
    'event': 'login',
    'userId': '유저아이디'
  });
</script>

 

이제 Google Tag Manager에서 Data Layer에 들어온 이벤트를 꺼내 쓰면 되는데요,

트리거 - 맞춤 이벤트로 갑니다.

 

GTM 트리거 설정

위와 같이 이벤트 이름을 login으로 설정해줍니다.

(Data Layer에 전달할 때 'event': 'login'으로 전달해줬기에 동일하게 써 주도록 합니다)

 

이제 이 트리거는 Data Layer에 'login'이라는 이름의 데이터가 쌓이면 작동하게 됩니다.

 

변수 사용하기

login과 함께 보낸 userId를 꺼내 쓸 때가 왔습니다.

Google Tag Manager의 변수 - 사용자 정의 변수에서 "새로 만들기"를 클릭해줍니다

데이터 영역 변수를 클릭하고, 우리가 보냈던 이름 'userId'를 적어주시면 됩니다.

데이터 영역 변수에 대한 설명은 다음과 같습니다.

세션 단위가 아니라 window.dataLayer.push가 발생한 페이지 내에서만 잡아낼 수 있다고 파악하면 됩니다.

 

정리

Data Layer를 이용하면, Login 처리에 대한 데이터를 Google Tag Manager로 전송할 수 있습니다.

 

눈치채셨겠지만, 로그인뿐만 아니라 구매 완료, 글 작성 완료 등의 이벤트도 Data Layer를 이용하면 처리하기 용이하겠죠?