Ogaeng

Journey to Growth Hacker

구글 태그 매니저로 카페24 쇼핑몰에 GA 향상된 전자상거래 설정하기

24 September 2020

우리나라에서 가장 많이 사용되는 임대형 쇼핑몰에는 카페24가 있다. 그런데 임대몰 사용자는 개발 인력이 부족한 경우가 많아 마케터는 GA를 통한 분석을 더 자세하게 하고 싶어도 설정이 쉽지 않아 포기하곤 한다.

물론 카페24 앱스토어 등을 통해 전자상거래 설정을 제공하는 서비스가 있지만 단순히 전자상거래 설정만이 아닌 더 다양한 설정을 GTM으로 하고 싶을 때에는 사용하기가 쉽지 않다.

그래서 이번 글에서는 GA와 GTM을 조금이라도 다루는 마케터를 위해 카페24에서 쇼핑몰 내부 코드 수정 없이 GTM만을 이용해 간단하게 향상된 전자상거래 세팅하는 방법을 이야기하려고 한다. 막상 모두 완료하고 나면 적은 양이지만 설명을 위해 내용이 길어질 수 있어 필요한 부분만 눌러 이동할 수 있도록 목차를 준비했다.

목차

1. 카페24에 구글 태그 매니저 설치하기

먼저 GTM에서 새로운 컨테이너를 만들고 아래와 같이 GTM 스니펫 설치 코드가 등장하면 브라우저의 새 탭을 열고 카페24 쇼핑몰 관리자로 접속한다.

GTM 스니펫

관리자에서 상점관리 → 운영관리 → 검색엔진최적화(SEO)로 접속한 후 [고급 설정] 탭을 누른다.

카페24에 GTM 넣기

HTML 태그 직접 입력에서 PC 쇼핑몰과 모바일 쇼핑몰에 있는 [Head 태그 소스], [Body 태그 소스]에 각각 알맞은 GTM 스니펫 코드를 입력하고 하단에 [저장]을 누른다.

다시 GTM으로 돌아와서 GA 페이지뷰 태그를 만든다.(GA 태그를 만드는 방법은 생략하겠다. 만약 GA 태그 만드는 방법을 모른다면 이 글은 오늘은 그만 보고 다음에 다시 보러 오자)

GA 향상된 전자상거래 설정

향상된 전자상거래를 사용하려면 전자상거래 기능을 작동시켜야 한다. GA에서 [관리] → [보기] → [전자상거래 설정]에서 [전자상거래 사용]을 설정으로 변경하고 아래에 등장하는 [향상된 전자상거래 보고서 사용 설정]도 설정으로 변경한다. 그리고 저장한다.

GA 전자상거래 설정

이제 기초적인 준비는 끝났으니 본격적으로 설정을 시작해보자.

2. 상품 상세 보기

쇼핑몰 방문자가 가장 많이 방문하고 오래 머무는 페이지가 바로 상품 상세 보기 페이지이다. 이제 여기서 상품 정보를 담고 있는 변수를 찾아 GTM으로 가져오면 된다. 가장 먼저 할 일은 상품 상세 보기 페이지에서 실행되는 어떤 변수에 우리가 원하는 값이 들어있는지 찾아보는 것인데, 찾는 과정은 생략하고 어떤 변수에 값이 들어있는지 나열하면 아래와 같다.

  • 상품 번호: iProductNo
  • 상품명: product_name
  • 판매가: product_sale_price
  • 카테고리 번호: iCategoryNo

상품 정보 변수 만들기

이제 이 상품 정보를 가져와 GTM에서 변수를 만들어보자. GTM에서 [변수] → [새로 만들기]를 눌러 변수명은 상품 상세 보기 - 상품 배열로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var productInfo = [{
    'id': iProductNo,
    'name': product_name,
    'price': product_sale_price,
    'category': iCategoryNo
  }];
  return productInfo;
}

GTM 상세보기 변수

전자상거래 태그 만들기

