가이드 문서
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이 지원되는 환경

PC / Mobile Web 환경에서 사용하실 수 있습니다. 카페24 같은 쇼핑몰이나 하이브리드 앱의 웹 화면도 지원됩니다. 핵클 javascript 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. “저장” 버튼 선택 및 태그 이름 저장

GTM을 활용한 간편한 A/B 테스트

GTM을 이용하여 개발자 없이도 A/B 테스트를 간편하게 진행할 수 있습니다.

📘

잠깐!

GTM을 이용한 간편한 A/B 테스트는 현재 일부 고객사 대상으로 운영중입니다. GTM을 이용해서 A/B 테스트를 하고 싶은데 Tag type 에 Experiment가 보이지 않거나 도움이 필요하면 핵클팀에 연락해주세요!

A/B 테스트 - 텍스트 실험

  1. 태그 관리자 메인 화면에서 “태그” 메뉴 선택
  2. “새로만들기” → “태그 구성” → “Hackle Browser SDK” 선택
  3. Tag type 항목에서 “Experiment - Text” 선택
  4. 추가할 실험 Key 입력
  5. 실험 대상이 될 요소에 대한 Selector 입력(입력 방법은 하단에 Selector 섹션 참조)
  6. Variation 필드를 이용해 각 분배 그룹에 원하는 텍스트 입력

A/B 테스트 - 이미지 실험

  1. 태그 관리자 메인 화면에서 "태그" 메뉴 선택
  2. “새로만들기” → “태그 구성” → “Hackle Browser SDK” 선택
  3. Tag type 항목에서 “Experiment - Image” 선택
  4. 추가할 실험 Key 입력
  5. 실험 대상이 될 요소에 대한 Selector 입력(입력 방법은 하단에 Selector 섹션 참조)
  6. Variation 필드를 이용해 각 분배 그룹에 원하는 이미지 URL 입력
  7. 저장

Selector

A 그룹으로 분배 되었을 때와 B 그룹으로 분배 되었을 때(C, D, E, F ....) 다른 결과를 출력하기 위해서 A/B 테스트 대상이 되는 요소(HTML Element)를 선택해야 합니다. Selector는 해당 요소의 위치를 정확하게 알수있는 문자열입니다. 아래는 Selector를 얻을 수 있는 방법입니다.

  1. 크롬(Chrome) 브라우저에서 실험 대상이 되는 요소에 마우스 포인트를 올려놓고 우클릭하여 검사 메뉴를 선택해서 개발자도구를 연다.
  2. 개발자도구 - Elements 탭에서 해당 요소의 텍스트(이미지) 위에서 우클릭 - Copy - Copy selector 를 선택한다.
  3. Ctrl + V 를 누르면 복사된 문자열을 붙여넣기 할 수 있다.

테스트 및 게시

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

Updated 11 days ago