한국어
  1. Zendesk 도움말
  2. Guide
  3. Guide 사용하기
  4. Zendesk Guide 설정하기

Google 애널리틱스 및 헬프 센터 - 3부: 고객의 작업 추적하기

Anton de Young
  • 편집된 시간

사용 중인 플랜

Suite 모두모든 플랜

Google 애널리틱스를 사용하면 이벤트를 추적할 수 있으므로 고객이 티켓을 제출하고, 티켓 수 줄이기 링크를 클릭하고, 콘텐츠를 공유하는 것을 포함하여 헬프 센터에서 수행하는 모든 것을 모니터링할 수 있습니다. 이벤트는 사용자들이 콘텐츠와 어떤 식으로 상호작용하는지 알려주며 페이지 로드와 별도로 추적됩니다. 추적하려는 특정 UI 요소에 JavaScript 스니펫을 첨부하여 이벤트 추적을 사용 설정합니다. 그러한 요소의 모든 사용자 활동이 계산되어 Google 애널리틱스 대시보드의 행동 > 이벤트 섹션에 이벤트로 표시됩니다.

이 문서에서 다루는 주제는 다음과 같습니다.

Google 애널리틱스에서 이벤트를 추적하기 위해 이 문서에서 사용되는 코드에 대해 자세히 알아보려면 Google 문서에서 이벤트 추적을 참조하세요.

이 문서는 시리즈의 3번째 문서입니다. 이 시리즈에서는 Google 애널리틱스를 사용하여 고객에게 효과적인 셀프 서비스 지원 옵션을 제공할 책임이 있는 Guide 관리자로서 질문에 답변하는 방법을 설명합니다. 시리즈에서 다루는 주제는 다음과 같습니다.

Google 애널리틱스를 아직 사용 설정하지 않았다면 헬프 센터에서 사용 설정하세요. Google 애널리틱스 사용 설정하기를 참조하세요. 또한 이 문서의 일부 예제에는 JQuery 코드가 포함되어 있습니다. Guide templating V2를 사용하는 경우 jQuery 문을 사용하려는 경우에는 jQuery 라이브러리를 가져와야 합니다. Guide templating 버전에 대한 정보 및 JQuery 가져오기 또는 업그레이드하기를 참조하세요.

어디에서 고객이 포기하고 티켓을 제출하나요?

고객이 헬프 센터의 어느 부분에서 스스로 답을 찾기를 포기하고 티켓을 제출하기로 결정하는지 알아볼 수 있습니다. 헬프 센터의 대부분 페이지에는 고객이 웹 양식을 사용하여 티켓을 제출할 수 있는 “문의 등록” 링크가 있습니다.

Google 애널리틱스를 사용하여 고객이 검색을 그만 두기로 결정하고 상담사와 대화하기를 원할 때 방문 중인 페이지의 URL을 캡처할 수 있습니다. 고객이 생각을 바꿀 때 방문 중인 페이지를 파악하면 디자인 또는 콘텐츠 개선이 필요한 영역을 확인하는 데 큰 도움이 됩니다.