[태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이름은 자유롭게 입력하고 태그 유형은 [맞춤 HTML]로 선택한다. 그리고 입력창에 아래 코드를 입력한다.

<script>
  dataLayer.push({
    'event': 'detail',
    'ecommerce': {
      'detail': {
        'actionField': {'step': 1},
        'products': {{상품 상세 보기 - 상품 배열}}
      }
    }
  });
</script>

위 코드는 GTM에서 사용하는 변수인 dataLayer에 상품 상세 보기 액션이 실행되었다는 정보를 보내주는 코드로 'event': 'detail' 부분은 detail이라는 이름을 가진 맞춤 이벤트를 실행시키는 코드이다. 이 코드가 실행되면 detail 맞춤 이벤트를 트리거로 하여 새로운 태그를 실행할 수 있다. 아래 ecommerce가 전자상거래를 뜻하고 그 아래에 있는 detail은 상품 상세 보기 액션을 말한다. 그리고 'products': {상품 상세 보기 - 상품 배열} 은 어떤 상품을 봤는지 보내주는 코드인데 상품 상세 보기 - 상품 배열 가 위에서 만든 상품 정보 변수이다.(위에서 GTM 변수를 만들 때 이름을 다르게 했다면 {를 두 번 타이핑하면 변수 목록이 나오는데 거기서 선택하면 된다.)

이제 트리거를 만들 차례인데 카페24의 상품 상세 보기 페이지는 다음과 같은 주소 형태를 가지고 있다.

/product/detail.html?product_no=상품번호

바로 위 주소를 가진 페이지에서 DOM 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하면 된다.(쇼핑몰의 상품 상세 보기 페이지의 구조가 위 내용과 다르다면 자신의 쇼핑몰 구조에 맞게 조건을 생성하면 된다.)

상세 트리거

이렇게 설정하면 태그는 다음 이미지처럼 설정이 된다.

상세 태그

GA 이벤트 태그 만들기

이제 detail 맞춤 이벤트가 발동되는 시점에 실행되는 상품 상세 보기의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(입력 내용은 참고만 하고 스타일에 맞게 자유롭게 설정하면 된다.)

  • 카테고리: 전자상거래
  • 작업: 상품 상세 보기
  • 비 상호작용 조회: 참
  • Google 애널리틱스 설정: 내 GA 추적 ID 변수 선택

그리고 이 태그의 설정 재정의 사용에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참으로 선택하고 데이터 영역 사용에 체크한다.

이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 detail 이라고 입력하고 저장한다.

이벤트 트리거

트리거까지 지정이 완료되었으면 아래와 같이 빠진 내용이 없는지 확인한 후 태그를 저장한다.

3. 장바구니

이제 여러 상품을 담고 한 번에 구매하기 위한 곳인 장바구니 페이지를 설정할 차례다. 상품 상세 보기와 마찬가지로 사용할 수 있는 변수가 있는지 먼저 체크하자. 장바구니 페이지에서는 장바구니에 담긴 상품 정보를 담고 있는 aBasketProductData 변수가 있다. 이 변수에는 배열의 형태로 상품의 정보가 담겨있는데 그중 필요한 정보를 GTM 변수로 만들어보자.

장바구니에 담긴 상품 변수 만들기

[변수] → [새로 만들기]를 눌러 변수명은 장바구니 보기 - 상품 배열로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  if (aBasketProductData.length > 0) {
    var source = aBasketProductData;
    var productInfo = [];
    for(var i = 0 ; i < source.length ; i++) {
        var productId = source[i].product_no;
        var productName = source[i].product_name;
        var productPrice = source[i].product_sale_price;
        var productQty = source[i].quantity;
        var productOpt = source[i].opt_str;
        var productCate = source[i].main_cate_no;

        productInfo.push({
          'id': productId,
          'name': productName,
          'price': productPrice,
          'variant': productOpt,
					'quantity': productQty,
          'category': productCate
        });
    }
    return productInfo;
  }
}

이 변수에는 장바구니에 담긴 상품의 상품 번호, 상품명, 판매가, 수량, 옵션, 카테고리 번호가 담긴다.

장바구니 변수

전자상거래 태그 만들기

[태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이름은 자유롭게 입력하고 태그 유형은 [맞춤 HTML]로 선택한다. 그리고 입력창에 아래 코드를 입력한다.

<script>
  dataLayer.push({
  'event': 'viewCart',
    'ecommerce': {
      'currencyCode': 'KRW',
      'add': {
        'actionField': {'step': 2},
        'products': {{장바구니 보기 - 상품 배열}}
      }
    }
  });
</script>

이 태그의 내용은 viewCart라고 하는 맞춤 이벤트를 실행시키고 ecommerce의 add를 통해 장바구니에 상품이 담겼다는 액션을 쏜다. products에는 장바구니에 담긴 상품의 정보가 담긴다.

이제 트리거를 만들 차례인데 장바구니 페이지는 다음과 같은 주소 형태를 가지고 있다.

/order/basket.html

바로 위 주소를 가진 페이지에서 DOM 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.

장바구니 트리거

이렇게 설정하면 태그는 다음과 같이 설정된다.

장바구니 태그

GA 이벤트 태그 만들기

이제 viewCart 맞춤 이벤트가 발동되는 시점에 실행되는 장바구니의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)

  • 카테고리: 전자상거래
  • 작업: 장바구니
  • 비 상호작용 조회: 참
  • Google 애널리틱스 설정: 내 GA 추적 ID 변수 선택

그리고 이 태그의 설정 재정의 사용에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참으로 선택하고 데이터 영역 사용에 체크한다.

이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 viewCart 이라고 입력하고 저장한다.

장바구니 트리거

이렇게 설정한 태그는 다음과 같다.

장바구니 태그

위 내용은 장바구니에 담고 장바구니 페이지에 방문했을 때 실행되는 것으로 상품 상세 페이지에서 장바구니를 눌러 담는 시점에 해당 액션을 실행하고 싶다면 어떻게 하면 좋을지 스스로 한 번 고민해보도록 하자!

4. 주문서 작성

사용자가 배송 정보나 결제 정보를 입력하는 주문서 작성 단계를 작업 할 차례다. 주문서 작성 단계 페이지에서는 주문하고자 하는 상품 정보를 담고 있는 aBasketProductOrderData 변수가 있다. 이 변수에도 장바구니처럼 배열 형태로 상품의 정보가 담겨있는데 그중 필요한 정보를 GTM 변수로 만들어보자.

주문서 작성 단계의 상품 변수 만들기

[변수] → [새로 만들기]를 눌러 변수명은 주문서 작성 - 상품 배열로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var source = aBasketProductOrderData;
  var productInfo = [];
  for(var i = 0 ; i < source.length ; i++) {
      var productId = source[i].product_no;
      var productPrice = source[i].product_sale_price;
      var productQty = source[i].quantity;
      var productCate = source[i].main_cate_no;

      productInfo.push({
        'id': productId,
        'price': productPrice,
        'quantity': productQty,
        'category': productCate
      });
  }
  return productInfo;
}

