결제 완료 URL에서 주문 ID 정보를 추출하고 싶어요
GTM 사용자 정의 변수를 활용해서 URL 매개변수 정보 추출하기
특정 데이터를 추출할 때 구글 태그매니저 변수를 활용하세요 :)
웹사이트 URL에 존재하는 특정 매개변수 데이터를 보고서에서 조회하고 싶다면 구글 태그 매니저에서 변수(Variables)를 활용하세요. 'URL' 변수 유형을 활용하면 '주문번호'나 '검색어' 같은 데이터를 URL에서 추출한 뒤 보고서에서 조회할 수 있습니다. 구글 태그 매니저에서 선택할 수 있는 변수 카테고리는 2가지가 있으며, 기본 제공 변수(Built-In Variables)와 사용자 정의 변수(User-Defined Variables)가 있습니다. 이번 글에서는 구글 태그 매니저 'URL' 변수를 활용해서 특정 페이지 URL 패턴에 존재하는 데이터 추출 방법에 대해 설명드리겠습니다.
URL에는 페이지 경로 외에도 다양한 정보가 담겨져 있어요 :)
일반적으로 URL 정보에는 페이지 경로(Page Path) 뿐만 아니라 다양한 형태의 매개변수 정보가 호출됩니다. 이를테면 네이버 검색 광고를 통해 자사몰로 유입되는 경우를 가정하고 URL 패턴을 체크하면 수많은 URL 매개변수가 확인됩니다. 우리는 이를 'URL 매개변수' 혹은 'URL 쿼리 매개변수' 라고 부릅니다. 일반적으로 광고를 클릭해서 웹사이트로 랜딩되는 URL 매개변수에는 광고 상품 및 캠페인에 대한 정보가 포함됩니다.
이를테면 어떤 키워드를 통해 유입되었으며, 검색 결과 화면에서 몇 번째 순서의 광고를 클릭했는지, 광고 그룹 ID가 무엇인지 등의 정보를 확인할 수 있습니다. 이 정보를 토대로 네이버에서는 광고 트래킹 정보를 광고주에게 제공하고, 광고주를 해당 정보를 광고 관리자 화면에서 확인하고 광고 캠페인 성과를 체크할 수 있는 것이죠.
네이버 검색광고 클릭 시 URL에 담겨진 매개변수별 의미같은 맥락으로 제가 테스트로 운영하고 있는 쇼핑몰의 주문완료 페이지 URL을 보면 아래와 같이 Page Path 뒤에 'order_id'라는 URL 매개변수가 확인됩니다. 일반적으로 매개변수는 페이지 경로 뒤에 물음표(?) 기호를 붙이고 매개변수가 따라오는 형태입니다. GA4에서 전자상거래 데이터를 수집하려면 필요한 필수 값이 바로 '주문 ID'입니다. 데이터 레이어(dataLayer)를 활용해서 해당 정보를 수집할 수도 있지만, URL 상에 매개변수로 '주문 ID'가 존재하는 경우 GTM 변수를 활용해서 수집하는 것도 대안이 될 수 있습니다. 그럼 주문완료 URL에서 확인되는 주문 ID(order_id) 값을 GTM 변수로 수집하는 과정을 설명드리겠습니다.
주문완료 시 URL에서 확인되는 주문번호 예시
https://goodeal.kr/order/order_result.html?order_id=20230101-0000041
GTM 변수를 활용해서 URL에서 확인되는 주문 ID 데이터 수집하기
구글 태그 매니저 접속 후 좌측 메뉴에서 변수를 선택합니다. 마우스 스크롤을 내리면 사용자 정의 변수 카테고리가 확인됩니다. 우측 상단에 있는 '새로 만들기(New)' 버튼을 클릭합니다.
GTM 변수 유형 중 URL 타입을 선택하고, '구성요소 유형(Component Type)'을 '검색어(Query)'로 선택한 뒤, '검색어(Query) Key' 필드에 'order_id'를 입력합니다. '검색어' 유형은 이처럼 Key와 Value 형태의 매개변수가 존재하는 경우 사용합니다. 만약 '주문 ID'에 해당하는 매개변수 이름이 'order_id'가 아니라 'purchase_id'라면 해당 값을 필드에 입력하시면 됩니다.
https://goodeal.kr/order/order_result.html?purchase_id=20230101-0000041
변수 생성이 완료되면 GTM 미리보기를 통해 데이터 검수
변수를 생성했으면 주문 테스트를 통해 해당 변수에 '주문 ID'가 제대로 들어오는지 확인합니다. GTM 미리 보기 모드에서 좌측 이벤트 목록을 보시고 'purchase' 이벤트를 클릭합니다. 그 상태에서 변수 Tab을 클릭한 다음, 앞서 '주문 ID'를 수집하기 위해 생성한 'URL - order_id' 변수값을 확인합니다. 주문 ID가 String 타입으로 정상적으로 수집되었네요. 값이 제대로 확인되지 않으면 변수 세팅 시 '검색어(Query)' Key 값에 오타가 없는지 확인해보세요.
GA 데이터 수집 시 기본 원칙은 '데이터 레이어(dataLayer)'를 활용해서 주요 이벤트 및 사용자 정보를 수집하시구요. 만약 개발팀 지원이 당장 어렵다면 맞춤 자바스크립트 변수를 사용하거나, 앞서 설명드린 URL 쿼리 매개변수 같은 GTM 변수를 활용해서 데이터 수집하시면 됩니다. 다시 말씀드리지만, 주문 관련 데이터처럼 중요한 데이터는 반드시 데이터 레이어를 사용해야 웹사이트 UI가 변경되는 상황이 발생하더라도 오차 없이 정확하게 수집할 수 있습니다.
쿼리 매개변수 외에 Hostname, Path, Fragment 활용한 세팅 가능
URL 변수에는 '검색어' 뿐만 아니라 Host Name, Path, Fragment(#) 등의 타입을 선택할 수 있습니다. 'Fragment'는 '#' 기호로 시작해서 그 뒤에 오는 문자열의 말합니다. 페이지의 특정 위치나 섹션으로 이동하기 위해 사용되고, 주로 SPA(Single Page Application)에서 페이지 일부 내용을 동적으로 변경하려고 사용합니다. 여러분이 운영하시는 자사몰의 URL 패턴을 확인해보시고 변수를 생성해서 데이터를 수집해보시기 바랍니다.
저의 두번째 책인 '구글 애널리틱스 4 실전 활용법'이 출간되었습니다. GA4를 이제 막 학습하시는 분들이나 현업에서 실전 활용이나 세팅을 어떻게 해야 할지 고민이 많으시다면 구매하시길 적극 추천드립니다. 제가 실제 GA4 프로젝트를 진행하면서 겪었던 노하우와 팁을 책에 담았어요.
