Google Tag Manager로 SauceLink Web SDK 설치하기
Google Tag Manager를 사용하여 웹사이트에 SauceLink Web SDK를 설치하고 이벤트를 설정하는 방법을 안내합니다.
Google Tag Manager 설정하기 - SauceLink Web SDK
이 가이드는 Google Tag Manager(이하 GTM)를 사용하여 웹사이트에 SauceLink Web SDK를 설치하고 이벤트를 설정하는 방법을 안내합니다.
GTM을 사용하면 웹사이트의 소스 코드를 직접 수정하지 않고도 태그를 통해 SDK를 관리하고 마케팅 성과를 추적할 수 있습니다.
사전 준비
시작하기 전에 다음 항목들이 준비되어 있어야 합니다.
- Google Tag Manager 계정 및 컨테이너
- SauceLink로부터 발급받은 partnerUniqueId (파트너 고유 ID)
- SauceLink로부터 발급받은 webToken (웹 SDK 토큰)
1단계: SDK 기본 설정 (Base Code)
SauceLink Web SDK를 초기화하는 기본 코드를 설치합니다. 이 태그는 웹사이트의 모든 페이지에서 실행되어야 합니다.
- GTM 컨테이너에서 **[태그] > [새로 만들기]**를 클릭합니다.
- 태그 구성을 클릭하고 [맞춤 HTML] 유형을 선택합니다.
- 링크의 스크립트를 복사하여 HTML 입력란에 붙여넣습니다.
- 트리거를 클릭하고 [All Pages] (모든 페이지)를 선택합니다.
- 태그 이름을 "SauceLink - Base SDK" 등으로 지정하고 저장합니다.
2단계: 이벤트 트래킹 설정
사용자의 주요 행동(상품 조회, 주문 완료 등)을 추적하기 위해 추가 태그를 설정합니다. 각 이벤트 시점에 맞춰 데이터를 전송하려면 GTM의 변수(Variables) 기능 등을 활용하여 웹사이트의 데이터를 매핑해야 합니다.
1. 상품 상세 페이지 조회 (PRODUCT_DETAIL)
사용자가 상품 상세 페이지에 진입했을 때 발생시키는 태그입니다.
- **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
- 링크의 코드를 확인하여 입력합니다. (변수 부분은 GTM 변수
{{ }}문법을 사용하여 연동하거나 기존 값을 이용해야됩니다..) - 트리거는 해당 상품 상세 페이지가 조회될 때 발생하는 고객사 별 트리거(예: Page View -상품 페이지뷰)를 연결합니다.
2. 주문 완료 (ORDER_COMPLETE)
사용자가 결제를 완료했을 때 발생시키는 태그입니다.
- **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
- 링크 의 코드를 확인하여 입력합니다. order_id,productInfo 배열은 구매한 상품 목록을 반복문 등을 통해 동적으로 생성하거나, GTM 변수에서 완성된 배열 객체를 가져와야 합니다.
- 트리거는 구매 완료 페이지 도달 또는 구매 완료 이벤트(Purchase) 발생 시점을 연결합니다. (고객사 상황에 맞는 이벤트를 연결해주세요.)
3. 주문 취소 (ORDER_CANCEL)
사용자가 주문을 취소했을 때 발생시키는 태그입니다.
- **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
- 링크의 코드를 확인하여 입력합니다. 주문완료와 동일 혹은 다르다면 별도 동적으로 생성한 변수를 선언하여 값을 지정해주세요
- 트리거는 주문 취소 버튼 클릭 또는 취소 완료 이벤트 발생 시점을 연결합니다.
3단계: 설정 확인 및 게시
- 미리보기(Preview) 모드를 실행하여 웹사이트에 접속합니다.
- Google Tag Assistant 창에서 SauceLink - Base SDK 태그가 Initialization 또는 Page View 시점에 정상적으로 Fired 되는지 확인합니다.
- 상품 페이지 이동 및 구매 테스트를 진행하며 설정한 이벤트 태그들이 적절한 시점에 실행되는지 확인합니다.
- 테스트가 완료되면 GTM 컨테이너를 제출(Submit) 및 게시(Publish) 합니다.
도움이 더 필요하신가요?
이 가이드는 GTM 내에서 **Data Layer(데이터 레이어)**가 이미 구성되어 있다는 가정하에 작성되었습니다. 별도 google Tagmanager 사용 방법에 대해서는 아래 링크를 참고해 주세요
Updated about 2 months ago