이 변수에는 주문서 작성 단계에 있는 상품의 상품 번호, 판매가, 수량, 옵션, 카테고리 번호가 담긴다.(이상하게도 변수 내에 상품명은 없었다.)

주문서 작성 변수

전자상거래 태그 만들기

[태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이름은 자유롭게 입력하고 태그 유형은 [맞춤 HTML]로 선택한다. 그리고 입력창에 아래 코드를 입력한다.

<script>
  dataLayer.push({
    'event': 'checkout',
    'ecommerce': {
    'checkout': {
      'actionField': {'step': 3},
      'products': {{주문서 작성 - 상품 배열}}
      }
    }
  });
</script>

이 태그의 내용은 checkout라고 하는 맞춤 이벤트를 실행시키고 ecommerce의 checkout를 통해 주문서 작성 단계에 왔다는 액션을 쏜다. products에는 위에서 만든 주문서 작성 - 상품 배열변수를 값으로 넣는다.

이제 트리거를 만들 차례인데 주문서 작성 페이지는 다음과 같은 주소 형태를 가지고 있다.

/order/orderform.html

바로 위 주소를 가진 페이지에서 DOM 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.

주문서 작성 트리거

이렇게 설정하면 태그는 다음과 같다.

주문서 작성 태그

GA 이벤트 태그 만들기

이제 checkout 맞춤 이벤트가 발동되는 시점에 실행되는 주문서 작성의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)

  • 카테고리: 전자상거래
  • 작업: 주문서 작성
  • 비 상호작용 조회: 참
  • Google 애널리틱스 설정: 내 GA 추적 ID 변수 선택

그리고 이 태그의 설정 재정의 사용에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참으로 선택하고 데이터 영역 사용에 체크한다.

이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 checkout 이라고 입력하고 저장한다.

주문서 작성 트리거

이렇게 설정한 태그는 다음과 같다.

주문서 작성 태그

5. 주문 완료

이제 대망의 주문 완료 단계다. 카페24는 주문을 완료했을 때 등장하는 완료 페이지가 있는데 그 페이지에 주문 정보를 담고 있는 EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA 변수가 있다 이 변수 안에 order_product 를 보면 주문 정보와 주문한 상품의 정보를 담고 있다. 이 정보를 이용해보자

주문 번호 변수 만들기

[변수] → [새로 만들기]를 눌러 변수명은 주문 완료 - 주문 번호로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var source = EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA;
  var orderId = source.order_id;
	return orderId;
}

주문번호

결제 금액 변수 만들기

변수명을주문 완료 - 결제 금액으로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var source = EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA;
  var revenue = source.payed_amount;
	return revenue;
}

결제 금액

배송비 변수 만들기

변수명을주문 완료 - 배송비로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var source = EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA;
  var shippingFee = source.total_basic_ship_fee;
	return shippingFee;
}

배송비

주문한 상품 정보 변수 만들기

