Matomo 도입

https://dbtechreviews.com/2021/02/matomo-self-hosted-google-analytics-alternative-on-docker/

추천은 위한 implicit 데이터를 수집하기 위해서 로그의 트랙킹이 필요함

→ GA를 이용한 트랙킹을 시도해 보았지만, 구글의 정책상 사용자 개인을 특정해서 로그를 트랙킹하는 것을 지양(경고 및 GA 사용에 대한 제약이 걸릴 수 있음)

새로운 로그 트랙킹 시스템이 필요하다고 판단 → 설치형인 matomo로 세팅을 시도

docker-compose

• docker-compose를 이용하여 matomo 컨테이너를 실행하였다.

  

  일단은 웹 서버가 열린 것을 확인할 수 있다.

  

  Matomo에서는 localhost를 지원하고 있다고 한다.

  

  docker container로 실행되고 있는 matomo의 모습이다. → localhost만 적용되 어있다.

  해결 방법을 생각했을 때 다음과 같았다!

  1. nginx로 reverse proxy를 적용하여 localhost로 들어오는 요청을 연결한다.
  2. config 파일을 수정한다.

• nginx 도입

  worker_processes auto;
  
  http {
      server {
          listen 80;
  
          include mime.types;
  
          location / {
              proxy_pass <http://matomo:80>;
              proxy_set_header Host $host;
              proxy_set_header X-Forwarded-For $proxy_add_x_forwarded_for;
          }
      }
  }
  

  80포트로 들어오는 값을 matomo 웹서버와 연결을 해주었다

  → 지금 단계에서는 굳이 사용할 필요가 없지 않았을까? 하는 의문이 든다.

• matomo 추적 세팅

  <!-- Matomo -->
  <script>
  var _paq = window._paq = window._paq || [];
  /* tracker methods like "setCustomDimension" should be called before "trackPageView" */
  _paq.push(['trackPageView']);
  _paq.push(['enableLinkTracking']);
  (function() {
  var u="//192.168.42.186/";
  _paq.push(['setTrackerUrl', u+'matomo.php']);
  _paq.push(['setSiteId', '1']);
  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
  g.async=true; g.src=u+'matomo.js'; s.parentNode.insertBefore(g,s);
  })();
  </script>
  <!-- End Matomo Code -->
  

  변수 u에 의해서 추적이 matomo서버가 인식을 하게되면 자동으로 다음을 넘어간다.

  → localhost일 경우 이 이름을 변경해야 한다.

Matomo Tag Manager

container 생성 및 세팅

https://matomo.org/tag-manager-training/

• container 생성

  GA와 매우 ~~똑같다!~~유사하다.

  

• tag manager 시작

  우선 다음과 같은 코드를 프론트에 심어야한다.

  <!-- Matomo Tag Manager -->
  <script>
  var _mtm = window._mtm = window._mtm || [];
  _mtm.push({'mtm.startTime': (new Date().getTime()), 'event': 'mtm.Start'});
  var d=document, g=d.createElement('script'), s=d.getElementsByTagName('script')[0];
  g.async=true; g.src='<http://localhost/js/container_2I825CuE.js>'; s.parentNode.insertBefore(g,s);
  </script>
  <!-- End Matomo Tag Manager -->
  

  되도록이면 head에 심길 바란다.

Tag

• tag란?

  어떤 트기거 조건에서 추적을 할 대상 및 데이터를 의미한다.

  태그를 설정하는 과정은 다음의 플로우로 정의할 수 있다.

  

  태그를 설정을 끝낸 후에는 preview를 통해서 제대로 작동하는 지를 확인 할 수 있다.

  

  matomo에서 제공하는 특수 쿼리를 설정한 도메인 옆에 붙인다.

  

  웹사이트에 적용된 모습이다!

  

  태그가 발사(fire?)된 모습을 볼 수 있다. count도 증가하였다.

• matomo dash board 에서 사용하기

  

  어제 스크롤링을 한 기록을 확인할 수 있었다 → 브라우저와 운영체제 까지 구할 수 있었다.

Trigger

• trigger

  트리거는 tag를 fire하기 위한 조건이다.

  

  click class(css selector를 의미하는 것으로 보임)를 html 태그를 참고하여 설정을 한다.

  

  위의 title-bar가 왜 생기는지 알 수 있다.