채널톡과 같은 API는 웹사이트 고유의 요소가 아니기 때문에 일반적인 방법으로 해당 요소에 대한 접근이 불가하고 이로 인해 전환, 이벤트 추적 등이 불가합니다. 하지만, 채널톡의 경우 API임에도 불구하고 LauncherStyled 클래스에 대한 접근을 허가하여 해당 채널톡을 열기 버튼을 활용하여 추적하는 것이 가능하였다고 하네요.
최근 이러한 클래스를 활용하여 스타일의 변경을 막고자 채널톡에서 아래와 같이 해당 모듈을 쉐도우 돔의 옵션을 활용하여 자바스크립트를 통한 해당 클래스에 대한 접근이 불가능하도록 업데이트를 하면서 기존에 챗을 열기 위한 버튼을 자바스크립트를 통해 접근하는 것이 불가능해졌고 해당 클래스는 외부에서 더 이상 활용 할 수 없게 되었습니다.
https://update-kr.channel.io/93d42f74-9bcd-4eca-a5ab-e514c2fa3340
채널톡 모듈화 공지
기존 채널톡 플러그인이 고객사 사이트 내부 스타일의 영향을 받아 채널톡 버튼 스타일이 깨지는 등의 이슈가 있었습니다.
update-kr.channel.io
해결방법
남은 방법은 채널톡에서 이벤트를 제공한다면 이를 활용하는 방법뿐인데요. 다행히 채널톡은 제공하는 이벤트가 있네요ㅎㅎ
채널톡 공식 페이지에서 아래와 같이 제공되는 이벤트 목록의 확인 가능합니다 (SDK - Javascript -> API 레퍼런스 -> Chnnell()).
구현하기
수동태그
아래 태그를 공통된 <head> 태그 안에 넣습니다.
▶ UA
<script>
gtag('event', 'click', {
event_category: 'channel_talk_open'
});
</script>▶ GA4
<script>
ChannelIO('onShowMessenger', gtag('event', 'channel_talk_open'))
</script>구글 태그관리자
태그관리자는 데이터레이어에 이벤트를 생성하고 이를 활용하는 방법으로 구현 가능합니다.
▶ 데이터 레이어 이벤트 생성
태그관리자 로그인 -> '태그' -> '새로 만들기' -> '맞춤 HTML' 태그를 열고 아래 코드를 삽입합니다.
<script>
ChannelIO('onShowMessenger', function() { dataLayer.push({ 'event': 'channel_talk_open' }) });
</script>트리거는 모든 페이지로 합니다.
※ 오픈 버튼이 늦게 뜨는 경우 (대부분 ChannelIO 활성화되는 데 시간이 소요되므로 이 방법을 권장)
데이터 레이어는 ChannelIO API는 채널톡이 활성화된 이후에 생성 가능한데요. 만약 채널톡 버튼의 활성화가 사이트의 활성화보다 늦다면 요소나 페이지를 활용하는 트리거는 사용할 수 없고 타이머를 활용해야 합니다.
태그관리자 로그인 -> '트리거' -> '새로 만들기' -> 'Timer' 태그를 열고 아래와 같이 설정
▶ 데이터 레이어 이벤트를 활용하여 트리거 만들기
태그관리자 로그인 -> '트리거' -> '새로 만들기' -> '맞춤 이벤트' 태그를 열고 아래와 같이 데이터 레이어에 사용된 이벤트이름(보기에서 'channel_talk_open')을 지정하고 트리거의 이름(보기에서 'a-test-event')도 정합니다.
▶ 트리거 활용하기
이제 전환, 애널리틱스에 해당이벤트를 트리거로 활용하면 됩니다.
구글 애널리틱스 GA4 이벤트 생성하기
GA4의 작동기반이 되는 이벤트를 생성하는 방법을 보겠습니다.
jin-co.tistory.com
구글애즈 전환 설정하기
구글애즈에서 전환은 웹사이트 방문 고객이 웹사이트에서 취하는 행동 중 광고주에게 의미 있는 행동(주로 구매 등 금전적 이익을 주는 행동?)을 의미합니다. 구글애즈에 전환설정으로 광고를
jin-co.tistory.com
컨테이너 가져오기 활용하기
태그관리자의 컨테이너 가져오기 기능을 활용하여 채널톡 구성작업 없이 설치도 가능한데요.
아래파일을 다운로드하여 가져오고자 하는 컨테이너에서 관리자 -> 컨테이너 가져오기 -> 파일선택 -> 워크스페이스 선택 -> 통합으로 가져온 뒤
컨테이너 내보내기 / 가져오기
태그관리자는 태그, 트리거, 변수 등을 하나의 컨테이너에서 다른 컨테이너로 가져와서 사용하는 기능을 제공합니다. 이는 사이트 구조가 같은 여러 사이트에 동일한 전환, 이벤트 등을 설정해
jin-co.tistory.com
채널톡 전환태그를 생성하고 트리거에 아래 'channel_talk_open'을 설치하면 완료됩니다
이상으로 채널톡 API를 전환, 구글애널리틱스에 활용하는 방법을 알아보았습니다.
'마케팅 및 SEO' 카테고리의 다른 글
| [태그관리자] 데이터레이어 (0) | 2023.02.07 |
|---|---|
| [태그관리자] 트리거 - 스크롤 뷰 (4) | 2023.02.06 |
| 구글 애널리틱스 이벤트 생성하기 (0) | 2023.01.31 |
| 구글 애즈 전환 보고서 보기 (0) | 2023.01.31 |
| 구글 애널리틱스 (UA) 동적 리마케팅 설치 (0) | 2023.01.26 |
