튜토리얼: GitLab Pages 웹사이트 프로젝트에 제품 분석 설정하기

Tier: Ultimate Offering: GitLab.com, Self-Managed Status: Experiment

사용자가 웹사이트나 애플리케이션과 어떻게 상호 작용하는지 이해하는 것은 데이터 기반의 결정을 하는 데 중요합니다. 사용자들이 가장 많이 사용하는 기능과 가장 적게 사용하는 기능을 식별함으로써 팀은 자신들의 시간을 효율적으로 어떻게 사용할지 결정할 수 있습니다.

다음은 우리가 수행할 작업에 대한 개요입니다:

템플릿에서 프로젝트 생성하기
제품 분석으로 프로젝트 등록하기
웹사이트에 추적 스니펫 삽입하기
사용 데이터 수집하기
대시보드 보기

시작하기 전에

이 튜토리얼을 따라하기 위해 다음을 해야 합니다:

인스턴스에서 제품 분석 활성화해야 합니다.
프로젝트를 생성한 그룹에서 소유자 역할이어야 합니다.

템플릿에서 프로젝트 생성하기

우선, 그룹 내에서 프로젝트를 생성해야 합니다.

GitLab은 프로젝트 템플릿을 제공하여 다양한 사용 사례에 필요한 모든 파일을 갖춘 프로젝트를 더 쉽게 설정할 수 있게 합니다. 여기서는 일반 HTML 웹사이트용 프로젝트를 생성합니다.

프로젝트를 생성하려면:

왼쪽 사이드바의 맨 위에서 새로 만들기() 및 새 프로젝트/저장소 만들기를 선택합니다.
템플릿에서 만들기를 선택합니다.
Pages/Plain HTML 템플릿을 선택합니다.
프로젝트 이름 텍스트 상자에 이름(예: 내 웹사이트)을 입력합니다.
프로젝트 URL 드롭다운 목록에서 프로젝트를 생성할 그룹을 선택합니다.
프로젝트 슬러그 텍스트 상자에 프로젝트의 슬러그(예: my-website)를 입력합니다.
선택 사항. 프로젝트 설명 텍스트 상자에 프로젝트 설명을 입력합니다. 예: 제품 분석이 있는 일반 HTML 웹사이트. 이 설명은 언제든지 추가하거나 편집할 수 있습니다.
가시성 수준에서 프로젝트의 원하는 수준을 선택합니다. 그룹 내에서 프로젝트를 생성하는 경우 프로젝트의 가시성 설정은 부모 그룹의 가시성 설정보다 적어도 제한적이어야 합니다.
프로젝트 생성을 선택합니다.

이제 일반 HTML 웹사이트에 필요한 모든 파일이 있는 프로젝트를 갖게 되었습니다.

프로젝트에 제품 분석 등록하기

웹사이트 사용에 대한 이벤트를 수집하고 대시보드를 보려면 프로젝트에 제품 분석을 등록해야 합니다.

새 프로젝트에 제품 분석 등록하려면:

프로젝트에서 분석 > 대시보드 보기를 선택합니다.
제품 분석 항목을 찾고 설정을 선택합니다.
제품 분석 설정을 선택합니다.
인스턴스가 완료될 때까지 기다립니다.
HTML 스크립트 설정 스니펫을 복사합니다. 다음 단계에서 필요합니다.

이제 프로젝트가 등록되었고 애플리케이션이 이벤트를 보내기 위해 준비되었습니다.

웹사이트에 추적 스니펫 삽입하기

GitLab로 사용 데이터를 수집하고 전송하려면 웹사이트에 코드 스니펫을 포함해야 합니다. 여러 플랫폼 및 기술별 추적 SDK 중에서 응용 프로그램과 통합할 수 있는 SDK를 선택할 수 있습니다. 이 예시 웹사이트에서는 브라우저 SDK를 사용합니다.

새 웹사이트를 설정하려면:

프로젝트에서 코드 > 저장소를 선택합니다.
편집 > 웹 IDE를 선택합니다.
왼쪽 웹 IDE 툴바에서 파일 탐색기를 선택하고 public/index.html 파일을 엽니다.

public/index.html 파일에 닫히는 </body> 태그 앞에 이전 섹션에서 복사한 스니펫을 붙여넣습니다.

index.html 파일의 코드는 다음과 같아야 합니다 (appId 및 host는 등록 단계에서 제공된 값이어야 합니다):

 <!DOCTYPE html>
 <html>
   <head>
     <meta charset="utf-8">
     <meta name="generator" content="GitLab Pages">
     <title>GitLab Pages를 사용하는 일반 HTML 사이트</title>
     <link rel="stylesheet" href="style.css">
   </head>
   <body>
     <div class="navbar">
       <a href="https://pages.gitlab.io/plain-html/">일반 HTML 예제</a>
       <a href="https://gitlab.com/pages/plain-html/">저장소</a>
       <a href="https://gitlab.com/pages/">다른 예제</a>
     </div>

     <h1>안녕, 세상아!</h1>

     <p>
       이것은 어떤 화려한 정적 사이트 생성기도 사용하지 않은 GitLab Pages의 간단한 일반 HTML 웹사이트입니다.
     </p>
     <script src="https://unpkg.com/@gitlab/application-sdk-browser/dist/gl-sdk.min.js"></script>
     <script>
       window.glClient = window.glSDK.glClientSDK({
         appId: 'YOUR_APP_ID',
         host: 'YOUR_HOST',
       });
     </script>
   </body>
 </html>

왼쪽 웹 IDE 툴바에서 소스 제어를 선택합니다.
GitLab 제품 분석 추적 스니펫 추가와 같은 커밋 메시지를 입력합니다.
커밋을 선택하고 새 브랜치를 만들거나 계속할 것인지 요청되면 계속 진행을 선택합니다. 그럼 웹 IDE를 닫을 수 있습니다.
프로젝트에서 빌드 > 파이프라인을 선택합니다. 최근 커밋으로 파이프라인이 트리거됩니다. 실행 및 업데이트된 웹사이트를 배포하는 것을 기다리세요.

사용 데이터 수집

데이터 수집

표시된 웹사이트가 배포된 후에 이벤트가 수집되기 시작합니다.

프로젝트에서 배포 > 페이지를 선택합니다.
웹사이트를 열려면 페이지 접속에서 고유한 URL을 선택합니다.
페이지 조회 이벤트를 수집하려면 페이지를 몇 번 새로고침합니다.

대시보드 보기

기본적으로 GitLab은 두 가지 제품 분석 대시보드인 대상 그룹과 행위를 제공합니다. 이러한 대시보드는 프로젝트가 일부 이벤트를 받은 후에 사용할 수 있게 됩니다.

이러한 대시보드를 보려면:

프로젝트에서 분석 > 대시보드를 선택합니다.
사용 가능한 대시보드 목록에서 대상 그룹 또는 행위를 선택합니다.

이것으로 마무리되었습니다! 이제 제품 분석이 포함된 웹사이트 프로젝트를 갖게 되었는데, 이를 통해 사용자의 행동을 이해하고 팀의 작업을 더 효율적으로 수행할 수 있도록 데이터를 수집하고 시각화할 수 있습니다.

튜토리얼: GitLab Pages 웹사이트 프로젝트에 제품 분석 설정하기

시작하기 전에

템플릿에서 프로젝트 생성하기

프로젝트에 제품 분석 등록하기

웹사이트에 추적 스니펫 삽입하기

사용 데이터 수집

데이터 수집

대시보드 보기

도움말

기능 사용 가능성과 제품 평가판

도움받기