향상된전자상거래(enhanced-ecommerce)에서 사용하는 정보들 입니다.

 

•Product Impressions - 제품 노출, 제품 리스트 페이지의 노출 입니다.
•Product Clicks : 제품 클릭, 리스트 페이지에서 제품 링크 클릭입니다.
•Product Detail Impressions : 제품 상세페이지 노출 입니다.
•Add / Remove from Cart : 장바구니 추가/제거 입니다.
•Promotion Impressions : 프로모션 노출 입니다.
•Promotion Clicks : 프로모션 클릭입니다.
•Checkout : 구매완료 직전 입니다.
•Purchases : 구매완료 입니다.
•Refunds : 환불 입니다.

 

* Product Detail Impressions 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
dataLayer = [];
dataLayer.push({
  'ecommerce': {
    'detail': {
      'actionField': {'list': 'List'},    // 'detail' actions have an optional list property.
      'products': [{
        'name': '스판 청량 경량 면',         // Name or ID is required.
        'id': '1000000007',
        'price': '25000',
        'brand': '',
        'category': '',
        'variant': ''
       }]
     }
   }
});
 cs

 

태그매니저 

Product Detail Impressions가 수집될수 있는 태그와 트리거 생성

 

정의

Tag type : Universal Analytics
Track type : Pageview
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Trigger: event equals gtm.dom

 

태그

 

 

트리거 - 제품 상세 페이지 일때만

 

결과

 

 


구글애널리틱스

현재 Product Detail Impressions는 명시적인 보조 차원으로 사용할 수 없습니다. 오히려 제품 실적 보고서와 제품 목록 보고서에서 암시적으로는 사용할 수 있습니다.

아래 링크 참조

https://www.en.advertisercommunity.com/t5/Google-Analytics-Tracking-Goals/Product-Detail-Views-where-to-see-this-in-GA/td-p/846318

 

맞춤보고서에서 작성가능

제품 세부정보 보기

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

[카페24] 구글 애널리틱스 설치하기 - 태그매니저설치  (0) 2019.06.18
향상된전자상거래 설치하기 - Add/Remove Cart  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Clicks  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27

향상된전자상거래(enhanced-ecommerce)에서 사용하는 정보들 입니다.

 

•Product Impressions - 제품 노출, 제품 리스트 페이지의 노출 입니다.
•Product Clicks : 제품 클릭, 리스트 페이지에서 제품 링크 클릭입니다.
•Product Detail Impressions : 제품 상세페이지 노출 입니다.
•Add / Remove from Cart : 장바구니 추가/제거 입니다.
•Promotion Impressions : 프로모션 노출 입니다.
•Promotion Clicks : 프로모션 클릭입니다.
•Checkout : 구매완료 직전 입니다.
•Purchases : 구매완료 입니다.
•Refunds : 환불 입니다.

 

* Product Clicks 소스

 

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
<a href="../goods/goods_view.php?goodsNo=1000000007" onclick='prdClick("스판 청량 경량 면","1000000007","25000");'>
    <strong class="item_name">스판 청량 경량 면</strong>
</a>
 
 
// function 정의

// n = 제품명, i = 제품번호, p = 제품가격 

function prdClick(n, i, p) {
  dataLayer.push({
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': 'List'}, // Optional list property.
        'products': [{
          'name': n,                      // Name or ID is required.
          'id': i,
          'price': p,
          'brand': '',
          'category': '',
          'variant': '',
          'position': ''
         }]
       }
     }
  });  
}
 cs

 

태그매니저 

Product Click이 수집될수 있는 태그와 트리거 생성

 

정의

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Product Click
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Trigger: event equals productClick

 

태그

 

 

 

트리거 - productClick 이벤트가 실행될때

 

 

구글애널리틱스

전환 > 제품목록실적


** actionField의 list값이 product impressions 의 list 값과 일치해야 정상적으로 매핑됨

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Add/Remove Cart  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Detail Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 활용  (0) 2018.11.27

향상된전자상거래(enhanced-ecommerce)에서 사용하는 정보들 입니다.

 

•Product Impressions - 제품 노출, 제품 리스트 페이지의 노출 입니다.
•Product Clicks : 제품 클릭, 리스트 페이지에서 제품 링크 클릭입니다.
•Product Detail Impressions : 제품 상세페이지 노출 입니다.
•Add / Remove from Cart : 장바구니 추가/제거 입니다.
•Promotion Impressions : 프로모션 노출 입니다.
•Promotion Clicks : 프로모션 클릭입니다.
•Checkout : 구매완료 직전 입니다.
•Purchases : 구매완료 입니다.
•Refunds : 환불 입니다.

 

* Product Impressions 소스

1
2
3
4
5
6
7
8
9
10
11
12
13
14
15
16
17
18
19
20
21
22
23
24
25
26
27
dataLayer = [];                        // dataLayer 초기화
 
