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를 초기화하는 기본 코드를 설치합니다. 이 태그는 웹사이트의 모든 페이지에서 실행되어야 합니다.

  1. GTM 컨테이너에서 **[태그] > [새로 만들기]**를 클릭합니다.
  2. 태그 구성을 클릭하고 [맞춤 HTML] 유형을 선택합니다.
  3. 링크의 스크립트를 복사하여 HTML 입력란에 붙여넣습니다.
  4. 트리거를 클릭하고 [All Pages] (모든 페이지)를 선택합니다.
  5. 태그 이름을 "SauceLink - Base SDK" 등으로 지정하고 저장합니다.

2단계: 이벤트 트래킹 설정

사용자의 주요 행동(상품 조회, 주문 완료 등)을 추적하기 위해 추가 태그를 설정합니다. 각 이벤트 시점에 맞춰 데이터를 전송하려면 GTM의 변수(Variables) 기능 등을 활용하여 웹사이트의 데이터를 매핑해야 합니다.

1. 상품 상세 페이지 조회 (PRODUCT_DETAIL)

사용자가 상품 상세 페이지에 진입했을 때 발생시키는 태그입니다.

  1. **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
  2. 링크의 코드를 확인하여 입력합니다. (변수 부분은 GTM 변수 {{ }} 문법을 사용하여 연동하거나 기존 값을 이용해야됩니다..)
  3. 트리거는 해당 상품 상세 페이지가 조회될 때 발생하는 고객사 별 트리거(예: Page View -상품 페이지뷰)를 연결합니다.

2. 주문 완료 (ORDER_COMPLETE)

사용자가 결제를 완료했을 때 발생시키는 태그입니다.

  1. **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
  2. 링크 의 코드를 확인하여 입력합니다. order_id,productInfo 배열은 구매한 상품 목록을 반복문 등을 통해 동적으로 생성하거나, GTM 변수에서 완성된 배열 객체를 가져와야 합니다.
  3. 트리거는 구매 완료 페이지 도달 또는 구매 완료 이벤트(Purchase) 발생 시점을 연결합니다. (고객사 상황에 맞는 이벤트를 연결해주세요.)

3. 주문 취소 (ORDER_CANCEL)

사용자가 주문을 취소했을 때 발생시키는 태그입니다.

  1. **[태그] > [새로 만들기] > [맞춤 HTML]**을 선택합니다.
  2. 링크의 코드를 확인하여 입력합니다. 주문완료와 동일 혹은 다르다면 별도 동적으로 생성한 변수를 선언하여 값을 지정해주세요
  3. 트리거는 주문 취소 버튼 클릭 또는 취소 완료 이벤트 발생 시점을 연결합니다.

3단계: 설정 확인 및 게시

  1. 미리보기(Preview) 모드를 실행하여 웹사이트에 접속합니다.
  2. Google Tag Assistant 창에서 SauceLink - Base SDK 태그가 Initialization 또는 Page View 시점에 정상적으로 Fired 되는지 확인합니다.
  3. 상품 페이지 이동 및 구매 테스트를 진행하며 설정한 이벤트 태그들이 적절한 시점에 실행되는지 확인합니다.
  4. 테스트가 완료되면 GTM 컨테이너를 제출(Submit)게시(Publish) 합니다.

도움이 더 필요하신가요?

이 가이드는 GTM 내에서 **Data Layer(데이터 레이어)**가 이미 구성되어 있다는 가정하에 작성되었습니다. 별도 google Tagmanager 사용 방법에 대해서는 아래 링크를 참고해 주세요

  1. 구글 태그 매니저 설치하기 : 링크
  2. 태그 매니저 사용자 정의 변수 사용 방법 : 링크