GA에서 naver.com/referral은 무엇일까? 브라우저의 추적 방지 살펴보기
구글 애널리틱스 소스/매체에 수집되는 naver.com / referral의 정체에 대해 알아보자.
우리나라에서 가장 많이 사용되는 임대형 쇼핑몰에는 카페24가 있다. 그런데 임대몰 사용자는 개발 인력이 부족한 경우가 많아 마케터는 GA를 통한 분석을 더 자세하게 하고 싶어도 설정이 쉽지 않아 포기하곤 한다.
물론 카페24 앱스토어 등을 통해 전자상거래 설정을 제공하는 서비스가 있지만 단순히 전자상거래 설정만이 아닌 더 다양한 설정을 GTM으로 하고 싶을 때에는 사용하기가 쉽지 않다.
그래서 이번 글에서는 GA와 GTM을 조금이라도 다루는 마케터를 위해 카페24에서 쇼핑몰 내부 코드 수정 없이 GTM만을 이용해 간단하게 향상된 전자상거래 세팅하는 방법을 이야기하려고 한다. 막상 모두 완료하고 나면 적은 양이지만 설명을 위해 내용이 길어질 수 있어 필요한 부분만 눌러 이동할 수 있도록 목차를 준비했다.
먼저 GTM에서 새로운 컨테이너를 만들고 아래와 같이 GTM 스니펫 설치 코드가 등장하면 브라우저의 새 탭을 열고 카페24 쇼핑몰 관리자로 접속한다.
관리자에서 상점관리 → 운영관리 → 검색엔진최적화(SEO)로 접속한 후 [고급 설정] 탭을 누른다.
HTML 태그 직접 입력에서 PC 쇼핑몰과 모바일 쇼핑몰에 있는 [Head 태그 소스], [Body 태그 소스]에 각각 알맞은 GTM 스니펫 코드를 입력하고 하단에 [저장]을 누른다.
다시 GTM으로 돌아와서 GA 페이지뷰 태그를 만든다.(GA 태그를 만드는 방법은 생략하겠다. 만약 GA 태그 만드는 방법을 모른다면 이 글은 오늘은 그만 보고 다음에 다시 보러 오자)
향상된 전자상거래를 사용하려면 전자상거래 기능을 작동시켜야 한다. GA에서 [관리] → [보기] → [전자상거래 설정]에서 [전자상거래 사용]을 설정으로 변경하고 아래에 등장하는 [향상된 전자상거래 보고서 사용 설정]도 설정으로 변경한다. 그리고 저장한다.
이제 기초적인 준비는 끝났으니 본격적으로 설정을 시작해보자.
쇼핑몰 방문자가 가장 많이 방문하고 오래 머무는 페이지가 바로 상품 상세 보기 페이지이다. 이제 여기서 상품 정보를 담고 있는 변수를 찾아 GTM으로 가져오면 된다. 가장 먼저 할 일은 상품 상세 보기 페이지에서 실행되는 어떤 변수에 우리가 원하는 값이 들어있는지 찾아보는 것인데, 찾는 과정은 생략하고 어떤 변수에 값이 들어있는지 나열하면 아래와 같다.
이제 이 상품 정보를 가져와 GTM에서 변수를 만들어보자. GTM에서 [변수] → [새로 만들기]를 눌러 변수명은 상품 상세 보기 - 상품 배열
로 하고 변수 유형을 [맞춤 자바스크립트]로 선택한다. 그리고 아래 입력창에 아래의 스크립트를 넣고 저장한다.
function() {
var productInfo = [{
'id': iProductNo,
'name': product_name,
'price': product_sale_price,
'category': iCategoryNo
}];
return productInfo;
}
[태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이름은 자유롭게 입력하고 태그 유형은 [맞춤 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 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하면 된다.(쇼핑몰의 상품 상세 보기 페이지의 구조가 위 내용과 다르다면 자신의 쇼핑몰 구조에 맞게 조건을 생성하면 된다.)
이렇게 설정하면 태그는 다음 이미지처럼 설정이 된다.
이제 detail 맞춤 이벤트가 발동되는 시점에 실행되는 상품 상세 보기의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(입력 내용은 참고만 하고 스타일에 맞게 자유롭게 설정하면 된다.)
그리고 이 태그의 설정 재정의 사용
에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참
으로 선택하고 데이터 영역 사용
에 체크한다.
이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 detail
이라고 입력하고 저장한다.
트리거까지 지정이 완료되었으면 아래와 같이 빠진 내용이 없는지 확인한 후 태그를 저장한다.
이제 여러 상품을 담고 한 번에 구매하기 위한 곳인 장바구니 페이지를 설정할 차례다. 상품 상세 보기와 마찬가지로 사용할 수 있는 변수가 있는지 먼저 체크하자. 장바구니 페이지에서는 장바구니에 담긴 상품 정보를 담고 있는 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 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.
이렇게 설정하면 태그는 다음과 같이 설정된다.
이제 viewCart
맞춤 이벤트가 발동되는 시점에 실행되는 장바구니의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)
그리고 이 태그의 설정 재정의 사용
에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참
으로 선택하고 데이터 영역 사용
에 체크한다.
이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 viewCart
이라고 입력하고 저장한다.
이렇게 설정한 태그는 다음과 같다.
위 내용은 장바구니에 담고 장바구니 페이지에 방문했을 때 실행되는 것으로 상품 상세 페이지에서 장바구니를 눌러 담는 시점에 해당 액션을 실행하고 싶다면 어떻게 하면 좋을지 스스로 한 번 고민해보도록 하자!
사용자가 배송 정보나 결제 정보를 입력하는 주문서 작성 단계를 작업 할 차례다. 주문서 작성 단계 페이지에서는 주문하고자 하는 상품 정보를 담고 있는 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 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.
이렇게 설정하면 태그는 다음과 같다.
이제 checkout
맞춤 이벤트가 발동되는 시점에 실행되는 주문서 작성의 GA 이벤트 태그를 만들 차례다. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)
그리고 이 태그의 설정 재정의 사용
에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참
으로 선택하고 데이터 영역 사용
에 체크한다.
이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 checkout
이라고 입력하고 저장한다.
이렇게 설정한 태그는 다음과 같다.
이제 대망의 주문 완료 단계다. 카페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 준비가 되는 시점으로하는 트리거를 아래와 같이 만들고 태그에 등록하자.
이렇게 설정한 태그는 다음과 같다.
이제 purchase
맞춤 이벤트가 발동되는 시점에 실행되는 주문 완료의 GA 이벤트 태그를 만들자. [태그] → [새로 만들기]를 눌러 새로운 태그를 만든다. 이번에도 이름은 자유롭게 입력하고 태그 유형은 [Google 애널리틱스: 유니버설 애널리틱스]로 선택한다. 그리고 추적 유형은 [이벤트]로 한다. 그리고 이벤트 추적 매개변수에는 다음과 같이 입력한다.(마찬가지로 입력 내용은 참고만 할 것!)
그리고 이 태그의 설정 재정의 사용
에 체크하고 기타 설정을 눌러 전자상거래의 향상된 전자상거래 기능 사용을 참
으로 선택하고 데이터 영역 사용
에 체크한다.
이제 트리거에서 +를 눌러 새 트리거를 만들어야 한다. 새 트리거는 유형을 [맞춤 이벤트]로 선택하고 이벤트 이름을 purchase
라고 입력하고 저장한다.
이렇게 설정한 태그는 다음과 같다.
User ID 설정을 위해 가장먼저 해야할 일은 User ID 기능을 작동시키는 것이다. GA에서 [관리] → [속성] → [추적 정보] → [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;
}
그리고 이미 만들어둔 GA 추적 ID 변수를 수정하기 위해 변수를 눌러 들어간다. 하단에 [기타 설정]을 누르고 [설정할 필드]에 [+ 입력란]을 누른 후 [입력란 이름]을 userId로 [값]은 오른쪽 +블록 버튼을 눌러 위에서 만든 User ID 변수를 선택하고 저장하자.
이 작업을 통해 User ID 변수에 기록된 암호화 된 사용자 ID 값을 GA에 입히게 된다.
여기에서 만든 변수를 응용하면 여러 광고 스크립트는 물론 앰플리튜드와 같은 다른 분석 도구의 설치도 쉽게 할 수 있으니 이 글을 통해 GTM 변수를 공부하는데 도움이 되었으면 좋겠다.
마지막으로 이 글에서 다루지 않은 액션이 많은데 위 내용을 토대로 향상된 전자상거래의 다른 액션도 어떻게 하면 설정할 수 있을지 스스로 연구해보길 바란다.