티스토리 뷰

카테고리 없음

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

rlawlstjd007 2022. 1. 23. 20:39

들어가며

  • 데이터 분석 툴인 Amplitude 에서 제공하는 JavaScript SDK 를 이용해서 Tistory 블로그에 연동 해보겠습니다. 
  • 연동을 통해서 블로그에 방문하는 사용자들의 이벤트를 수집하여 DAU 와 같은 수치부터 디테일한 사용자별 속성 및 행동 까지 확인을 해볼 수 있습니다. 

Amplitude 란?

  • 국내에서도 많이 알려지고 있는 데이터 분석툴로 모바일, 웹 서비스 상에서 사용자의 행동을 분석할 수 있는 툴입니다.
  • 여러 언어의 SDK를 제공하여 SDK 연동을 통해서 사용자의 이벤트를 전송하면 수집된 이벤트를 기반으로 Funnel, Retention, Stickiness, Engagement metrix, Life Cycle 등 여러 지표들을 볼 수 있는 분석 플랫폼입니다. 

연동 방법

가입 및 SDK 연동 코드 발급

 

Get Started - Amplitude

 

amplitude.com

  • 앰플리튜드 에서는 현재 월 1000만건 이벤트 까지는 무료로 이용이 가능하다고 합니다. 

 

  • 가입을 완료하고 나면 곧장 SDK 를 선택하는 화면이 보입니다.
  • 티스토리 연동을 위해서는 JavaScript 수정을 통해서 연동이 가능하기 때문에 'JavaScript SDK'를 선택해줍니다. 

SDK 코드 발급

  • SDK 선택 후에 Sep Up을 위한 JavaScript Sniffetd 이 보이는데요.
  • 연동에 필요한 코드로 복사해두겠습니다. 

 

  • Next 선택 후에는 Event 전송 코드 샘플을 볼 수 있습니다. 
  • 이번 예제에서는 이벤트를 포함한 부가정보를 넣어볼 예정이라 복사는 하지 않아도 상관 없습니다.

 

티스토리 코드 연동

  • 티스토리 관리 페이지에서스킨편집 을 선택해줍니다. 

 

 

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

 

  • HTML 소스 중 <head> 태그 안에 <script> 태그 형태로 JavaScript 코드를 심겠습니다. 
  • 아래 이미지 처럼 적절한 위치를 찾은 뒤 코드를 심어보겠습니다. 

 

  • 아래 코드 블럭에서 `위 단계에서 발급 받은 Sniffet 으로 교체해주세요` 주석 아래 <script> 태그를 위 단계에서 발급 받았던 JavaScript SDK Sniffet 으로 교체 합니다. 
  • `이벤트 전송 코드` 부분을 보면 eventProperties 라는 값도 함께 보내고 있는데요, 이벤트(Event) 객체에 추가할 수 있는 속성 값이라고 이해하시면 됩니다. 
    • Event Property 에 대한 자세한 내용은 아래 링크를 참고해주세요. 
<!--JQuery-->
<script src="https://code.jquery.com/jquery-3.6.0.slim.min.js" integrity="sha256-u7e5khyithlIdTpu22PHhENmPcRdFiHRjhAuHcs05RI=" crossorigin="anonymous"></script>

