Google Tag Manager(GTM)를 이용해 앰플리튜드(Amplitude)를 쉽게 설치하고 활용하는 방법을 소개합니다. GTM을 활용하면 개발자의 도움 없이도 앰플리튜드를 웹사이트에 쉽게 설치하고 관리할 수 있습니다. 앰플리튜드의 GTM 템플릿 및 GTM Server-Side 템플릿으로 앰플리튜드 SDK를 빠르게 설치하고 앰플리튜드를 마음껏 활용해 보세요.

Google Tag Manager(GTM)

Google 태그 매니저는 웹사이트 또는 모바일 앱에서 코드 및 태그라고 통칭되는 관련 코드 조각을 쉽고 빠르게 업데이트할 수 있는 태그 관리 시스템입니다. 개발자의 도움 없이도 태그 코드를 쉽게 설치하고 효율적으로 관리할 수 있습니다. 구글 태그 매니저를 통해 우리 웹사이트에 구글 애널리틱스 및 앰플리튜드와 같은 유저 행동/프로덕트 분석 툴을 설치하고 웹사이트에서 일어나는 이벤트에 대한 분석과 측정을 시작할 수 있습니다.

앰플리튜드(Amplitude)

앰플리튜드는 웹+앱 고객 행동 데이터를 기반으로 코호트 분석, 차트, 실험 기능 등을 통해 깊이 있는 인사이트를 제공함으로써 전환율과 인게이지먼트를 높이고, 나아가 리텐션을 개선하는 프로덕트 개발 전략 수립을 돕는 세계 최고의 프로덕트 분석 솔루션입니다.

구글 태그 매니저로 앰플리튜드 설치하기

앰플리튜드의 구글 태그 매니저 템플릿 공개

구글(Google)에서 무료로 제공하는 태그 매니저(Google 태그 매니저 또는 GTM)는 전 세계에서 가장 많이 사용하는 태그 관리 플랫폼입니다. 대부분 구글 태그 매니저(GTM)를 활용하여 구글 애널리틱스를 구현하고 활용합니다. 이미 많은 조직의 마케팅 팀에서 구글 애널리틱스를 잘 활용하여 고객의 행동을 분석하고 있지만, 구글 애널리틱스만으로 프로덕트를 분석하기엔 한계가 존재합니다. 앞서가는 조직은 마케팅 팀과 프로덕트 팀을 통합하여 고객 행동 분석 이상의 프로덕트 분석으로 확장해야 합니다. 즉, 고객 유입 데이터와 고객의 프로덕트 내의 행동 데이터를 함께 확인할 때 진정한 시너지 효과를 얻을 수 있습니다. 실제로 이미 많은 조직에서 앰플리튜드의 고급 디지털 최적화 기능을 통해 구글 애널리틱스에서 수행 중인 작업을 보강하고 있습니다.

앰플리튜드는 이미 구글 애널리틱스를 활용하고 있는 고객들이 앰플리튜드로 데이터를 쉽게 전송할 수 있도록 앰플리튜드 자바 스크립트 템플릿을 제공하고 있습니다. 이 템플릿을 통해 구글 애널리틱스를 계속 사용하면서도 앰플리튜드에서 분석을 보다 심층적으로 수행할 수 있습니다. 또한, Tealium, Segment 등과 같은 다른 데이터 수집 옵션 및 앰플리튜드로 데이터를 전송하기 위해 사용하는 SDK를 보완하기도 합니다.

GTM 사용 준비하기

우선 구글 태그 매니저(GTM)에 대해 알아보겠습니다. GTM은 간단하게 스크립트 및 이벤트 설치를 도와주는 무료 플랫폼으로, 태그를 효율적으로 추가 및 관리할 수 있습니다.

구글 태그 매니저 구성 요소 이해하기 

- 태그: 데이터를 전송하는 코드를 의미합니다. 예를 들어, 구글 애즈 전환 추적 태그가 있습니다.
- 트리거: 태그를 실행하도록 만드는 특정 이벤트를 의미합니다. 트리거는 웹사이트 및 앱에서 양식 제출, 버튼 클릭, 페이지뷰와 같은 특정 이벤트를 수신합니다. 특정 유형의 이벤트가 감지되면 트리거가 태그를 실행하도록 알려줍니다. 태그가 실행되려면 태그에 1개 이상의 트리거가 있어야 합니다.
- 변수: 변수는 변경되는 값을 나타내기 위해 사용할 수 있는 기호입니다. 구글 태그 매니저의 변수도 동일한 기능을 수행합니다. 태그 매니저의 변수는 트리거와 태그 모두에서 사용됩니다.

GTM으로 앰플리튜드를 설치하여 사용하면 좋은 이유

1. 기존 데이터 레이어 및 객체를 그대로 사용하여 쉽고 빠르게 앰플리튜드로 데이터 전송 가능

앰플리튜드 자바 스크립트 템플릿을 활용하면 구글 애널리틱스 및 다른 플랫폼을 위해 구글 태그 매니저에 구축해 놓은 데이터 레이어(data layer) 및 객체(object)를 사용하여 동일한 데이터를 앰플리튜드로 전송할 수 있습니다. 그렇기 때문에 단 몇 시간 만에 기존에 사용하던 데이터를 앰플리튜드로 전송할 수 있으며, 구글 애널리틱스 및 다른 플랫폼을 계속 사용하면서도 앰플리튜드를 통한 보다 심화된 분석을 진행할 수 있습니다.

