채널톡과 같은 API는 웹사이트 고유의 요소가 아니기 때문에 일반적인 방법으로 해당 요소에 대한 접근이 불가하고 이로 인해 전환, 이벤트 추적 등이 불가합니다. 하지만, 채널톡의 경우 API임에도 불구하고 LauncherStyled 클래스에 대한 접근을 허가하여 해당 채널톡을 열기 버튼을 활용하여 추적하는 것이 가능하였다고 하네요.
최근 이러한 클래스를 활용하여 스타일의 변경을 막고자 채널톡에서 아래와 같이 해당 모듈을 쉐도우 돔의 옵션을 활용하여 자바스크립트를 통한 해당 클래스에 대한 접근이 불가능하도록 업데이트를 하면서 기존에 챗을 열기 위한 버튼을 자바스크립트를 통해 접근하는 것이 불가능해졌고 해당 클래스는 외부에서 더 이상 활용 할 수 없게 되었습니다.
https://update-kr.channel.io/93d42f74-9bcd-4eca-a5ab-e514c2fa3340
해결방법
남은 방법은 채널톡에서 이벤트를 제공한다면 이를 활용하는 방법뿐인데요. 다행히 채널톡은 제공하는 이벤트가 있네요ㅎㅎ
채널톡 공식 페이지에서 아래와 같이 제공되는 이벤트 목록의 확인 가능합니다 (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')도 정합니다.
▶ 트리거 활용하기
이제 전환, 애널리틱스에 해당이벤트를 트리거로 활용하면 됩니다.
컨테이너 가져오기 활용하기
태그관리자의 컨테이너 가져오기 기능을 활용하여 채널톡 구성작업 없이 설치도 가능한데요.
아래파일을 다운로드하여 가져오고자 하는 컨테이너에서 관리자 -> 컨테이너 가져오기 -> 파일선택 -> 워크스페이스 선택 -> 통합으로 가져온 뒤
채널톡 전환태그를 생성하고 트리거에 아래 '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 |