<!--위 단계에서 발급 받은 Sniffet 으로 교체해주세요. -->
<script type="text/javascript">
  (function(e,t){var n=e.amplitude||{_q:[],_iq:{}};var r=t.createElement("script")
  ;r.type="text/javascript"
  ;r.integrity="sha384-tzcaaCH5+KXD4sGaDozev6oElQhsVfbJvdi3//c2YvbY02LrNlbpGdt3Wq4rWonS"
  ;r.crossOrigin="anonymous";r.async=true
  ;r.src="https://cdn.amplitude.com/libs/amplitude-8.5.0-min.gz.js"
  ;r.onload=function(){if(!e.amplitude.runQueuedFunctions){
  console.log("[Amplitude] Error: could not load SDK")}}
  ;var i=t.getElementsByTagName("script")[0];i.parentNode.insertBefore(r,i)
  ;function s(e,t){e.prototype[t]=function(){
  this._q.push([t].concat(Array.prototype.slice.call(arguments,0)));return this}}
  var o=function(){this._q=[];return this}
  ;var a=["add","append","clearAll","prepend","set","setOnce","unset","preInsert","postInsert","remove"]
  ;for(var c=0;c<a.length;c++){s(o,a[c])}n.Identify=o;var u=function(){this._q=[]
  ;return this}
  ;var l=["setProductId","setQuantity","setPrice","setRevenueType","setEventProperties"]
  ;for(var p=0;p<l.length;p++){s(u,l[p])}n.Revenue=u
  ;var d=["init","logEvent","logRevenue","setUserId","setUserProperties","setOptOut","setVersionName","setDomain","setDeviceId","enableTracking","setGlobalUserProperties","identify","clearUserProperties","setGroup","logRevenueV2","regenerateDeviceId","groupIdentify","onInit","logEventWithTimestamp","logEventWithGroups","setSessionId","resetSessionId"]
  ;function v(e){function t(t){e[t]=function(){
  e._q.push([t].concat(Array.prototype.slice.call(arguments,0)))}}
  for(var n=0;n<d.length;n++){t(d[n])}}v(n);n.getInstance=function(e){
  e=(!e||e.length===0?"$default_instance":e).toLowerCase()
  ;if(!Object.prototype.hasOwnProperty.call(n._iq,e)){n._iq[e]={_q:[]};v(n._iq[e])
  }return n._iq[e]};e.amplitude=n})(window,document);

  amplitude.getInstance().init("ㅁㄴㅇㅁ니ㅏ문리ㅜㄴ밀ㄴㅁㅁㄴ");
</script>


<!-- 이벤트 전송 코드 -->
<script>
  $( document ).ready(function() {
      generateEvent();
  });

  function generateEvent() {
    //블로그 방문자가 보고 있는 글의 title
    var title = $('.tit_post')[0].innerText;
    var eventProperties = {
        "title": title
    };

    //원하는 이벤트 명으로 설정해주세요. 
    const eventName = "visit";
    amplitude.getInstance().logEvent(eventName, eventProperties);
    console.log("Amplitude Event 전송 완료 !"); 
  }
</script>

 

연동 확인

  • 스킨 편집 적용후 블로그 글 중 하나를 보겠습니다. 
  • 글 오픈 후 개발자 도구 -> 콘솔 을 봤을 때 아래 이미지 처럼 `Amplitude 이벤트 전송 완료` 라는 로그가 출력되면 정상적으로 연동이 된 것 입니다 !
    • 만약 보이지 않는 다면 소스 항목에서 Error 가 발생하는 부분을 보고 수정을 해주시면 됩니다. 

 

  • 이후에 Amplitude로 다시 돌아와 보면 아래와 같이 전송되 이벤트를 받았다는 메시지를 볼 수 있습니다. 
  • 이제 Dashboard로 이동하여 전송된 이벤트를 확인해보겠습니다. 

 

  • 대시보드에서 New -> Chart 를 선택하면 아래와 같이 차트를 생성할 수 있는 화면을 볼 수 있습니다. 
  • 좌측 상단 이벤트 항목을 보게 되면 연동한 이벤트 (예제 코드 에서는 'visit')를 선택할 수 있고 선택하면 현재까지의 이벤트 집계 결과를 볼 수 있습니다. 

 

  • 좌측 메뉴의 'User Look Up' 메뉴를 선택하고 이벤트 목록중 하나를 선택하게 되면 해당 유저의 속성을 자세하게 확인할 수 있습니다. 
  • 이전에 저희가 설정한 Event Property 인 title 값도 보이는 군요 ! 

 

  • 이번글에서는 연동 방법에 대해서 간단하게 보았고 다음 글에서는 쌓인 데이터를 바탕으로 분석할 수 있는 여러 지표들을 보면 좋을 것 같습니다. 

 

 

반응형
댓글