대부분의 웹사이트에서는 추적 분석을 위한 식별 값, 광고, 검색어 등으로 여러 개의 파라미터가 생성됩니다. 이에 1개의 페이지에 여러 개의 URL이 생기는 경우가 많습니다. 웹 프론트엔드 모니터링 솔루션 WPM에서는 사용자가 접속한 URL 데이터를 수집하기 때문에 여러 개의 URL 페이지로 보일 수 있습니다.
이 경우 데이터가 파편화되기 때문에 모니터링이 불편할 수 있습니다. 이때 ‘URL 패턴 설정’을 하시면 더욱 편리하고, 효과적으로 웹페이지의 성능 모니터링이 가능합니다.
예시 웹사이트로 알아보기
이해를 돕기 위해 위와 같은 웹사이트 IMQA Mall이 있다고 가정하고, 해당 사이트를 기준으로 URL 패턴을 설정해 보겠습니다. 개발∙운영 중이신 웹사이트 및 URL 구조와 비교하여 설정해 보세요.
웹사이트 구성
먼저, 예시 사이트인 IMQA mall의 사이트 구성과 URL 구조에 대해 확인해 볼까요? IMQA mall은 Main, Product, Event, Cart, Community와 같은 메뉴로 구성되어 있습니다.
그리고 Product 메뉴는 Outer, Top, Skirt, Pants, Dress와 같은 카테고리로 이루어져 있습니다.
URL 구조
URL 구조는 웹사이트 구조나 개발 사항에 따라 상이합니다. 그러나 기본적인 URL 구조를 이해하시면, 다른 형태라도 쉽게 URL 패턴을 설정하실 수 있습니다.
* 보통 파라미터는 URL 뒤 물음표(?) 이후로 붙는 값입니다.
URL 패턴 설정
웹사이트와 URL 구조를 파악하셨다면, 이제 URL 패턴을 설정해 보실까요?
1. URL 패턴은 '프로젝트 리스트 > 관리[...] > URL 패턴 설정'에서 설정하실 수 있습니다.
2. 설정하고자 하시는 경로, 쿼리 파라미터 값을 입력해 주세요.
- 경로에는 도메인 값을 제외한 URL과 변수 입력
- 쿼리 파라미터는 '키=값' 형태로 입력
우선순위가 높은 URL 패턴부터 적용되니 드래그하여 원하시는 순서로 변경해 주세요.
* 입력 시, 변수 {group}과 {value}를 활용하실 수 있습니다. {group}은 묶고 싶은 단위에, {value}는 풀고 싶은/개별 값으로 사용할 단위에 사용합니다. 아래 실제 적용 방법을 통해 자세히 설명해 드릴게요!
경로, 쿼리 파라미터 설정 방법
“많은 채널에서 광고를 집행하다보니, 페이지마다 파라미터도 다양해져서 페이지 수가 너무 많아져요.”
상품 페이지의 URL은 https://shop.imqa.io/product/outer/12345이지만, 광고와 추적 등으로 인해 URL이 여러개 생성되었는데요. 데이터가 파편화되기 때문에 파라미터 값 구분 없이 하나의 상품 페이지(https://shop.imqa.io/product/outer/12345)로 통합하여 모니터링이 필요합니다. 이 때, 어떻게 설정하는지 함께 확인해 보실까요?
#1. 특정 카테고리 내 모든 상품 페이지에 적용하는 경우
https://shop.imqa.io/product/outer/12345 하위의 파라미터 값을 구분하지 않고 .../12345까지만 볼 수 있도록 설정할 때, 다른 페이지에도 적용이 필요할 수 있습니다.
이때, 예시 사이트에서는 /12345 자리에 다른 상품 페이지 정보가 들어옵니다. 각기 다른 상품 페이지 값이므로 해당 부분은 개별 데이터가 들어와야 하므로 {value}를 사용합니다.
쿼리 파라미터 값은 따로 구분하지 않기 때문에 입력하지 않습니다.
위와 같이 상품 페이지 값에만 변수 {value} 를 적용하였기 때문에, outer 카테고리 내 상품 페이지만 파라미터 값 구분 없이 개별 상품 페이지 1개씩 데이터가 보입니다.
#2. Product 메뉴 내 속한 모든 상품 페이지에 적용할 경우
위의 경우와 달리 모든 카테고리 내 상품 페이지에 적용이 필요할 수 있습니다. 예시 사이트 IMQA mall은 Product는 상품 카테고리로 구성되어 있고, 카테고리 내 상품 페이지가 있는데요.
카테고리가 많지 않다면 위의 #1 방법으로 개별 등록할 수도 있지만, 카테고리가 많다면 등록이 어렵습니다. 적다고 해도 등록 과정에서 누락되는 경우가 발생할 수도 있구요. 이때, 아래와 같이 간단하게 설정해 보세요.
위와 같이 설정하면, Product 뒤 카테고리도 개별 값으로 구분되어 보입니다.
URL 패턴 기본 설정 방법에 대해 안내해 드렸는데요. {group}과 {value} 값을 활용하시면 원하시는 형태로 페이지를 구분하여 확인하실 수 있습니다. 자주 사용하는 URL 패턴 설정 방법은 아래 #2편 포스팅에서 확인해 보세요!
- URL 패턴 설정 - #2. 자주 사용하는 설정
URL 패턴 설정 시 궁금한 사항이 있으시다면 언제든지 문의해 주세요. 필요에 따라 사이트 구성 확인 후 원하시는 내용에 따라 설정 방법을 개별 안내해 드리겠습니다.
