Go to Docs (EN)Sign in to Dashboard

Google Tag Manager (GTM)

Suggest Edits

이 문서는 Google Tag Manager (GTM)을 활용하여 핵클을 쉽게 연동하기 위한 방법을 설명합니다.

GTM이란?

Google Tag Manager는 웹사이트나 모바일 앱에서 다양한 추적 코드, 스크립트, 태그를 관리하고 배포하는 과정을 편리하게 해주는 도구입니다. GTM을 사용하면 수동으로 코드를 추가하는 대신 GTM 콘솔에서 웹사이트나 앱의 모든 추적 및 분석 태그를 한 곳에서 관리할 수 있습니다. 이를 통해 개발자가 사이트 코드를 직접 수정하지 않고도 마케팅 및 분석 환경을 세팅할 수 있습니다. 직접 SDK를 연동하는 것 대비하여 로그 수집의 정확도는 떨어질 수 있지만, 이벤트 연동 및 관리의 편의성 때문에 널리 사용되고 있습니다. GTM 템플릿을 이용하면 핵클 SDK 연동 과정을 더욱 쉽게 진행할 수 있습니다.

GTM이 지원되는 환경

Web 환경에서 사용하는 javascript, React sdk를 GTM을 통해 사용하실 수 있습니다.

GTM을 통해 사용할 수 있는 핵클 기능

SDK설치, 이벤트 전송 작업을 GTM을 통해 쉽게 진행할 수 있습니다. 한번 전송된 이벤트는 A/B테스트 결과 해석, 데이터분석, CRM 타겟팅 등에서 공통적으로 사용됩니다. 이벤트가 전송되면, 데이터 분석, CRM 기능을 바로 사용할 수 있습니다. A/B테스트의 경우 사용자 분배 작업이 추가적으로 필요합니다.

GTM으로 핵클 연동하기

  1. GTM 계정 및 컨테이너 생성

    Google Tag Manager에 로그인하고 핵클과 연동할 계정/컨테이너를 선택합니다. 아직 계정/컨테이너가 없는 경우, 새로운 계정 및 컨테이너를 생성합니다. 컨테이너는 웹사이트나 앱에 GTM 태그를 배포하는 단위입니다. 서비스 중이신 도메인이 1개 이상일 경우, 이벤트 데이터 관리를 위해 각 도메인 별 컨테이너를 생성하시는 것을 권장합니다

  2. 템플릿 설치

    1. 핵클 브라우저 SDK 템플릿 (링크)
    2. 작업할 컨테이너 내에서 작업공간 > “템플릿” 메뉴 클릭
    3. “태그 탬플릿”의 “갤러리 검색” 버튼 클릭
    4. “Hackle Browser SDK”를 검색하여 선택, “작업공간에 추가” 버튼 선택 후 추가
d

템플릿 가져오기

  1. 핵클 SDK 설정하기

    먼저, 핵클 대시보드에서 사용할 SDK Key를 확인합니다. 이 SDK key를 아래의 방법으로 삽입해서 SDK 사용 준비를 위한 초기화를 합니다. SDK 키 확인

  • GTM만을 사용하는 경우

    • 태그 관리자 메인 화면에서 “태그” 메뉴 선택
    • “새로만들기” → “태그 구성” → “Hackle Browser SDK” 선택
태그 유형 선택

태그 유형 선택

  • Tag type 항목에서 “init” 선택
  • 사용할 핵클 워크스페이스의 Browser SDK key를 복사하여 SDK Key 항목에 붙여넣기
  • Hackle Client Name은 기본값인 hackleClient을 유지합니다.
  • “트리거”에서 “동의 초기화” 유형 (Consent Initialization - All Pages)을 선택
  • “저장” 버튼 선택 및 태그 이름을 "Hackle Browser SDK"로 저장
태그 설정

태그 설정

📘

잠깐!

이벤트를 직접 전송하는 기능 이외에 핵클이 제공하는 다양한 기능(A/B 테스트, 원격 구성)을 모두 사용하시려면 SDK를 직접 설치하셔야 합니다.

직접 설치하는 방법은 SDK 연동 페이지에서 2. SDK 초기화 섹션의 JavaScript 또는 HTML 탭을 확인하세요.

  • SDK를 직접 설치한 경우

    CDN을 통해 javascript-sdk 스크립트를 HTML에 직접 삽입 하거나 NPM/Yarn 과 같은 패키지 매니저로 SDK를 설치해서 직접 초기화하는 경우 GTM을 통해 추가적인 SDK key 삽입(GTM의 init)을 하지 않아도 됩니다.
    단, 이 경우에는 직접 설치한 SDK를 초기화한 인스턴스를 window 전역변수로 공개해야 합니다.
const hackleClient = Hackle.createInstance("YOUR_BROWSER_SDK_KEY"); // 기존 초기화 코드
window.hackleClient = hackleClient // GTM을 위해 추가 되어야 하는 코드

  1. 이벤트 생성하기

    1. 태그 관리자 메인 화면에서 “태그” 메뉴 선택
    2. “새로만들기” → “태그 구성” → “Hackle Browser SDK” 선택
    3. Tag type 항목에서 “track(send event)” 선택
    4. 추가할 Event Key 이름 입력 (예시: view_home) 혹은 변수 선택하여 GTM에서 사전에 설정된 이벤트를 선택
    5. Event Property가 존재할 경우, 해당 key 및 value를 입력
    6. “트리거”에서 해당 Event Key의 트리거 유형을 선택
    7. “저장” 버튼 선택 및 태그 이름 저장
태그 및 트리거 생정

태그 및 트리거 생정

  1. 테스트 및 게시

    설정한 템플릿과 태그를 테스트한 후, GTM 상에서 정상적으로 작동하는지 확인합니다.
    이후 핵클 대시보드에서 이벤트 전송이 정상적으로 작동하는지 확인합니다. 이벤트 관리 > 실시간 조회 에서 실시간 이벤트 전송을 확인할 수 있습니다. 모든 설정이 완료되면 GTM 컨테이너를 게시하여 변경 사항을 실제 웹사이트나 앱에 적용합니다.

Updated 5 months ago