본문으로 건너뛰기

Google Tag Manager로 연동하기

웹 서비스에 Google Tag Manager(GTM)가 설치되어 있다면, 사이트 코드를 고치지 않고 GTM의 맞춤 HTML 태그만으로 블럭스 데이터를 연동할 수 있습니다.

이 문서는 아래 순서로 태그를 만듭니다. 각 메서드의 자세한 설명은 Web SDK 문서를 참고하세요.

단계내용구분
1. 초기화모든 페이지에서 블럭스 Web SDK를 불러옵니다.필수
2. 로그인 · 로그아웃방문자를 회원 유저와 연결합니다.필수
3. 유저 정보연락처, 수신 동의, 서비스별 추가 정보를 연동합니다.선택
4. 행동 데이터회원가입, 상품 조회, 구매 같은 유저 행동을 연동합니다.선택

시작 전 준비​

  • 블럭스 콘솔의 계정 정보 메뉴에서 애플리케이션 아이디와 API 키를 확인하세요. 자세한 내용은 연동 키 확인하기를 참고하세요.
  • GTM의 변수 > 사용자 정의 변수 > 상수로 두 값을 등록해 두면, 아래 코드의 BLUX_APPLICATION_ID와 BLUX_API_KEY 자리에 변수로 넣을 수 있습니다.

1. 초기화​

항목설정 값
태그 유형맞춤 HTML
트리거Initialization - All Pages
태그 실행 옵션페이지당 한 번
필요 변수애플리케이션 아이디, API 키, 로그인한 회원의 유저 ID (로그인하지 않았으면 빈 값)
<script src="https://scripts.blux.ai/blux_web_sdk/3.0.0/sdk_script.js"></script>

<script>
  if (!window.bluxClient) {
    window.bluxClient = new BluxClient({
      bluxApplicationId: "BLUX_APPLICATION_ID",
      bluxAPIKey: "BLUX_API_KEY",
    });
  }

  // 로그인한 회원이면 페이지마다 유저 ID를 연결하세요.
  var userId = "{{로그인 유저 ID}}";
  if (userId) {
    window.bluxClient.signIn({ userId: userId });
  }
</script>

행동 데이터는 초기화 이후에 기록해야 합니다. 초기화 전에 실행하면 정상 작동하지 않아요.

다른 태그에서는 window.bluxClient로 호출하세요. const bluxClient로 선언하면 다른 태그에서 찾지 못할 수 있어요.

초기화 코드는 한 페이지에서 한 번만 실행해야 합니다. 파라미터 이름은 대소문자까지 정확히 bluxApplicationId, bluxAPIKey로 입력하세요.

태그 순서 지정​

2~4단계에서 만드는 모든 태그에 아래 설정을 적용하세요. 초기화 태그가 먼저 실행된 다음에 각 태그가 실행됩니다.

1

태그 순서 지정 메뉴를 여세요.

  • 태그 구성 > 고급 설정 > 태그 순서 지정을 클릭하세요.
2

초기화 태그를 설정 태그로 지정하세요.

  • (태그명)이(가) 실행되기 전에 태그 실행을 체크하고, 설정 태그로 1단계의 초기화 태그를 선택하세요.
  • 설정 태그가 실패하거나 일시중지된 경우 (태그명) 실행하지 않음도 함께 체크하세요.

2. 로그인 · 로그아웃​

로그인했을 때​

항목설정 값
태그 유형맞춤 HTML
트리거로그인 완료 시
필요 변수유저 ID (string)
<script>
  window.bluxClient.signIn({ userId: "USER_ID" });
</script>

로그아웃했을 때​

항목설정 값
태그 유형맞춤 HTML
트리거로그아웃 버튼 클릭 시
<script>
  window.bluxClient.signOut();
</script>

signIn()에 넣는 유저 ID는 CSV 업로드·API 등 블럭스에 연동하는 다른 유저 데이터의 유저 ID와 같은 값이어야 합니다. 값이 다르면 같은 회원이 서로 다른 유저로 나뉘어 쌓여요.

3. 유저 정보​

기본 정보​

연락처와 수신 동의 여부를 연동합니다. 가지고 있는 값만 넣으세요.

항목설정 값
태그 유형맞춤 HTML
트리거로그인 완료 시, 회원 정보·수신 동의 변경 시
<script>
  window.bluxClient.setUserProperties({
    userProperties: {
      phone_number: "01012345678",
      email_address: "user@example.com",
      marketing_notification_consent: true,
      marketing_notification_kakao_consent: true,
      marketing_notification_sms_consent: true,
      marketing_notification_email_consent: true,
    },
  });
