최근 업데이트 2019-08-02
구글태그매니저의 향상된 전자상거래( Enhanced Ecommerce )에 대한 정확한 정보가 충분하지 않아 개인적으로 끄적이면서 공부중에 있습니다. 하나씩 테스트하면서 작성 중에 있기 때문에 잘못된 내용이 있을 수 있고, 만약 있다면 댓글주셔서 내용을 공유할 수 있으면 감사하겠습니다. 모든 내용은 구글 태그매니저 가이드를 참조하여 작성하고 있습니다.
0. 구글 태그 매니저(Google Tag Manager), 구글 애널리틱스 (Google Analytics)계정 생성합니다. ( 자세한 내용 생략 )
- 구글 태그매니저 링크 : https://tagmanager.google.com/
- 구글 애널리틱스 링크 : https://analytics.google.com/
1. 구글 애널리틱스 전자상거래 설정
1) 아래와 같이 전자상거래사용, 향상된 전자상거래 보고서 사용설정을 ON합니다.
2) Checkout Labeling은 선택사항입니다.
2. 구글태그매니저에 계정, 컨테이너 생성 및 설정
1) 계정이름, 국가, 컨테이너 이름 타겟 플랫폼을 설정 -> 만들기
2) 생성된 계정과 컨테이너는 관리자 탭에서 볼 수 있고, 컨테이너 ID를 부여받게 됩니다.
3) 계정에서 관리자탭으로 들어가 컨테이너의 Google 태그 관리자 설치 메뉴를 클릭하면 웹사이트 삽입해야 하는 코드르 확인할 수 있습니다. 아래의 코드를 카페24 실제 코드에 삽입해야합니다.
3. 실제 카페24 구글태그 관리자 스니펫 설치하기
1) 카페24 관리자 페이지에서 소스에 위의 코드는 삽입합니다. 웹(디자인관리)과 모바일(모바일쇼핑몰) 소스가 따로 관리되고 있기 때문에 각각에 삽입해야합니다.
- 디자인관리 탭 > 쇼핑몰 디자인 수정 > [메인 레이아웃(main.html)]과 [공통 레이아웃(layout.html)]
- 모바일쇼핑몰 탭 > 쇼핑몰 디자인 수정 > [메인 레이아웃(main.html)]과 [공통 레이아웃(layout.html)]
2) 기본적으로 모든 페이지를 감싸고 있는 [메인 레이아웃(main.html)]과 [공통 레이아웃(layout.html)] 두 소스의 <head>태그 내부 가능한 상위에 코드는 붙여넣습니다. (소스의 템플릿에 따라 레이아웃이 달라질 수 있습니다. 레이아웃이 감싸져 있지 않은 페이지도 본 적이 있는데, 그런 경우 해당 페이지 상위에 따로 코드를 넣어줘야합니다.)
3) 실제 웹페이지에서 구글태그매니저가 작동해야하지만, 디자인편집창에서는 작동하지 않도록 하기 위해 아래와 같이 조건문으로 감싸줬습니다.
<head>
<!-- Google Tag Manager -->
<script>
if(!document.URL.includes("mobidaysmall.cafe24.com/disp/admin/editor")){
(function(w,d,s,l,i){w[l]=w[l]||[];w[l].push({'gtm.start':
new Date().getTime(),event:'gtm.js'});var f=d.getElementsByTagName(s)[0],
j=d.createElement(s),dl=l!='dataLayer'?'&l='+l:'';j.async=true;j.src=
'https://www.googletagmanager.com/gtm.js?id='+i+dl;f.parentNode.insertBefore(j,f);
})(window,document,'script','dataLayer','GTM-XXXXXXX');
}
</script>
<!-- End Google Tag Manager -->
....
</head>
4) body 상단에도 가이드에 맞게 스크립트를 넣어줍니다.
주의사항
이미 사이트에 GA tracking 스크립트가 삽입되어 있는 상태에서 구글 태그매니저로 옮기고 싶다면 먼저 적용했던 스탠다드 GA tracking 스크립트를 완벽하게 제거한 후에 GTM 스크립트를 삽입해야합니다. 두 트랙킹 코드가 한 사이트에 같이 있을 경우, 데이터가 두 번 카운팅 될 수 있기 때문입니다.
4. 모든 페이지뷰 태그 만들고 확인하기
태그를 만들기 전에 실행(fired)되는 과정을 간단히 정리해보면!
사용자의 행동 -> 사용자의 행동이 트리거(조건)과 맞음 -> 트리거 실행됨 -> 해당 트리거가 소속되어있는 태그가 Fired됨!
1) "변수 > 사용자 정의변수 > 새로만들기" 로 들어가서 추적ID를 담은 변수를 생성해줍니다.
- 변수는 생성해놓으면 어떤 트리거나 태그에도 필요할 때 재사용이 가능합니다.
- 저는 변수명을 'GA settings'라고 했고, 변수유형, 추적ID(구글애널리틱스에서 확인가능) 등 아래와 같이 설정한 후 저장했습니다.
2) "태그 > 새로만들기" 로 들어가서 태그를 생성합니다.
- 태그 이름을 'GA Enhanced Ecommerce' 라고 지정했고, 태그유형, 추적유형, google 애널리틱스 설정에는 아까 만든 변수를 선택했습니다. 그리고 트리거는 All pages 로 하고 저장했습니다.
- 아까 {{GA settings}}라는 변수에 구글애널리틱스 추적ID를 담았기 때문에 해당 '추적ID를 가진 사이트'에서 '트리거'의 조건일 때 '태그가 fired' 된다고 이해하시면 될 것 같습니다.
3) 대시보드 우측 상단에 있는 [미리보기]를 클릭하고 실제 사이트로 들어갑니다.
4) 실제사이트 하단에 태그가 fired 되었는지 확인할 수 있습니다.
( 이외의 다른 태그들은 신경쓰지 않으셔도 됩니다 )
참조링크 1 : https://developers.google.com/tag-manager/quickstart
참조링크 2 : https://canonicalized.com/enhanced-ecommerce-tag-manager/?section=start-off-right