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

모든 작업은 WordPress로 구현된 사이트에
GTM4Wordpress 플러그인으로 GTM코드와 이벤트 태그 설정,
dataLayer 푸시 코드 관리를 전제로 하고 있습니다.

✅ 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]
• 여러 케이스가 개발에 따라 트리거가 각각 다르고 그것을 트리거 구성에 포함:

사이트마다 검색 기능을 호출하는 파라미터가 다를 수 있습니다. 워드프레스의 기본 검색 파라미터는 “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>

[Dr.D 작업 노트]

🚧 예시 코드 내 {{교체 사용 필요 변수}}

방문자 유형, 또는 로그인 방법 등을 구분하기 위한 dataLayer 맞춤 변수 {{dlv-visitorType}}나 사용자 등록일자 dataLayer 맞춤 변수 {{dlv-visitorRegistrationDate}}는 사이트별 필요와 용도에 맞게 별도로 GTM 변수를 만들어 사용하는 것입니다.

코드를 그대로 복사해서 사용하면, 당연히 오류가 발생합니다! 해당 부분의 변수 설정을 마치고, 설정한 변수명을 적용하십시오.

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

Kakao 제공 코드 예시:

<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. 흔히 발생하는 오류 예시

[Dr.D 작업 노트]

카카오 비즈니스 가이드 활용시 유의 사항

카카오 픽셀 medthod가 먼저 로드되어 생기는 문제로, 카카오 디벨로퍼 에제 문서를 그대로 사용하면 태그의 로드 순서가 엉켜서 생기는 문제입니다. 설치하고자 하는 사이트의 특성과 환경에 맞춰 코드를 손봐주셔야할 필요가 있습니다.

[Kakao 예제 코드]
https://kakaobusiness.gitbook.io/main/tool/pixel-sdk/install

<script type="text/javascript" charset="UTF-8" src="//t1.daumcdn.net/kas/static/kp.js"></script>
<script type="text/javascript">
     kakaoPixel('Track ID 입력').pageView();
     kakaoPixel('Track ID 입력').viewContent();
</script>

✅ 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 입력