카카오 픽셀이란?
카카오 픽셀은 웹사이트에서 일어나는 이벤트를 파악하여 다양한 데이터를 카카오에 전송하고, 이를 통해서 광고 노출 대상 선별과 전환을 최적화하기 위한 용도로 사용하는 스크립트입니다. 이번 포스트에서는 구글 태그매니저(GTM)를 활용하여 카카오 픽셀을 설치하는 방법에 대해 알아보겠습니다.
이에 앞서 태그매니저가 현재 웹사이트에 설치가 되어있지 않다면, 아래 글을 참고하여 먼저 설치를 진행하세요.
카카오 식별값 발급받기
카카오 비즈니스 사이트에서 카카오 픽셀에서 사용하는 식별값인 Track ID를 발급받아야 합니다. 먼저, 아래 링크를 통해 사이트에 접속 후 카카오 계정으로 로그인합니다.
로그인 후 이동한 화면에서 [픽셀 & SDK 만들기] 버튼을 클릭합니다. 그 다음, 픽셀에 대한 이름을 입력하고 [등록] 버튼을 클릭합니다.
등록이 완료되면, 아래와 같이 Track ID를 확인할 수 있는 창이 뜨게 됩니다. 이때 Track ID는 데이터를 전송할 주소로 이해하시면 됩니다.
카카오 픽셀 이벤트 스크립트 확인
이벤트 스크립트를 확인하기 위해, 픽셀 페이지의 목록에서 방금 생성한 픽셀을 클릭합니다.
이동한 픽셀 화면의 하단에 위치한 표에서 [수집 이벤트] 탭을 클릭합니다. 표에는 카카오 픽셀을 통해 수집할 수 있는 이벤트들이 포함되어 있습니다.
일단은 가장 기본적인 이벤트인 [방문]에 대한 데이터를 수집하기 위해 태그 관리 열에 있는 [추가] 버튼을 클릭해 보겠습니다.
태그 추가창에서는 해당 이벤트를 수집하기 위한 코드를 확인할 수 있습니다. 아래의 코드를 복사하고, 본격적으로 태그매니저를 통해 카카오 픽셀을 설치해 보겠습니다.
태그매니저 태그 생성하기
태그매니저에서 [맞춤 HTML] 유형의 태그를 생성한 다음, 아래와 같이 코드를 붙여넣습니다. 이때 붙여넣은 코드 중 '태그값입력' 부분을 아래와 같이 제거하고 [All Pages] 트리거를 연결합니다.
참고. 태그에는 이벤트를 세부적으로 분류하기 위한 구분자를 입력해야 합니다. 구분자가 따로 없다면 아래와 같이 공란으로 바꿔줍니다.
태그를 저장하고 작업한 내용을 [게시]하면 방문 이벤트를 추적하기 위한 코드가 웹사이트에 반영됩니다. 웹사이트에 정상적으로 반영이 됐다면, 픽셀 페이지 하단의 표에 이벤트 수집현황 [수집 중]으로 변경되는 것을 확인할 수 있습니다.
이벤트 추가하기
콘텐츠/상품 조회 이벤트
다음으로는 콘텐츠 조회 데이터를 수집해 보겠습니다. 방문 이벤트 때와 마찬가지로 표에서 [추가] 버튼을 클릭하여, 해당 이벤트에 대한 코드를 확인합니다.
위의 코드를 자세히 보면 앞서 추가한 [방문] 이벤트 코드와 상당히 유사하다는 생각이 드실 겁니다. 그 이유는 이 코드가 카카오픽셀 설치(1~2줄)와 방문 이벤트 전송(4줄)에 대한 코드를 포함하고 있기 때문인데요, 해당 코드들은 [콘텐츠/상품 조회 이벤트]에서는 불필요하므로 제외해야 합니다.
태그매니저에서 [맞춤 HTML] 유형의 태그를 생성한 다음, 아래와 같이 위 내용들을 제외한 코드를 입력합니다.
이 이벤트 코드는 콘텐츠가 조회됐을 때만 실행되어야 합니다. 따라서, 콘텐츠 페이지 URL을 조건으로 추가한 트리거를 아래와 같이 생성하고 이를 태그와 연결합니다.
콘텐츠 이벤트를 위한 태그와 트리거는 생성했지만, 가장 중요한 설정이 하나 남았습니다.
앞서 만든 [방문] 이벤트 태그와 지금 생성하는 [콘텐츠 조회] 이벤트 태그의 트리거 발동 시점은 [페이지 뷰]로 동일합니다. 하지만 [콘텐츠 조회] 이벤트 태그에는 카카오 픽셀을 설치하는 코드가 없으므로, 반드시 [방문] 이벤트 태그보다 늦게 실행되어야 합니다.
참고. 픽셀이 설치가 안된 상태에서 데이터를 전송 코드가 실행되면 에러가 발생하게 되므로, 설치 코드가 포함된 [방문] 태그가 가장 먼저 실행되어야 합니다.
이런 상황에서는 [태그 시퀀싱]이라는 기능을 사용하여 태그 실행 순서를 정의할 수 있습니다. [콘텐츠 조회] 태그의 고급 설정에 있는 이 기능을 사용하여 아래와 같이 [방문] 태그가 실행된 후에 해당 태그가 실행되게끔 설정합니다.
최종적으로 태그 시퀀싱이 적용되면 아래의 순서로 태그가 동작합니다.
- [방문] 태그에서 카카오 픽셀 설치
- [방문] 태그에서 방문 이벤트 전송
- [콘텐츠 조회] 태그에서 콘텐츠 조회 이벤트 전송
위와 같은 방식으로 다른 이벤트를 위한 태그도 동일하게 추가하면 됩니다.
안녕하세요. 현재 카카오톡 방문이벤트 태그를 사이트에 직접 삽입해뒀는데 태그매니저를 활용할 수 있다는걸 지금 알아서 태그매니저를 통해 또 태그 삽입을 하면 혹시 태그 간 충돌이 일어날까요?
안녕하세요, 최성신님!
충돌은 발생하지 않지만, 기존에 수집한 내용과 중복으로 데이터를 수집할 가능성이 매우 높습니다.
따라서, 두 가지 중 한가지 방법을 사용하여 데이터 수집하는 것을 권장드려요 🙂
안녕하세요. 현재 리액트를 사용하여 개발중인데, 리액트는 페이지를 라우팅하다보니 페이지뷰로 트리거를 설정하면 매번 주소가 변경되어도 데이터가 수집이 안되더라고요, 기록변경으로 트리거를 설정해두어도 상관없을까요 ??
안녕하세요, KNamuuu님!
리액트와 같은 SPA로 개발된 웹 사이트의 경우에는 페이지뷰와 기록변경 트리거를 함께 사용하셔야 합니다.
안녕하세요:) 카카오 서비스 중 카카오채널, 카카오톡스토어, 카카오선물하기를 운영하고 있는데요.
방문이벤트 삽입시 각각 채널별로 알고싶은데 어떻게 해야하나요???
안녕하세요, 이현지님!
카카오 픽셀은 타게팅과 광고 효율 최적화 용도로 제공되는 기능이기 때문에, 유입과 관련된 정보는 기본적으로 제공하지 않는 것으로 알고 있습니다.
GA4의 UTM 파라미터를 설정하고 계시다면 이 값을 카카오 픽셀에 실어서 전송은 가능할 것 같으나, 이는 개발작업이 필요하고 일반적인 픽셀의 용도에 맞지 않기 때문에 원하시는대로 데이터가 조회될지는 의문입니다.
채널별 유입에 대한 수치를 확인하고 싶으시다면 GA와 같은 분석이 주 목적인 서비스를 활용하시는 것을 추천드려요 🙂
——————————————–
[참고. GA4와 UTM 파라미터]
GA4를 사용하고 있으시다면 외부 채널의 유입은 UTM 파라미터를 통해 추적할 수 있습니다. 방법은 채널의 버튼 링크에 UTM 파라미터가 붙은 URL을 입력해주시면 되는데요. 이에 대한 자세한 내용은 아래 게시글을 참고해 보세요 🙂
주의하셔야할 점은 URL을 직접 설정할 수 있는 채널에 한해서만 추적이 가능하기 때문에, 채널에서 제공해주는 기능에 따라 유입을 추적하지 못하는 경우도 있을 수 있습니다
안녕하십니까! 콘텐츠 통해 도움을 많이 받고 있습니다.
카카오 픽셀 관련해서 아래 질문이 있습니다!
이 경우 태그 시퀀싱을 맞추기 위한 카카오 픽셀이 gtm에 없는 상태인데, 처음 회원가입 스크립트에 있는 픽셀 설치 및 페이지뷰 코드까지 모두 복사해서 넣어야할까요?
해당 별도 개발된 회원가입 페이지에 카카오 페이지뷰 이벤트는 잡히고 있어 픽셀 설치 코드, 페이지뷰 코드는 잘 작동하고 있는 것 같아 혹시나 중복이 발생될까 궁금합니다!
이 부분은 카페24 자동 연동 시스템이 호출하는 카카오 픽셀 코드의 타이밍이 중요할 것 같은데요.
카페24가 해당 코드의 호출을 늦게해주고, GTM에 설치 코드가 없이 회원가입 이벤트 코드만 실행되는 상태라면 에러가 발생하며 데이터 수집이 안될 가능성이 높습니다.
물론, 이러한 에러가 발생한다면, 이는 브라우저에서 제공해주는 개발자 도구(F12)의 [Console] 탭에서 바로바로 확인이 가능하시구요.
좀더 에러없이 안전하게 작업하고자 하실 경우에는 GTM에도 카카오 픽셀 설치코드를 설치하시고, 픽셀 코드 내에 페이지뷰 전송 코드를 제거해보시는 것을 추천드립니다. ( 설치는 하되 페이지뷰는 중복으로 전송하지 않게끔 )
* 설치코드 내 아래 문장만 삭제
감사합니다!
위 방법으로 진행해보겠습니다. 항상 자세히 말씀주셔서 감사합니다.