변수명을주문 완료 - 상품 배열로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function() {
  var source = EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA.order_product;
  var productInfo = [];
  for(var i = 0 ; i < source.length ; i++) {
      var productId = source[i].product_no;
      var productName = source[i].product_name;
      var productPrice = source[i].product_price;
      var productQty = source[i].quantity;
      var productCate = source[i].category_no_2;

      productInfo.push({
        'id': productId,
        'name': productName,
        'price': productPrice,
        'category': productCate,
        'quantity': productQty
      });
  }
  return productInfo;
}

이 변수에는 주문 완료한 상품의 상품 번호, 판매가, 수량, 카테고리 번호가 담긴다.

상품 정보

전자상거래 태그 만들기

[태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이름은 자유롭게 입력하고 태그 유형은 [맞춤 HTML]로 선택한다. 그리고 입력창에 아래 코드를 입력한다.

<script>
  dataLayer.push({
    'event': 'purchase',
    'ecommerce': {
      'purchase': {
        'actionField': {
          'id': {{주문 완료 - 주문 번호}},
          'revenue': {{주문 완료 - 결제 금액}},
          'shipping': {{주문 완료 - 배송비}},
        },
        'products': {{주문 완료 - 상품 배열}}
      }
    }
  });
</script>

이 태그의 내용은 purchase라고 하는 맞춤 이벤트를 실행시키고 ecommerce의 purchase를 통해 주문 완료했다는 액션을 쏜다. actionField의 id, revenue, shipping에는 위에서 만든 주문 번호, 결제 금액, 배송비 정보가 담긴 변수를 값으로 넣는다. products에는 위에서 만든 주문 완료 - 상품 배열변수를 값으로 넣는다. 1 이제 트리거를 만들 차례인데 주문 완료 페이지는 다음과 같은 주소 형태를 가지고 있다.

/order/order_result.html

바로 위 주소를 가진 페이지에서 DOM 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.

DOM 트리거

이렇게 설정한 태그는 다음과 같다.

주문완료 태그

GA 이벤트 태그 만들기

이제 purchase 맞춤 이벤트가 발동되는 시점에 실행되는 주문 완료의 GA 이벤트 태그를 만들자. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)

  • 카테고리: 전자상거래
  • 작업: 주문 완료
  • Google 애널리틱스 설정: 내 GA 추적 ID 변수 선택

그리고 이 태그의 설정 재정의 사용에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참으로 선택하고 데이터 영역 사용에 체크한다.

이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 purchase 라고 입력하고 저장한다.

주문완료 트리거

이렇게 설정한 태그는 다음과 같다.

주문완료 이벤트 태그

6. User ID 설정

User ID 설정을 위해 가장먼저 해야할 일은 User ID 기능을 작동시키는 것이다. GA에서 [관리] → [속성] → [추적 정보] → [User-ID]를 누르고 모든 항목에 [설정]으로 체크한다음 [만들기]를 눌러 User ID 보기를 만든다.

User ID 설정

고맙게도 카페24는 로그인한 사용자의 ID를 암호화하여 EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA 변수 안에 값을 가지고 있다. 이 정보를 이용하기 위해 GTM으로 돌아와서 [변수] → [새로 만들기]를 눌러 변수명은 User ID로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.

function(){
  var uid = EC_FRONT_EXTERNAL_SCRIPT_VARIABLE_DATA.common_member_id_crypt;
  return uid;
}

User ID 변수

그리고 이미 만들어둔 GA 추적 ID 변수를 수정하기 위해 변수를 눌러 들어간다. 하단에 [기타 설정]을 누르고 [설정할 필드]에 [+ 입력란]을 누른 후 [입력란 이름]을 userId로 [값]은 오른쪽 +블록 버튼을 눌러 위에서 만든 User ID 변수를 선택하고 저장하자.

User ID 추적 코드

이 작업을 통해 User ID 변수에 기록된 암호화 된 사용자 ID 값을 GA에 입히게 된다.

마치며

여기에서 만든 변수를 응용하면 여러 광고 스크립트는 물론 앰플리튜드와 같은 다른 분석 도구의 설치도 쉽게 할 수 있으니 이 글을 통해 GTM 변수를 공부하는데 도움이 되었으면 좋겠다.

마지막으로 이 글에서 다루지 않은 액션이 많은데 위 내용을 토대로 향상된 전자상거래의 다른 액션도 어떻게 하면 설정할 수 있을지 스스로 연구해보길 바란다.

이 글 공유하기


업데이트되는 소식을 받아보시려면 Ogaeng 페이지 좋아요를 눌러주세요.

Ogaeng

Related posts

comments powered by Disqus