2. 세계 최고의 구글 태그 매니저 전문가 시모 아하바(Simo Ahava)와의 협업

앰플리튜드의 GTM 템플릿은 세계 최고의 GTM 전문가인 Simo Ahava와의 협업을 통해 템플릿을 구축했습니다. 다만, 일반적으로 구글 태그 매니저는 모바일 앱에는 사용되지 않기 때문에, 웹뷰를 통해 구글 태그 매니저를 사용할 수 있는 웹사이트와 앱에만 적용된다는 점을 염두해야 합니다.

앰플리튜드 GTM 템플릿은 GTM 템플릿 갤러리에서 확인할 수 있으며, 템플릿을 시작하는 데 필요한 모든 문서는 템플릿 라이브러리에서 찾을 수 있습니다.

앰플리튜드 구글 태그 매니저 템플릿 설치 방법

* 본 포스트는 클라이언트 사이드(client-side) 템플릿만 다루고 있습니다.

1. 구글 태그 매니저에 로그인 합니다.
2. [템플릿] 탭을 클릭 -> [갤러리 검색]을 통해 앰플리튜드 태그 매니저 템플릿을 가져와서 추가합니다.

3. ‘Amplitude Analytics Browser SDK’를 찾아 클릭한 후, [작업공간에 추가]를 클릭하여 추가합니다.

4. 태그 템플릿 추가가 완료되었다면, [태그] 탭으로 이동합니다.

GTM 앰플리튜드 태그 생성 방법

1. [새로 만들기]를 클릭하여 태그를 추가합니다.

2. ‘태그 구성’ 박스를 클릭한 후, ‘태그 유형 선택’에서 ‘Amplitude Analytics Browser SDK’를 선택합니다.

3.  ‘Initialize (init)’ 태그를 설치합니다.

• ‘Initialize (init)’는 가장 기본적인 태그로, 웹사이트에 앰플리튜드를 셋팅하는 태그인 ‘Initialize (init)’을 아래와 같이 추가합니다. ‘Initialize (init)’는 가장 중요한 태그로, 이 태그가 있어야만 다른 앰플리튜드 태그들이 작동합니다. 
• ‘API Key’를 앰플리튜드 대시보드에서 확인해서 기입합니다.

API Key 확인하기

앰플리튜드에 로그인 한 후 오른쪽 최상단에서 셋팅 아이콘 클릭 -> [Organization Settings] -> [Projects]에서 필요한 프로젝트 클릭 후 [General] 탭에서 API Key를 확인할 수 있습니다.
*Admin 혹은 Manager 권한을 가진 경우에만 확인할 수 있습니다.

• ‘EU Data Residency’를 체크하면 EU 데이터 레지던시 서버 존을 사용하도록 설정할 수 있습니다.
• 디폴트 앰플리튜드 이벤트를 트래킹하고자 한다면, ‘Track default Amplitude events’에 체크하고, 필요한 디폴트 이벤트 트래킹 옵션을 설정합니다.
• ‘Configuration’ 에서 ‘Use default values’로 디폴트 값을 사용할 수도 있고, ‘Set configuration manually’으로 수동으로 설정할 수도 있습니다. 혹은 {{Click Element}} 등과 같은 이미 설정된 GTM 변수를 활용할 수도 있습니다.
• 앰플리튜드의 Brower SDK 문서에서 제공하고 있는 Configuration 파라미터를 확인할 수 있습니다.

• 트리거는 ‘All Pages’ 혹은 유저가 쿠키 설정에 동의할 때까지 기다리고 싶다면 이와 유사한 커스텀 트리거를 설정합니다.

4. 태그 이름을 지정하고, [저장]을 클릭하여 저장합니다.

5. ‘Initialize (init)’ 이외에 추가로 필요한 태그 타입을 추가합니다. 주요 태그 타입에 대한 설명은 아래와 같습니다.

6. 필요한 태그를 저장했다면 [미리보기]를 클릭해서 설치한 태그가 트리거에 따라 실제로 잘 작동하는지, 그리고 앰플리튜드에서 데이터를 잘 확인할 수 있는지 디버깅합니다.

• 디버깅 하고 싶은 웹사이트 URL을 입력합니다.
• 연결된 웹사이트 하단에 태그 어시스턴트(Tag Assistant)가 연결되었다고 뜹니다.

• 웹사이트에서 버튼 클릭, 스크롤 등 설정한 트리거를 시도해본 후 태그 어시스턴트에 잘 기록되는지, 태그가 잘 실행되는지 ‘Tags Fired’ 에서 확인합니다.

보다 자세한 내용은 앰플리튜드의 개발 문서에서 확인할 수 있습니다.

- Browser SDK
- Marketing Analytics Browser

기존에 구글 태그 매니저를 통해 구글 애널리틱스를 사용하고 있었다면, 앰플리튜드를 앞서 살펴본 것과 같이 간편하게 설치하고 데이터를 전송할 수 있습니다. 앰플리튜드는 웹사이트를 통해 무료로 회원가입 후 바로 대시보드에 접근하여 사용할 수 있습니다. 유저 행동 데이터 기반으로 지금 바로 성장을 직접 경험 해보세요.

👉무료로 앰플리튜드 회원 가입하기

👉앰플리튜드 도입 및 활용 문의하기