</script>
필드설명
phone_number(선택) 휴대폰 번호입니다. 숫자만 입력하세요.
email_address(선택) 이메일 주소입니다.
marketing_notification_consent(선택) 광고성 정보 수신 동의 여부입니다.
marketing_notification_kakao_consent(선택) 카카오 채널 광고성 정보 수신 동의 여부입니다.
marketing_notification_sms_consent(선택) 문자 광고성 정보 수신 동의 여부입니다.
marketing_notification_email_consent(선택) 이메일 광고성 정보 수신 동의 여부입니다.

추가 정보 (커스텀 유저 속성)​

회원 등급, 계약 상태처럼 서비스에서만 쓰는 유저 정보는 커스텀 유저 속성으로 연동합니다. 연동한 값으로 룰 오디언스를 만들 수 있어요.

항목설정 값
태그 유형맞춤 HTML
트리거로그인 완료 시, 해당 정보 변경 시
<script>
  window.bluxClient.setCustomUserProperties({
    customUserProperties: {
      membership_level: "GOLD",
      available_points: 12000,
      is_subscribed: true,
      subscription_end_date: "2027-03-31T00:00:00+09:00",
    },
  });
</script>

* 값은 문자, 숫자, true/false, null을 쓸 수 있습니다. 날짜는 ISO 8601 형식의 문자로 넣으세요.

4. 행동 데이터​

서비스에 해당하는 행동만 골라서 연동하세요. 이벤트별 설명은 행동 데이터 연동하기를 참고하세요.

회원가입 완료​

항목설정 값
태그 유형맞춤 HTML
트리거회원가입 완료 시
<script>
  window.bluxClient.sendEvent(
    new AddCustomEvent({ eventType: "signup" })
  );
</script>

* 회원가입 직후 로그인 상태가 되면, 로그인 태그가 이 태그보다 먼저 실행되도록 설정하세요.

상품 상세 페이지 조회​

항목설정 값
태그 유형맞춤 HTML
트리거상품 상세 페이지 조회 시
필요 변수상품 ID (string)
<script>
  window.bluxClient.sendEvent(
    new AddProductDetailViewEvent({ itemId: "ITEM_ID" })
  );
</script>

찜하기 · 장바구니 담기​

항목설정 값
태그 유형맞춤 HTML
트리거찜하기 버튼 클릭 시 / 장바구니 담기 버튼 클릭 시
필요 변수상품 ID (string)
<script>
  // 찜하기
  window.bluxClient.sendEvent(new AddLikeEvent({ itemId: "ITEM_ID" }));

  // 장바구니 담기
  window.bluxClient.sendEvent(new AddCartaddEvent({ itemId: "ITEM_ID" }));
</script>

구매 완료​

항목설정 값
태그 유형맞춤 HTML
트리거구매 완료 페이지 조회 시
<script>
  window.bluxClient.sendEvent(
    new AddOrderEvent({
      orderId: "ORDER_ID",
      orderAmount: 12000,
      paidAmount: 8000,
      items: [
        { id: "ITEM_ID_1", price: 2000, quantity: 1 },
        { id: "ITEM_ID_2", price: 10000, quantity: 1 },
      ],
    })
  );
</script>
필드설명
orderId(필수) 주문 고유 번호입니다.
orderAmount(필수) 주문한 상품 금액의 합입니다.
paidAmount(필수) 할인·쿠폰을 적용한 실결제 금액입니다. 캠페인 성과의 매출액은 이 금액으로 집계해요.
items(필수) 주문한 상품 목록입니다. 상품마다 id(상품 ID), price(가격), quantity(수량, 선택)를 넣으세요.

그 밖의 행동 (커스텀 이벤트)​

상담 신청, 예약처럼 기본 이벤트에 없는 행동은 커스텀 이벤트로 연동합니다. 이벤트 타입(eventType)은 영문 소문자와 밑줄(_)로 정하세요.

항목설정 값
태그 유형맞춤 HTML
트리거해당 행동을 완료했을 때
<script>
  window.bluxClient.sendEvent(
    new AddCustomEvent({
      eventType: "reservation",
      customEventProperties: {
        reservation_id: "RESERVATION_ID",
        location: "강남점",
      },
    })
  );
</script>

연동 확인하기​

1

GTM 미리보기에서 태그 실행을 확인하세요.

  • GTM 미리보기 모드로 사이트에 접속해서, 각 태그가 원하는 시점에 실행되는지 확인하세요.
2

컨테이너를 게시하세요.

  • GTM 컨테이너를 게시한 다음, 담당 매니저에게 알려주시면 데이터가 잘 들어오는지 확인해 드려요.

GTM 연동이 완료되었어요!