요청이 시작되는 페이지의 추적을 사용 설정하려면 다음과 같이 하세요.

  1. Guide에서 테마의 코드를 편집합니다.
  2. 편집 모드에서 script.js 파일을 엽니다.
  3. 아래의 "요청 제출 이벤트 캡처" 코드를 기본서식 작성 API v1를 사용 중인 경우에는 $(document).ready(function() { ... }); 블록에 붙여 넣거나, 기본서식 작성 API v2를 사용 중인 경우에는 document.addEventListener('DOMContentLoaded', function() { 블록에 붙여 넣습니다.
      Array.prototype.forEach.call(document.querySelectorAll('a.submit-a-request, .article-more-questions a'), function(submitRequestButton) {
    submitRequestButton.addEventListener('click', function(e) {
      var path = window.location.pathname;
      ga('send', 'event', 'Submit Request', 'Submit Request From', path);
    });
  });

    고객이 “문의 등록” 링크를 클릭할 때마다 이벤트가 기록됩니다. Path 매개변수는 고객이 버튼을 클릭할 때 방문 중이었던 페이지의 URL을 캡처합니다.

  4. 저장을 클릭한 다음 변경 내용 게시를 클릭합니다.
  5. 이벤트 추적이 작동 중인지 확인합니다. 헬프 센터에서 두 개의 “문의 등록” 링크를 클릭합니다. Google 애널리틱스 대시보드의 표준 보고서 > 실시간 > 이벤트로 가서 이벤트가 캡처되는지 확인합니다.

며칠 기다렸다가 데이터를 수집합니다. 이제 고객이 티켓을 제출하기로 결정한 문서 페이지를 살펴봅니다. 뭔가 놀라운 사실을 발견했나요? 고객이 답을 찾고 있는데 찾지 못해 지원 요청을 제출하는 것을 알 수 있는 페이지가 있나요? 고객이 최후의 수단으로 지원 요청을 제출하지 않아도 문제를 해결할 수 있는 방법을 찾아보세요.

어느 문서와 게시물이 효과적으로 티켓 수를 줄이고 있나요?

기본 제공되는 티켓 수 줄이기 기능으로 고객이 티켓을 제출하려고 할 때 헬프 센터의 관련 문서를 자동으로 추천합니다. 추천 문서는 지원 요청의 제목란에 입력한 콘텐츠를 기준으로 합니다. 고객이 질문에 답이 될 수 있는 문서를 보면 링크를 클릭하여 문서로 이동할 수 있습니다. 이렇게 티켓 하나가 줄었습니다!

고객이 새 커뮤니티 게시물을 만들려고 할 때 헬프 센터에 있는 관련 커뮤니티 게시물을 추천할 수도 있습니다. 추천 게시물은 새 게시물의 제목에 입력한 콘텐츠를 기준으로 합니다.

문서와 게시물이 티켓 수와 커뮤니티 질문 수를 얼마나 잘 줄이고 있는지 측정하려면 이벤트를 추적하면 됩니다.

문서에 대해 줄어든 티켓 이벤트 추적을 사용 설정하려면 다음과 같이 하세요.

  1. Guide에서 테마의 코드 편집으로 갑니다(헬프 센터 테마 편집하기 참조).
  2. 편집 모드에서 script.js 파일을 엽니다.
  3. 아래의 "티켓 수 줄이기 이벤트 캡처" 코드를 기본서식 작성 API v1를 사용 중인 경우에는 $(document).ready(function() { ... }); 블록에 붙여 넣거나, 기본서식 작성 API v2를 사용 중인 경우에는 document.addEventListener('DOMContentLoaded', function() { 블록에 붙여 넣습니다.
    // Capture ticket deflection event
  var requestForm = document.querySelector("#new_request")
  if (requestForm) {
    requestForm.addEventListener('click', function(e) {
      if (e.target.matches('.searchbox-suggestions a')) {
        ga('send', 'event', 'Ticket Deflection', 'Deflect', e.target.href);
      }
    });
  }

    고객이 추천 문서를 클릭할 때마다 이벤트가 기록됩니다. 추적 코드는 추천 문서 목록에서 어느 문서를 선택하는지도 캡처합니다.

  4. 저장을 클릭한 다음 변경 내용 게시를 클릭합니다.
  5. 이벤트 추적이 작동 중인지 확인합니다. 헬프 센터의 티켓 제출 페이지에서 두 개의 추천 문서를 클릭합니다. Google 애널리틱스 대시보드의 표준 보고서 > 실시간 > 이벤트로 가서 이벤트가 캡처되는지 확인합니다.

파악한 내용을 바탕으로 지원 요청을 제출하고자 하는 고객이 가장 자주 선택하는 문서를 알아내세요. 헬프 센터에서 문서를 승격하여 더욱 관심을 가질 수 있도록 하는 것이 좋습니다.

줄어든 커뮤니티 게시물 이벤트 추적을 사용 설정하려면 다음과 같이 하세요.

  1. Guide에서 테마의 코드를 편집합니다.
  2. 편집 모드에서 script.js 파일을 엽니다.
  3. 아래의 "커뮤니티 티켓 수 줄이기 이벤트" 코드를 기본서식 작성 API v1를 사용 중인 경우에는 $(document).ready(function() { ... }); 블록에 붙여 넣거나, 기본서식 작성 API v2를 사용 중인 경우에는 document.addEventListener('DOMContentLoaded', function() { 블록에 붙여 넣습니다.
     
  Array.prototype.forEach.call(document.querySelectorAll('.new_community_post'), function(el) {
    el.addEventListener('click', function(e) {
      if (e.target.matches('.searchbox-suggestions a')) {
        ga('send', 'event', 'Community Ticket Deflection', 'Deflect', e.target.href);
      }   
    })
  });

    고객이 추천 게시물을 클릭할 때마다 이벤트가 기록됩니다. 추적 코드는 추천 게시물 목록에서 어느 게시물을 선택하는지도 캡처합니다. 

  4. 저장을 클릭한 다음 변경 내용 게시를 클릭합니다.
  5. 이벤트 추적이 작동 중인지 확인합니다. 헬프 센터의 새 게시물 페이지에서 두 개의 추천 게시물을 클릭합니다. Google 애널리틱스 대시보드의 표준 보고서 > 실시간 > 이벤트로 가서 이벤트가 캡처되는지 확인합니다.

고객이 소셜 네트워크에서 문서를 공유하고 있나요?

고객이 소셜 네트워크에서 문서를 공유하는지, 그리고 어떻게 공유하는지 캡처할 수 있습니다. 특히 고객이 문서에서 소셜 공유를 클릭할 때마다 추적할 수 있습니다.

고객이 선호하는 소셜 미디어 채널을 더 잘 이해하는 것 외에도 메트릭을 사용하면 헬프 센터 문서의 파급력을 이해할 수 있습니다.

공유 구성 요소인 {{share}}가 헬프 센터 테마의 문서 기본서식에 있어야 합니다. Curious Wind 및 The Noble Feast 테마에는 기본적으로 이 구성 요소가 없습니다. {{share}} 구성 요소가 없거나 제거한 경우 문서 기본서식에 추가할 수 있습니다. HTML 사용자 지정하기를 참조하세요.

Google 애널리틱스에서 이벤트 추적을 시작하려면 일부 JavaScript (JS) 코드를 헬프 센터 페이지에 추가해야 합니다. JS는 클릭 등의 특정 고객 상호작용을 수신합니다. 상호작용을 감지하면 이벤트에 대한 정보를 Google 애널리틱스에 보냅니다.

소셜 공유 이벤트 추적을 사용 설정하려면 다음과 같이 하세요.

  1. Guide에서 테마의 코드를 편집합니다.
  2. 편집 모드에서 script.js 파일을 엽니다.
  3. 아래의 "소셜 공유 추적" 코드를 기본서식 작성 API v1를 사용 중인 경우에는 $(document).ready(function() { ... }); 블록에 붙여 넣거나, 기본서식 작성 API v2를 사용 중인 경우에는 document.addEventListener('DOMContentLoaded', function() { 블록에 붙여 넣습니다.
    Array.prototype.forEach.call(document.querySelectorAll('.share a'), function(el) {
    el.addEventListener('click', function(e) {
      var shareType = e.currentTarget.className.replace('share-', '');
      var path = window.location.pathname;
      ga('send','event','Social Share', shareType, path);
    })
  });

    Type 매개변수는 클릭되는 소셜 미디어(예: Facebook, LinkedIn 또는 Google Plus)를 캡처합니다. Path 매개변수는 사용자가 공유 중인 문서의 URL을 캡처합니다.

  4. 저장을 클릭한 다음 변경 내용 게시를 클릭합니다.
  5. 이벤트 추적이 작동 중인지 확인합니다. 헬프 센터에서 두 개의 공유 링크 클릭합니다. Google 애널리틱스 대시보드의 표준 보고서 > 실시간 > 이벤트로 가서 이벤트가 캡처되는지 확인합니다.

고객이 헬프 센터에서 어떤 경로를 따라 가나요?

고객이 헬프 센터에서 작업을 수행하는 순서를 파악하면 고객의 셀프 서비스 행동 및 습관을 알 수 있습니다. Google 애널리틱스를 사용하여 이러한 이벤트 흐름을 추적할 수 있습니다.

더 진행하기 전에 아직 다루지 않은 또 다른 일반 이벤트인 검색을 추적하도록 설정해 보죠.

검색 이벤트 추적을 사용 설정하려면 다음과 같이 하세요.

  1. Guide에서 테마의 코드를 편집합니다.
  2. 편집 모드에서 script.js 파일을 엽니다.
  3. 아래의 "검색 제출 이벤트 캡처" 코드를 기본서식 작성 API v1를 사용 중인 경우에는 $(document).ready(function() { ... }); 블록에 붙여 넣거나, 기본서식 작성 API v2를 사용 중인 경우에는 document.addEventListener('DOMContentLoaded', function() { 블록에 붙여 넣습니다.
    Array.prototype.forEach.call(document.querySelectorAll('form[role="search"]'), function(el) {
    el.addEventListener('submit', function(e) {
      query = e.currentTarget.querySelector('input[type="search"]').value.toLowerCase();
      ga('send', 'event', 'Search', 'Submit', query);
    })
  });
  4. 저장을 클릭한 다음 변경 내용 게시를 클릭합니다.
  5. 이벤트 추적이 작동 중인지 확인합니다. 헬프 센터에서 두 건의 검색을 수행합니다. Google 애널리틱스 대시보드의 표준 보고서 > 실시간 > 이벤트로 가서 이벤트가 캡처되는지 확인합니다.

이제 추적하는 모든 이벤트를 함께 연결하여 고객이 작업을 수행하는 순서를 봅니다. 이 문서의 모든 이벤트를 추가하고 테스트했다면 Google 애널리틱스 이벤트 보고서에 4가지 이벤트 카테고리가 있어야 합니다. 요약하면 사용자가 다음과 같은 행동을 할 때마다 이벤트가 기록됩니다.

  • 소셜 미디어 네트워크에서 문서 공유
  • “문의 등록” 버튼을 클릭하여 티켓 만들기
  • 추천 문서의 도움으로 티켓 제출 포기
  • 헬프 센터에서 검색

가장 일반적인 이벤트 순서를 알아내려면 다음과 같이 하세요.

  • Google 애널리틱스 대시보드에서 행동 > 이벤트 > 이벤트 흐름으로 이동합니다.

이벤트 흐름 보고서는 사용자가 헬프 센터에서 이벤트를 수행하는 순서를 보여줍니다. 첫 번째 이벤트 열에서 아무 카테고리나 클릭하여 사용자가 그 다음에 수행한 두 번째, 세 번째, 네 번째 이벤트를 봅니다. 예를 들어 몇 명의 사용자가 헬프 센터를 검색했고, 그 다음 “티켓 제출”을 클릭했고, 또 그 다음에는 전에는 찾지 못한 추천 문서의 도움으로 티켓 제출을 하지 않았는지 알 수 있습니다.

지금까지 다루고자 한 모든 이벤트 추적이었습니다. 유용하다고 생각되는 다른 이벤트를 추적하는 경우에는 아래 댓글을 통해 알려주세요.

18
맨 위로 돌아가기

0 댓글

댓글을 남기려면 로그인하세요.

관련 문서

Zendesk 제공