var len = $(".item_name").length;    // 제품정보가 담긴 객체
var pInfo = [];                        // 제품정보를 담을 배열 변수
 
 
// 제품정보를 pInfo에 넣음
for(var i=0;i<len;i++){
    pInfo.push({
       'name': $(".item_name")[i].innerText,       // Name or ID is required.
       'id': $(".item_photo_box").find("a")[i].href.replace(/[^0-9]/g,""),
       'price': $(".item_price")[i].innerText.replace(/[^0-9]/g,""),
       'brand': '',
       'category': '',
       'variant': '',
       'list': 'List',
       'position': ''
    });
}
 
// 제품정보를 dataLayer에 넣음
dataLayer.push({
  'ecommerce': {
    'currencyCode': 'WON',                       // Local currency is optional.
    'impressions': pInfo
  }
});
 cs

 

결과

개발자도구(F12) > dataLayer[0].ecommerce.impressions 입력 결과 아래와 같이 나오면 성공

 

태그매니저 

Product Impressions가 실행될수 있는 태그와 트리거 생성

 

정의

Tag type : Universal Analytics
Track type : Pageview
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Trigger: event equals gtm.dom

 

태그

 

트리거 - goods_list.php가 포함된 페이지에서만 실행

 

결과

Product Impressions 의 list 값 기준으로 그룹화 되어, 구글애널리틱스에서 수집 확인가능

 

태그매니저

 

 

구글애널리틱스

전환 > 제품목록실적

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Detail Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Clicks  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 활용  (0) 2018.11.27
dataLayer 이름변경  (0) 2018.11.27

1. 구글애널리틱스 계정 생성 후 추적코드 발급

 

 

2. 관리 > 보기 > 전자상거래 설정

전자상거래사용 체크

향상된 전자상거래 보고서 사용 설정 체크

 

 

 

3. 관리 > 보기설정 > 표시 통화

대한민국 원 (KRW) 변경

 

 

 

4. 태그관리자 생성 후 스니펫 발급

 

 

5. 변수 > 사용자 정의 변수 > 새로 만들기 > 변수 구성 > 상수

애널리틱스 추적코드를 값에 입력

 

 

 

 

 

6. 태그 > 새로 만들기 >이름생성 > 태그 구성 > 태그 유형 선택 > Google 애널리틱스

Google 애널리틱스 설정 > 이 태그의 설정 재정의 사용 체크

추적 ID > 5에서 생성한 변수 이름 입력

트리거 > All Pages

 

 

태그 관리자와 구글 애널리틱스를 연동하여 스니펫 설치 끝

 

** 태그 관리자 스니펫 설치시 gtm.js 경로가 오류로 정상 수집 되지 않는다면, 스니펫의 gtm.js 를 문자열을 나누어 묶어주시면 해결 됩니다.

ex) 'gtm.js' -> 'gtm.'+'js'

 

 

 

 

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Clicks  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
dataLayer 활용  (0) 2018.11.27
dataLayer 이름변경  (0) 2018.11.27
dataLayer 사용하기  (0) 2018.11.27

Google Tag Manager는 JavaScript 이벤트 listeners 내에서 사용자가 버튼과 같은 웹 사이트 요소와 상호 작용할 때, dataLayer를 사용할 수 있습니다.

예를 들어 사용자가 뉴스레터 폼의 Submit(제출) 버튼을 클릭할 때 실행할 수 있습니다. 이벤트는 링크, 버튼, 플래시 기반 메뉴 시스템의 구성요소 등과 같은 웹 사이트 요소와의 사용자 상호 작용 또는 기타 JavaScript를 기반으로 호출할 수 있습니다.

 

이 기능은 Push API를 페이지에 있는 dataLayer로 호출하여 수행됩니다. 이벤트 설정을 위한 기본 구문은 다음과 같습니다.

 

여기서 event_name은 지정된 이벤트 또는 요소가 무엇인지 나타내는 문자열입니다.

예를 들어 사용자가 버튼을 클릭할 때 이벤트를 설정하려면 다음과 같이 버튼 링크를 수정하여 push() API를 호출할 수 있습니다.

 

 

One Push, Multiple Variables

 

각 변수와 이벤트에 dataLayer.push()를 사용하는 대신 여러 변수와 이벤트를 동시에 push 할 수 있습니다. 이를 수행하는 방법에 대한 예는 다음과 같습니다.

 

링크 이벤트 핸들러처럼 동일한 기술을 사용할 수 있습니다.

 

How the Asynchronous Syntax Works

 

1. 정확한 문법을 사용하지 않으면 오류가 발생됩니다.

 

2. 변수 이름은 따옴표로 묶어야 합니다.

 

3. 페이지 전체에서 변수 이름이 일관되어야 합니다.

 

