티스토리 뷰

카테고리 없음

Hackle JavaScript SDK 연동 방법 (Tistory 블로그 연동 예제)

rlawlstjd007 2022. 9. 26. 22:09

들어가며

  • 요새 국내에서 핵클 이라는 서비스가 A/B Test, 데이터 분석을 할 수 있는 Aglie SaaS Platform 으로 조금씩 알려지고 있더라구요. 
  • 이전까지는 Amplitude, Mixpanel 등 해외에서만 제공하는 서비스라고 생각했었는데 국내에서 제공되는 서비스라 생소하기도 하고 호기심이 생겼습니다.  
  • 이번 글에서는 핵클에서 제공하는 SDK 를 Tistory 블로그에 연동해보고 간단한 데이터들을 확인해보도록 하겠습니다. 

Hackle 이란?

  • A/B Test, Feature Flag, 이상징후 탐지, 데이터 분석 등의 Product 를 제공하는 국내에서 제공하는 애자일 SaaS 플랫폼 입니다.
  • Client, Server Side 의 여러 언어의 SDK 를 제공하며 한번 연동을 통해서 위 기능들을 전부 사용할 있습니다. 

연동 방법

가입 및 SDK 코드 발급

  • 핵클 홈페이지에 접속하여 계정을 새로 생성해보겠습니다. 
 

핵클: A/B 테스트, 기능 플래그 및 이상 징후 탐지 플랫폼

 

hackle.io

 

  • Google 계정으로 가입 후 좌측 메뉴에서 'SDK 연동 정보' 메뉴에 들어가면 아래 이미지와 같이 SDK 관련 정보를 확인할 수 있습니다. 
  • 저희는 Tistory 블로그에 JavaScript SDK 를 적용할 예정이니 '운영 환경 - Browser' SDK 키를 미리 복사해두겠습니다. 

 

JavaScript SDK 연동

  • 핵클에서 제공하는 Docs 를 참고하여 연동을 진행해보겠습니다. 
  • 저희는 해당 페이지에서 HTML 스니펫 연동 방식을 사용할 예정입니다. 

 

  • 저희는 아래 코드를 사용할 예정이고,  YOUR_BROWSER_SDK_KEY 부분에 위에서 복사 해두었던 SDK Key 값을 넣어주고 코드전체를 복사해두겠습니다.
<!-- 기존 코드 head 안에 추가 -->
<script src="https://cdn.jsdelivr.net/npm/@hackler/javascript-sdk@11.1.0/lib/index.browser.umd.min.js"></script>
<script>
  // YOUR_BROWSER_SDK_KEY 자리에 SDK 키를 넣습니다.
  HACKLE_SDK_KEY = "YOUR_BROWSER_SDK_KEY";
  window.hackleClient = Hackle.createInstance(HACKLE_SDK_KEY);
  console.log("HACKLE SDK 초기화 완료")
</script>

 

  • 이제 실제 블로그와 연동을 해보겠습니다. 
  • 티스토리 관리 페이지 에서 스킨편집 을 선택해줍니다. 

 

 

  • 화면 우측 스킨편집 항목에서 'HTML 편집'을 선택 해줍니다.

 

  • HTML 소스 중 <head> 태그 안에 <script> 태그 형태로 JavaScript 코드를 심겠습니다. 
  • 아래 이미지 처럼 적절한 위치를 찾은 뒤 위에서 복사해두었던 코드를 그대로 넣어주고 적용해보겠습니다. 

 

  • 연동이 잘되었는지 확인해보겠습니다.
  • 티스토리 블로그에 방문후 개발자 도구에서 Conolse 창을 보면 아래와 같이 HACKLE SDK 초기화 완료 라는 로그가 출력되면 연동이 성공한 것입니다. 

 

이벤트 전송 및 데이터 분석

  • 연동이 잘 되었으니 이벤트를 전송해보고 전송한 이벤트에 대한 데이터 분석을 해보겠습니다. 
  • 핵클에서 제공하는 사용자 이벤트 전송 Docs 를 참고하여 블로그에 사용자가 방문했을 때 유저가 본 글의 정보를 포함하여 이벤트를 전송하는 예제 코드입니다. 
<script>
	hackleClient.onReady(() => {
        var event = {
                key: "visit",
                properties: {
                     url: document.URL
                }
        }    	
        hackleClient.track(event);
    	console.log("HACKLE Track 이벤트 전송 완료");
    })
</script>



  • 위에서 티스토리 HTML 소스를 수정했던 방법과 동일하게 HTML 소스 편집에서 초기화 <script> 태그 아래에 위 예제 코드를 그대로 집어넣겠습니다. 
  • 이후 개발자 도구 콘솔에서 아래 로그를 확인하여 전송이 정상적으로 된 것을 확인할 수 있습니다. 

 

 

  • 이제 Hackle 대시보드에서 좌측 항목중 '데이터 분석' 메뉴를 선택하겠습니다. 
  • 선택 후 분석항목으로 저희가 전송한 이벤트인 'visit ' 이벤트를 선택한 후 계산방식을 선택하면 해당 이벤트에 대한 데이터를 확인해볼 수 있습니다.
    • 추가적으로 화면에서 제공하는 여러 필터들을 통해서 원하는 형태의 데이터를 가공하여 확인할 수도 있습니다. 

마치며

  • 이후 포스팅에서는 핵클에서 제공하는 다른 Product (A/B Test, Feature Flag) 에 대한 연동도 진행해보겠습니다.
  • A/B Test, Feature Flag 를 블로그에 붙여 보는 것도 재밌게 해볼 수 있는게 많을 것 같습니다. 

관련글

 

Amplitude JavaScript SDK 연동 방법 (Tistory 블로그 연동 예제)

들어가며 데이터 분석 툴인 Amplitude 에서 제공하는 JavaScript SDK 를 이용해서 Tistory 블로그에 연동 해보겠습니다. 연동을 통해서 블로그에 방문하는 사용자들의 이벤트를 수집하여 DAU 와 같은 수치

jinseongsoft.tistory.com

 

MixPanel JavaScript SDK 연동 방법 (Tistory 블로그 연동 예제)

들어가며 데이터 분석 툴인 Mix Panel 에서 제공하는 JavaScript SDK 를 이용해서 Tistory 블로그에 연동 해보겠습니다. 연동을 통해서 블로그에 방문하는 사용자들의 이벤트를 수집하여 DAU 와 같은 수치

jinseongsoft.tistory.com

 

반응형
댓글