Google 애널리틱스를 사용하여 웹사이트에 간편한 설문조사 양식을 설치하세요.

발 연구소 Advent Calendar 2016 20일째입니다.

이번은, 역 스파아토 웹 서비스 의 문서 사이트 에서도 채용하고 있다,
자바 스크립트와 google 애널리틱스를 사용하여 간편한 설문 조사 양식을 만드는 방법을 소개하고 싶습니다.

google 애널리틱스란 무엇입니까?

Google에서 제공하는 액세스 분석 도구로,
사이트 방문자 수, 행동, 분포 등을 분석할 수 있습니다.
google 애널리틱스는 무료이며 google 계정이 있으면 즉시 시작할 수 있습니다.
이번에는 "이벤트 추적"이라는 기능을 사용하여 만들고 싶습니다.

구현 조건

설문지 양식을 구현하려면 다음 두 가지 조건을 충족해야 합니다.

웹 사이트에 google 애널리틱스를 도입 할 수 있습니다

웹 사이트에서 자바 스크립트를 사용할 수 있습니다

만나면 아래로 가자.

그럼 만들어 보자.

웹사이트에 google 애널리틱스 설정

설문조사 양식을 설치하려는 웹사이트에 google 추적 코드를 입력합니다. 조금 여기의 설명은 할애하겠습니다🙇
'google 추적 코드'로 검색하면 방법이 나올 것입니다.

설문지 양식 구현

사용할 언어는 javascript입니다.
Google 애널리틱스의 '이벤트 추적'이라는 기능을 활용합니다.

공식 참조
htps : //에서 ゔぇぺぺrs. 오, ぇ. 코 m / 아나 ly chi cs /에서 v gu e s / こぇ c 치온 / 아나 ly chi csjs / 푹 에 ld 르후 렌세? hl = 그럼 # 에우 t 카테고 ry

공식 참조를 보면서 설명하면 ga 함수의 첫 번째 인수에는 send, 두 번째 인수에는 event이벤트 추적을 사용하면 eventCategory , eventAction , eventLavel , eventValue라는 네 가지 값을 google 애널리틱스에 전달할 수 있습니다.

ga('send', 'event', {
  'eventCategory': 'Category', // 必須
  'eventAction': 'Action',     // 必須
  'eventLabel': 'Label',       // 任意
  'eventValue': 'Value'        // 任意
});

더러운 코드로 죄송합니다만, 말로 설명하는 것도 번거롭기 때문에 샘플 코드를 이하에 붙입니다.

<!-- html側のソースコード -->
<div class="enq">
  <div>ドキュメントの改善に役立てます。</div>
  <div>1. このドキュメント内にお探しの情報は見つかりましたか？</div>
  <p id="yes-no-answer"></p>

  <label><input type="radio" name="q1" value="yes" checked>見つかった</label>
  <label><input type="radio" name="q1" value="no">見つからなかった</label>

  <div>2. コメントがありましたらご記入ください。</div>
  <p id="comment"></p>

  <textarea type="text" name="comment" rows="4" cols="40" placeholder="例：◯◯な情報が欲しい。◯◯が分かりにくかった。"></textarea>
  <div>
   　<button type="button" onclick="sendAnswer('/v1/index.html')">回答を送る</button>
  </div>
</div>

// javascript側のソースコード
function afterAnswer() {
  $(".enq").html("<p>貴重なご意見をお寄せいただきありがとうございます。</p>");
}

function sanitaize(str) {
  return str.replace(/&/g, '&amp;').replace(/</g, '&lt;').replace(/>/g, '&gt;').replace(/"/g, '&quot;').replace(/'/g, '&#39;');
}

function sendAnswer(path) {
  var yes_no_answer = $("input:radio[name='q1']:checked").val();
  var comment = $('textarea').val();

  if(yes_no_answer && comment.length <= 200) {

    ga('send', 'event', {
      'eventCategory': path,
      'eventAction': yes_no_answer,
      'eventLabel': sanitaize(comment)
    });

    afterAnswer();

  } else if(yes_no_answer === undefined) {
    $("#yes-no-answer").text("どちらかのボタンをクリックしてください。");
    if(comment.length >= 200) {
      $("#comment").text("200文字まで入力可能です。");
    }

  } else {
    $("#comment").text("200文字まで入力可能です。");
  }
}

역 스파아토 웹 서비스의 문서 사이트에서는 어떤 요소에 어떤 값을 넣어지고 있는지 참고까지 소개합니다.
eventCategory :
어디 페이지에서 설문지를 제출했는지 알기 위해 URL 경로를 설정합니다.eventAction :
라디오 버튼의 답변을 설정합니다.eventLabel :
문자수 제한이 가장 느슨하기 때문에 자유 기입란의 문자열을 설정하고 있습니다.

작성한 설문지 양식에서 시험에 설문지를 제출해 봅시다.



Google 애널리틱스 콘솔의 왼쪽 메뉴 '행동'> '이벤트'> '요약'에서 데이터를 볼 수 있습니다.
반영 될 때까지 시간 지연이 있습니다. 체감으로는, 대략 1시간 있으면 데이터가 반영되는 이미지가 있습니다.



이벤트 라벨에 방금 입력한 문자열이 반영되어 있군요!
이것으로, 간편 앙케이트 폼이 완성되었습니다!

빠는거리

이벤트 카테고리, 이벤트 액션은 공문자로 할 수 없으므로 주의합시다!
빈 문자로 설정하면 데이터가 등록되지 않습니다.
오류를 토하지 않기 때문에 무엇이 원인인지 찾는 것이 어렵습니다.

요약

google 애널리틱스를 설정하고 javascript를 모냐로 하는 것만으로 설문지 양식을 설치할 수 있었습니다.
돈과 수고가 들지 않기 때문에, 부담없이 도입할 수 있는 것이 장점이라고 생각합니다.
신경이 쓰이는 분이 있으면 꼭 실천해 보세요♪