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

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

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

이 튜토리얼을 따라하여 예제 웹사이트 프로젝트를 설정하고, 제품 분석을 적용하여 웹사이트에 이벤트를 수집하고, 프로젝트 수준의 분석 대시보드를 사용하여 사용자 동작을 이해하는 방법에 대해 배워보세요.

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

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

시작하기 전에

이 튜토리얼을 따라가려면 다음이 필요합니다:

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

템플릿에서 프로젝트 생성

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

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

프로젝트를 생성하려면:

좌측 사이드바에서 상단에 새로 만들기 ()를 선택하고 새 프로젝트/리포지터리를 선택합니다.
템플릿에서 생성을 선택합니다.
Pages/Plain HTML 템플릿을 선택합니다.
프로젝트 이름란에 이름을 입력(예: 나의 웹사이트).
프로젝트 URL 드롭다운 디렉터리에서 프로젝트를 생성하려는 그룹을 선택합니다.
프로젝트 슬러그란에 프로젝트의 슬러그를 입력합니다(예: my-website).
선택 사항. 프로젝트 설명란에 프로젝트에 대한 설명을 입력합니다. 예를 들어, 제품 분석이 적용된 일반 HTML 웹사이트와 같이 설명을 추가하거나 편집할 수 있습니다.
가시성 레벨 아래에서 프로젝트에 대한 원하는 레벨을 선택합니다. 그룹 내에서 프로젝트를 생성하는 경우, 프로젝트의 가시성 설정은 그룹의 가시성보다 적어도 제한적이어야 합니다.
프로젝트 생성을 선택합니다.

이제 모든 필요한 파일이 있는 일반 HTML 웹사이트용 프로젝트가 생성되었습니다.

제품 분석으로 프로젝트 참여시키기

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

새 프로젝트에 제품 분석을 참여시키려면:

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

이제 프로젝트가 참여되어 애플리케이션이 이벤트를 보내도록 준비되었습니다.

웹사이트 추적

GitLab에 사용 데이터를 수집하고 전송하려면 웹사이트에 코드 스니펫을 포함해야 합니다. 여러 플랫폼 및 기술별 추적 SDK 중에서 선택할 수 있으며, 이 예제 웹사이트에서는 Browser 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>Hello World!</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 웹사이트 프로젝트에서 제품 분석 설정하기

시작하기 전에

템플릿에서 프로젝트 생성

제품 분석으로 프로젝트 참여시키기

웹사이트 추적

사용 데이터 수집

대시보드 보기

도움말

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

도움받기