[참고][AWS] Matomo 추적 스크립트 설정: 웹사이트에 적용 및 테스트하기 (5편)

 

 

 

이번 포스트에서는 마토모 추적 스크립트를 프로젝트 내부에 심고 동작시켜 보자

 

---

 

1. 스크립트 심기

---

• 저번 포스트에 이어서 왔다면 아래 사진과 같은 상태에서 멈춰있을 것이다. 이제 하단의 스크립트를 내 프로젝트 코드에 심어주자

 

matomo tracking code

 

 

1-1. 스크립트 만들기

• 내 프로젝트로 들어와서 matomo 추적 스크립트만 작성한 전용 js 파일을 하나 만들었다.

 

matomo.js

 

1-2. 작성한 스크립트 연결하기

• html 코드에 matomo.js 추적 스크립트를 연결한다.
• 여기서 가장 좋은 방법은 모든 페이지에 쓰이는 header 전용 html이 있다면(header.html) 그 html안에 matomo.js를 연결시켜 주면 이 header를 가져다 include(jsp) 또는 fragment(thymeleaf) 방식으로 적용시키는 다른 모든 html 코드에도 matomo.js의 추적 스크립트가 적용될 것이다.

 

html에 스크립트 연결

 

 

1-3. 프로젝트 실행 후 다시 matomo사이트 로딩

• 나 같은 경우는 detail.html 여기에 matomo.js를 심었는데 여기는 게시글 상세 보기 페이지였다.
• 아래의 페이지가 상세보기 페이지인데 여기에 들어오고 새로고침을 하고 matomo로 가보자

 

상세보기 페이지

 

• 내가 2번 새로고침을 했더니 아래와 같이 추적이 적용된 채로 대기 페이지에서 대시보드로 변경되었다.

 

 

 

---

 

이제 정말 추적 스크립트까지 넣고 대시보드 활성화까지 했다. 다음 시간에 조금 상세한 사용방법을 알아보자

 

2023.10.23 - [웹분석tool (GA, Matomo)] - Matomo 대시보드 및 API 활용: 데이터 추출 방법 (6편)

 

출처: https://curiousjinan.tistory.com/entry/matomo-tracking-script-setup-and-test-5#이번 포스트에서는 마토모 추적 스크립트를 프로젝트 내부에 심고 동작시켜 보자-1