Amplitude
구글 태그 매니저로 앰플리튜드 빠르고 쉽게 설치하기
2024-02-22
By
Minah Lee
Amplitude
구글 태그 매니저로 앰플리튜드 빠르고 쉽게 설치하기
February 22, 2024
By
Minah Lee

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)를 사용하여 동일한 데이터를 앰플리튜드로 전송할 수 있습니다. 그렇기 때문에 단 몇 시간 만에 기존에 사용하던 데이터를 앰플리튜드로 전송할 수 있으며, 구글 애널리틱스 및 다른 플랫폼을 계속 사용하면서도 앰플리튜드를 통한 보다 심화된 분석을 진행할 수 있습니다.

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

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

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

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

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

  1. 구글 태그 매니저에 로그인 합니다.
  2. [템플릿] 탭을 클릭 -> [갤러리 검색]을 통해 앰플리튜드 태그 매니저 템플릿을 가져와서 추가합니다.
  1. ‘Amplitude Analytics Browser SDK’를 찾아 클릭한 후, [작업공간에 추가]를 클릭하여 추가합니다.
  1. 태그 템플릿 추가가 완료되었다면, [태그] 탭으로 이동합니다.

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

  1. [새로 만들기]를 클릭하여 태그를 추가합니다.
  1. ‘태그 구성’ 박스를 클릭한 후, ‘태그 유형 선택’에서 ‘Amplitude Analytics Browser SDK’를 선택합니다.
  1.  ‘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’ 혹은 유저가 쿠키 설정에 동의할 때까지 기다리고 싶다면 이와 유사한 커스텀 트리거를 설정합니다.
  1. 태그 이름을 지정하고, [저장]을 클릭하여 저장합니다.
  1. ‘Initialize (init)’ 이외에 추가로 필요한 태그 타입을 추가합니다. 주요 태그 타입에 대한 설명은 아래와 같습니다.
Tag Type 설명
Initialize (init) 이 태그는 페이지에서 앰플리튜드를 세팅합니다. Initialize 태그는 하나만 필요하며, 트리거 설정 시 ‘All Pages’ 혹은 이와 유사하게 모든 페이지가 로드될 때 항상 실행되는 트리거가 있어야 합니다.
Track Event (track) 이 태그는 앰플리튜드에 이벤트를 전송합니다. 이벤트는 버튼 클릭, 구매, 회원 가입 등 유저가 프로덕트 내에서 수행하는 행동을 의미합니다.
Set User Properties (identify) 이 태그는 페이지를 보는 유저에 대한 속성을 설정합니다. 예를 들어 유료 또는 무료 요금제 사용 여부를 나타내는 유저 속성을 설정할 수 있습니다.
Set User ID (setUserId) 이 태그는 페이지를 보는 유저 ID를 설정합니다. 유저 ID를 설정하면 여러 디바이스에서 유저 추적할 수 있습니다. 유저 로그인하는 등 유저를 고유하게 식별할 수 있는 경우 이 태그를 트리거 하세요.
Revenue 유저가 프로덕트 내에서 구매 등으로 발생시킨 수익을 트래킹합니다. Revenue Options에서 직접 각 제품의 ID, 가격 등을 설정하거나, GTM 변수로 객체를 추가할 수 있습니다.
  1. 필요한 태그를 저장했다면 [미리보기]를 클릭해서 설치한 태그가 트리거에 따라 실제로 잘 작동하는지, 그리고 앰플리튜드에서 데이터를 잘 확인할 수 있는지 디버깅합니다.
  • 디버깅 하고 싶은 웹사이트 URL을 입력합니다.
  • 연결된 웹사이트 하단에 태그 어시스턴트(Tag Assistant)가 연결되었다고 뜹니다.
  • 웹사이트에서 버튼 클릭, 스크롤 등 설정한 트리거를 시도해본 후 태그 어시스턴트에 잘 기록되는지, 태그가 잘 실행되는지 ‘Tags Fired’ 에서 확인합니다.
보다 자세한 내용은 앰플리튜드의 개발 문서에서 확인할 수 있습니다.

- Browser SDK
- Marketing Analytics Browser

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

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

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

Minah Lee
Product Marketing Manager
AB180에서 프로덕트 마케팅을 담당하고 있습니다. AB180의 성장을 위해 콘텐츠 제작과 다양한 마케팅 캠페인을 진행하며 팀, 고객 및 파트너와 협력합니다.
더 알아보기
딜라이트룸, “글로벌 1위 알람 앱의 데이터 기반 마케팅 & 프로덕트 전략”
전세계 1위 알람 앱 '알라미'를 서비스하는 딜라이트룸을 인터뷰했습니다. 딜라이트룸이 어떻게 데이터 기반으로 똑똑하게 일하고 있는지, 마테크 솔루션을 프로덕트 개발에 어떻게 활용하고 있는지 자세한 이야기를 들어보았습니다.
성공 사례 보러가기
라이너, "프로모션 캠페인 자동화를 통해 매출 80% 상승 효과를 얻을 수 있었습니다."
AB180 그로스해킹 인터뷰를 통해 이번에 만나뵌 분은 웹 형광펜 서비스인 라이너(LINER)를 서비스하는 아우름플래닛의 김진우 대표님입니다. 전세계에서 백만 명 이상이 사용해 우리나라보다 오히려 글로벌에서 훨씬 더 유명한 서비스라고 할 수 있습니다.
성공 사례 보러가기
15,000명 이상의 업계 관계자들이 구독하고 있는 뉴스레터를 통해 업계 최신 트렌드를 가장 먼저 만나보세요.
응답이 제출되었습니다. 감사합니다.
잘못된 메일주소입니다.
주식회사 에이비일팔공
서울특별시 서초구 강남대로 61길 17, 3층, 4층 (서초동)
사업자등록번호: 550-88-00196
대표이사: 남성필
Copyright ⓒ 2023 AB180 Inc. All Rights Reserved.
개인정보 처리방침