[4] 오픈 서비스를 이용한 웹사이트 기능 구현 - 동영상, 댓글, 채팅, 방문자 분석

동영상 삽입

• iframe 태그

1. Youtube 동영상을 샘플로 공유 > <> 퍼가기 하여 제공된 html iframe 소스 코드를 웹페이지에 붙여넣으면 됨.
   

   

    

---

댓글 기능 추가

사용자로 부터 데이터를 입력받아 처리 하려면 Backend 기술을 알아야 함.(PHP,ASP,etc...)
우선 이미 다른 사람이 구현한 댓글 기능을 가져와서 적용해보도록 함.

• DISQUS : 소셜 댓글 서비스, 댓글을 직접 구현하지 않고 위젯의 형태로 서비스에 삽입할 수 있는 댓글 전문 서비스
• RiveRe : 국내 서비스

1. DISQUS 가입 후, 관리자 페이지 ( https://disqus.com/profile/signup/intent/ ) -> I want to install Disqus on my site -> Create a new site
   

   

    

2. I don't see my platform listed, .....
   

   

    

3. 코드 복사해서 댓글 기능을 넣을 내 웹사이트 페이지에 코드 추가
   

   

    

4. file:// 로 웹페이지 열면 댓글 기능 안 됨. 웹서비스(http)를 이용해서 웹사이트에 접속해야 함. (보안상의 이유)
   

   

<!--Start of Disqus Script-->
  <div id="disqus_thread"></div>
  <script>

  /**
  *  RECOMMENDED CONFIGURATION VARIABLES: EDIT AND UNCOMMENT THE SECTION BELOW TO INSERT DYNAMIC VALUES FROM YOUR PLATFORM OR CMS.
  *  LEARN WHY DEFINING THESE VARIABLES IS IMPORTANT: https://disqus.com/admin/universalcode/#configuration-variables*/
  /*
  var disqus_config = function () {
  this.page.url = PAGE_URL;  // Replace PAGE_URL with your page's canonical URL variable
  this.page.identifier = PAGE_IDENTIFIER; // Replace PAGE_IDENTIFIER with your page's unique identifier variable
  };
  */
  (function() { // DON'T EDIT BELOW THIS LINE
  var d = document, s = d.createElement('script');
  s.src = 'https://web1-i0q0k8kd1g.disqus.com/embed.js';
  s.setAttribute('data-timestamp', +new Date());
  (d.head || d.body).appendChild(s);
  })();
  </script>
  <noscript>Please enable JavaScript to view the <a href="https://disqus.com/?ref_noscript">comments powered by Disqus.</a></noscript>
  <!--End of Disqus Script-->

 

---

채팅 기능 추가

사용자가 웹사이트에 접속 시 채팅이 가능하도록 구현된 오픈 서비스를 이용해 기능 구현
* 서비스 이용을 위해서 웹서비스(http프로토콜)로 웹사이트에 접근해야 하기 때문에, git pages 웹호스팅 서비스로 웹사이트 테스트 진행.
https://ssun02.github.io/ssun/testweb/service.html

• tawk : 무료 라이브 채팅 앱 서비스 (쳑)

1. 회원가입 진행
   

   

    

2. 아래 코드를 body 태그에 추가하면 끝.
   

   

    

3. tawk 에서 연결된 도메인 확인 가능
   

   

    

4. 클라이언트는 웹사이트 우측하단에서 채팅 기능을 이용할 수 있다. 채팅 시작
   

   

    

5. 채팅 요청 시 담당자(서버)에 알람
   

   

    

6. 클라이언트와 서버 채팅 화면
   

   

<!--Start of Tawk.to Script-->
<script type="text/javascript">
var Tawk_API=Tawk_API||{}, Tawk_LoadStart=new Date();
(function(){
var s1=document.createElement("script"),s0=document.getElementsByTagName("script")[0];
s1.async=true;
s1.src='https://embed.tawk.to/5d4eb87f77aa790be32e4ed5/default';
s1.charset='UTF-8';
s1.setAttribute('crossorigin','*');
s0.parentNode.insertBefore(s1,s0);
})();
</script>
<!--End of Tawk.to Script-->

 

---

방문자 분석기

웹 페이지 분석기 서비스 : 웹사이트에 몇명이 방문했는지, 방문자가 어떤 경로로 여기 도착했는지, 어떤 경로로 이동중인지, 어떤 환경에서 웹사이트를 탐색하고 있는지 정보를 제공해주는 서비스

1. Google analytics 서비스 이용을 위해 가입
   Account Name : 계정명
   Website Name : 추적하고자 하는 프로젝트 내의 어떤한 웹페이지
   Website URL : 분석하고자 하는 웹사이트 주소
   Industry Category : 산업 분류, 전체 산업과의 통계 자료를 비교하고 싶을 때
   Reporting Time Zone : 시간 대 선택
   Get Tracking Id > 약관 : 'South Korea' 선택 후, Agree

   

    

2. Website Tracking > Global Site Tag 소스 코드 복사 후, HEAD 태그에 붙여넣기

   

    

3. 방문자에 따른 분석 상황 모니터링

   

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-145392598-1"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'UA-145392598-1');
</script>

 

* 일단은 데이터를 분석하기 위한 자료로 축적할 수 있는한 축적해 둘 것. 추후에 데이터를 이용하는 방법을 고민하면 됨. 중요한 자산이 될 수 있다