카카오픽셀 GTM 설치 진행 & 점검 포인트 메모

✅ 1. Kakao Pixel 기본 설치

▶ 설치 시 검토 가정:

• GTM (Google Tag Manager)을 통해 추적처리
• 다음의 자리에 생성:
  • 타겟 이름: Kakao Pixel - Base
  • 타겟 유형: Custom HTML
  • 트리거: All Pages

<script type="text/javascript">
  !function(a,b,c,d,e){a[e]=a[e]||function(){(a[e].q=a[e].q||[]).push(arguments)};
  var f=b.createElement(c);f.async=!0;f.src='//t1.daumcdn.net/adfit/static/kp.js';
  var g=b.getElementsByTagName(c)[0];g.parentNode.insertBefore(f,g)}(window,document,'script','kakaoPixel');
  kakaoPixel('your_tracking_id', 'pageView');
</script>

주의: kakaoPixel(‘…’).pageView() 가 아닌, kakaoPixel(‘…’, ‘pageView’)와 같이 queue로 올바른 형식을 사용\uud558세요.

✅ 2. 개발 기본 트리거 세트

▶ 직접 클릭(본문) 이벤트:

• 타겟 이름: Kakao Pixel - [EventName]
• 여러 케이스가 개발에 따라 트리거가 각각 다르고 그것을 트리거 구성에 포함:

테스트 본문 유형	트리거 조건
카카오\uud1a1 참석 버튼	Click ID or CSS Selector 지정
연결 링크(Kakao Channel 이동)	해당 a[href] 클릭 트리거
로그인 성공	Data Layer Event: gtm4wp.userLoggedIn
검색 결과 전송	URL 파라미터: s 사용

사이트마다 검색 기능을 호출하는 파라미터가 다를 수 있습니다. 워드프레스의 기본 검색 파라미터는 “s”로 설정되어 이 값을 사용하는 것이고, 다른 검색 파라미터 (ex. “q”, “quer”, “search”, “term” 등)가 적용되어 있을 경우 해당 파라미터 값을 사용합니다.

gtm4wp.userLoggedIn 이벤트는 GTM4Wordpress 플러그인에서 처리해주는 custom event이고, 만약 다른 플러그인을 사용하거나 태그 관리 플러그인을 사용하지 않는 경우는, 사이트 개발자에게 요청해서 다양한 명칭의 맞춤 이벤트(ex. user_login, login_complete, 등)를 푸시해달라고 요청해서 사용하게 됩니다.

▶ 예제 – Kakao 상담 이벤트 태그

<script>
  kakaoPixel('your_tracking_id').track('Consult');
</script>

✅ 3. 검색 결과 테크

• 검색 페이지에서 URL 파라미터 ?s=검색어 를 감지하여 keyword 를 수집:

<script>
  var params = new URLSearchParams(window.location.search);
  var keyword = params.get('s') || '';

  if (keyword) {
    kakaoPixel('your_tracking_id').search({
      keyword: keyword,
      tag: '사이트내 검색'
    });
  }
</script>

주의: const 대신 var 사용 :: Google Tag Manager는 하위 호환을 위해 최신 버전의 자바스크립트가 아닌 오래된 범용 스크립트 구문을 사용합니다.

---

✅ 4. 로그인 이벤트 찾기 (그리고 Hotjar 연동)

• gtm4wp.userLoggedIn 이벤트 파일로 수집되는 dataLayer 값을 활용:
• 예제: visitorId, visitorEmailHash, visitorType 등

GA4 태그 (user_login)

• 이벤트명: user_login
• 사용자 속성: user_type, user_id
• 이벤트 매개변수: login_method, email_hash, registration_date

Hotjar identify 태그 예시:

<script>
var userId = '{{dlv-visitorId}}' || null;
window.hj('identify', userId, {
  'User type': '{{dlv-visitorType}}',
  'Registration date': '{{dlv-visitorRegistrationDate}}'
});
</script>

---

✅ 5. Kakao Pixel 로그인 타겟 구성

Kakao 제공 코드 예시:

오류 메시지	이유	가정
kakaoPixel is not defined	script 로드 전 호출 : 메소드 호출 순서의 문제	queue 방식(kakaoPixel('id', 'event')) 활용
your_user_id is not defined	예제 태그 내 변수 미정의 : 태그 탬플릿을 그대로 복사해서 입력하는 경우	{{dlv-visitorId}} 포함
createAddChannelButton 오류	SDK 로딩 순서 문제	예제 코드 사용시 불필요한 코드를 이곳저곳에 넣어보는 경우가 있습니다.

<script type="text/javascript" src="//t1.daumcdn.net/kas/static/kp.js"></script>
<script type="text/javascript">
  kakaoPixel('your_tracking_id').login();
  kakaoPixel('your_tracking_id').login('카카오 로그인');
</script>

커스텀 로그인 방식 구분 예시 (GTM 변수 활용)

<script type="text/javascript">
  var loginMethod = '{{referrer_path_login}}' || 'unknown';
  kakaoPixel('your_tracking_id').login(loginMethod);
</script>

---

✅ 6. 흔히 발생하는 오류 예시

---

✅ 7. 수행 검사 & QA 창설

• GTM Preview Mode 로 모드 확인
• Kakao Pixel Report : 비즈도구 > 픽셀 & SDK > 픽셀 & SDK 정보 > 픽셀 & SDK 연동현황 → 수집 이벤트 탭

• GA4 DebugView 로 텍스트 전송 확인
• 웹 페이지 이벤트 발행 여부 검사 : Chrome DevTools
  • Console 탭 > kakaoPixel 명령 직접 입력 ƒ () { (b[d].q = b[d].q || []).push(arguments) }
  • Network 탭 → 필터에 kp 또는 daumcdn 입력