출처 : https://developers.google.com/tag-manager/devguide#datalayer

 

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 이름변경  (0) 2018.11.27
dataLayer 사용하기  (0) 2018.11.27
구글태그매니저 시작하기  (0) 2018.11.27

dataLayer를 다른 이름을 사용하려는 경우 컨테이너 스니펫의 dataLayer(아래 강조 표시)를 선택한 이름으로 바꾸면 됩니다.

 

* 변경 후

 

출처 : https://developers.google.com/tag-manager/devguide#datalayer

 

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 활용  (0) 2018.11.27
dataLayer 사용하기  (0) 2018.11.27
구글태그매니저 시작하기  (0) 2018.11.27

유연성, 휴대성 및 구현 용이성을 극대화하기 위해 Google Tag Manager는 dataLayer와 함께 사용할 때 가장 잘 작동합니다. dataLayer는 Google Tag Manager에 전달하려는 모든 정보를 포함하는 object 입니다. 이벤트 또는 변수와 같은 정보는 데이터 계층을 통해 Google Tag Manager에 전달될 수 있으며, 변수 값에 따라 Google Tag Manager에서 트리거가 설정될 수 있습니다.

 

* 사용법 :

 

dataLayer를 사용하려면, 다음 코드 스니펫을 페이지 상단에 추가합니다.

 

위의 스니펫은 Google Tag Manager에 전달하는 정보로 채워질 수 있는 빈 object 입니다. 예를 들어, dataLayer 내에서 변수를 설정하여 페이지가 등록 페이지이고 방문자가 높은 가치의 고객임을 나타낼 수 있습니다. 이를 위해 다음과 같이 dataLayer를 채웁니다.

 

구글 태그매니저 컨테이너 스니펫 뒤에 dataLayer가 호출되면, 내에서 선언된 변수를 Google Tag Manager가 호출할 수 없습니다.

 

* 오류 :

 

★참고: dataLayer 위에 Google Tag Manager 컨테이너 스니펫을 놓으면 Google Tag Manager가 오작동할 수 있으며, dataLaye에 정의된 변수를 읽을 수 없습니다.

 

* 정상 :

 

dataLayer내에서 선언된 각 변수는 방문자가 현재 페이지에 유지되는 한 유지됩니다. 따라서 여러 페이지(예: visitorType)와 관련된 dataLayer는 웹 사이트의 각 페이지에 있는 dataLayer에서 선언되어야 합니다. 모든 페이지의 dataLayer에 동일한 변수 집합을 배치할 필요는 없지만 일관된 명명 규칙을 사용해야 합니다. 즉, PageCategory를 사용하여 가입 페이지에서 페이지 카테고리를 설정한 경우 구매 페이지에서 페이지 카테고리도 사용하여 설정해야 합니다.

 

dataLayer를 명시적으로 선언하는 것은 선택 사항입니다.

 

출처 : https://developers.google.com/tag-manager/devguide#datalayer

 

저작자표시

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 활용  (0) 2018.11.27
dataLayer 이름변경  (0) 2018.11.27
구글태그매니저 시작하기  (0) 2018.11.27

구글 태그매니저 컨테이너 스니펫은 JavaScript와 비 JavaScript로 이루어진 코드입니다. 태그 매니저는 페이지에 gtm.js를 삽입하거나 JavaScript를 사용할 수 없는 경우 iframe을 사용하여 이용 할 수 있습니다.

 

* 사용법 :

 

1. 다음 JavaScript를 복사하여 웹 사이트의 모든 페이지에서 가능한 한 오프닝 "<head>" 태그에 붙이고, GTM-XXXX를 컨테이너 ID로 바꿉니다.


 

2. 다음 스니펫을 복사하여 웹 사이트의 모든 페이지에서 "<body>" 태그를 열고 바로 붙여 GTM-XXXX를 컨테이너 ID로 바꿉니다.

 

기본 코드 설치만으로 많은 태그 관리 작업을 수행할 수 있지만, 태그 이벤트 또는 데이터에 대한 보다 정밀하게 제어하려면 비동기식 방법을 사용하여 일부 사용자 지정을 사용해야 할 수 있습니다.

 

★ 참고: 추적하려는 페이지에 Google Tag Manager 스니펫을 직접 배치해야 합니다. 숨겨진 iframe에 배치하거나 다른 태그 관리 시스템 내에 배치하면 특정 태그가 상위 페이지를 정확하게 추적하지 못합니다.

 

출처 : https://developers.google.com/tag-manager/quickstart

'Google > Tagmanager' 카테고리의 다른 글

향상된전자상거래 설치하기 - Product Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - 구글 태그매니저 스니펫  (0) 2018.11.27
dataLayer 활용  (0) 2018.11.27
dataLayer 이름변경  (0) 2018.11.27
dataLayer 사용하기  (0) 2018.11.27

+ Recent posts

티스토리툴바