Measuring Product Impressions - 제품 목록 노출

Product Clicks - 제품 클릭

https://developers.google.com/tag-manager/enhanced-ecommerce#product-impressions

https://developers.google.com/tag-manager/enhanced-ecommerce#product-clicks

- 설치경로 예

디자인관리 > 쇼핑몰 디자인 수정 > 전체화면보기 > 상품 > 상품분류(list.html)

- 사용 코드

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
<script>
var prdObject=[];    // 제품정보담을 객체
var cnt=1;            // Position변수(노출순서)
var pClick = function(obj) {
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': ''},      // Optional list property.
        'products': [{
          'name': obj.name,                      // Name or ID is required.
          'id': obj.id,
          'price': obj.price,
          'brand': obj.brand,
          'category': obj.category,
          'variant': obj.variant,
          'position': obj.position
         }]
       }
     }
  });
} 
</script>
 
<script>
// prdObject에 제품정보 push
    'name': '{$seo_alt_tag}',
    'id': '{$product_no}',
    'price': parseInt('{$product_price}'),
    'brand': '',
    'category': '',
    'variant': '',
    'list': '',
    'position': cnt
});
cnt++;
</script>
 
<script>
// 제품객체를 DataLayer로 push
dataLayer = [];    
  'event' : 'Product Impressions',
  'ecommerce': {
    'currencyCode': 'KRW',
    'impressions': prdObject
  }
});
</script>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

- 실제 코드

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
43
44
45
46
47
48
49
50
51
52
53
54
55
56
57
58
59
60
61
62
63
64
65
66
67
68
69
70
71
72
73
74
75
76
77
78
79
80
81
82
83
84
85
86
87
88
89
90
91
92
93
94
95
96
97
98
99
100
101
102
103
104
105
106
107
108
109
110
111
112
113
114
115
116
117
118
119
120
121
122
123
124
125
126
127
128
129
130
131
132
133
134
135
136
137
138
139
140
141
142
143
144
145
146
147
148
149
150
151
152
153
154
155
156
157
158
159
160
161
162
163
164
165
166
167
168
169
170
171
172
173
174
175
176
177
178
179
180
181
182
183
184
185
186
187
188
189
190
191
192
193
194
195
196
197
198
199
200
201
202
203
204
205
206
207
208
209
210
211
212
213
214
215
216
217
218
219
220
221
222
223
224
225
226
227
228
229
230
231
232
233
234
235
236
237
238
239
240
241
242
243
244
245
246
247
248
249
250
251
252
253
254
255
256
257
258
259
260
261
262
263
264
265
266
267
268
269
270
271
272
273
274
275
276
277
278
279
280
281
282
283
284
285
286
287
288
289
290
291
292
293
294
295
296
297
298
299
300
301
302
303
304
305
306
307
308
309
310
311
312
313
314
315
316
317
318
319
320
321
322
323
324
325
326
327
328
329
330
331
332
333
334
335
336
337
338
339
340
<!--@layout(/layout/basic/layout.html)-->
<div module="Product_menupackage">
    <!--@css(/css/module/product/menupackage.css)-->
    <!--@js(/js/module/product/menucategory.js)-->
    <div class="path" module="product_headcategory">
        <span>현재 위치</span>
        <ol>
            <li><a href="/">홈</a></li>
            <li class="{$disp_cate_1|display}"><a href="{$link_product_list_1}">{$name_1}</a></li>
            <li class="{$disp_cate_2|display}"><a href="{$link_product_list_2}">{$name_2}</a></li>
            <li class="{$disp_cate_3|display}"><a href="{$link_product_list_3}">{$name_3}</a></li>
            <li class="{$disp_cate_4|display}"><strong><a href="{$link_product_list_4}">{$name_4}</a></strong></li>
        </ol>
    </div>
 
    <div class="title" module="product_headcategory">
        <p class="banner">{$top_image1_tag}{$top_image2_tag}{$top_image3_tag}</p>
        <h2><span>{$title_text_or_image}</span></h2> 
        <span class="likeButton {$disp_likecate_class}"><button type="button">{$disp_likecate_icon}<strong>{$disp_likecate_count}</strong></button></span>
    </div>
    <ul class="menuCategory">
 
        <li module="product_displaycategory" style="display:{$display};" class="{$selected}">
            <a href="{$link_product_list_sub}">{$category_name} <span class="count {$product_count_display|display}">({$product_count})</span></a>
            <ul module="product_children">
                <li class="{$selected}">
                    <a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
                    <div class="button">
                        {$children_icon}
                        <ul module="product_children" class="subCategory">
                            <li class="{$selected}"><a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                            <li class="{$selected}"><a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        </ul>
                    </div>
                </li>
                <li class="{$selected}">
                    <a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a>
                    <div class="button">
                        {$children_icon}
                        <ul module="product_children" class="subCategory">
                            <li class="{$selected}"><a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                            <li class="{$selected}"><a href="{$link_product_list_sub}">{$category_name} <span class="{$product_count_display|display}">({$product_count})</span></a></li>
                        </ul>
                    </div>
                </li>
            </ul>
        </li>
    </ul>
</div>
<div module="product_listrecommend" class="ec-base-product">
    <!--
        $count = 4
            ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.
            ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.
        $basket_result = /product/add_basket.html
        $basket_option = /product/basket_option.html
    -->
    <div class="title">
        <h3><span>BEST SELLERS</span></h3>
    </div>
    <ul class="prdList grid4">
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                       <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                       <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                    </div>
                </div>
            </div>
            <div class="description">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                       <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                       <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                    </div>
                </div>
            </div>
            <div class="description">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
    </ul>
</div>
 
<div module="product_listnew" class="ec-base-product">
    <!--
        $count = 5
            ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.
            ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.
        $basket_result = /product/add_basket.html
        $basket_option = /product/basket_option.html
    -->
    <div class="title">
        <h3><span>NEW ARRIVALS</span></h3>
    </div>
    <ul class="prdList grid5">
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                       <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                       <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                   </div>
                </div>
            </div>
            <div class="description">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
        <li id="anchorBoxId_{$product_no}">
            <div class="thumbnail">
                <div class="prdImg">
                    <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                    <span class="wish">{$list_wish_icon}</span>
                </div>
                <div class="icon">
                    <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                    <div class="button">
                       <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                       <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                   </div>
                </div>
            </div>
            <div class="description">
                <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                <ul module="product_ListItem" class="spec">
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                </ul>
            </div>
        </li>
    </ul>
</div>
 
<div module="product_normalpackage">
    <!--@css(/css/module/product/listnormal.css)-->
    <div module="product_normalmenu">
        <!--
            $compare_page = /product/compare.html
        -->
        <div class="title" id="{$listmenu_position}">
            <h3><span>HIT PRODUCT</span></h3>
        </div>
 
        <div class="function">
            <p class="prdCount">등록 제품 : <strong>{$total_count}</strong>개</p>
            <ul id="type" module="product_Orderby">
                <li><a href="{$param}" {$style}>{$sort_name}</a></li>
                <li><a href="{$param}" {$style}>{$sort_name}</a></li>
            </ul>
            <span class="compare {$product_compare_display|display}"><a href="#none" class="btnCompare" onclick="{$product_compare_action}">상품비교</a></span>
        </div>
 
        <fieldset class="condition {$select_search_display|display}">
            <legend>조건별 검색</legend>
            <p>
                <!--@js(/js/module/product/product_selectsearch.js)-->
                <select class="FirstSelect" module="product_FirstSelect">
                    <option value="">-조건선택-</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                </select>
                <select class="SecondSelect" module="product_SecondSelect">
                    <option value="">-조건선택-</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                    <option value="{$value}" {$selected}>{$title}</option>
                </select>
                <a href="#SelectSearch" class="btnSubmitFix">검색</a>
            </p>
        </fieldset>
    </div>
<script>
//상품정보를 담을 object생성
var prdObject=[];
var cnt=1;
var pClick = function(obj) {
    'event': 'productClick',
    'ecommerce': {
      'click': {
        'actionField': {'list': ''},      // Optional list property.
        'products': [{
          'name': obj.name,                      // Name or ID is required.
          'id': obj.id,
          'price': obj.price,
          'brand': obj.brand,
          'category': obj.category,
          'variant': obj.variant,
          'position': obj.position
         }]
       }
     }
  });
} 
</script>
    <div module="product_listnormal" class="ec-base-product">
        <!--
            $count = 12
                ※ 상품진열갯수를 설정하는 변수입니다. 설정하지 않을 경우, 최대 200개의 상품이 진열 됩니다.
                ※ 진열된 상품이 많으면, 쇼핑몰에 부하가 발생할 수 있습니다.
            $basket_result = /product/add_basket.html
            $basket_option = /product/basket_option.html
        -->
        <ul class="prdList grid2">
            <li id="anchorBoxId_{$product_no}">
                <div class="thumbnail">
                    <div class="prdImg">
<script>
    'name': '{$seo_alt_tag}',       // Name or ID is required.
    'id': '{$product_no}',
    'price': parseInt('{$product_price}'),
    'brand': '',
    'category': '',
    'variant': '',
    'list': '',
    'position': 
});
cnt++;  
</script>                        
                        <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}" onclick="pClick(prdObject[cnt-2]);"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                        <span class="wish">{$list_wish_icon}</span>
                    </div>
                    <div class="icon">
                        <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                        <div class="button">
                           <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                           <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                       </div>
                    </div>
                </div>
                <div class="description">
                    <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                    <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}" onclick="pClick(prdObject[cnt-2]);"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>                   
                    <ul module="product_ListItem" class="spec">
                        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    </ul>
                </div>
            </li>
            <li id="anchorBoxId_{$product_no}">      
                <div class="thumbnail">
                    <div class="prdImg">
<script>
    'name': '{$seo_alt_tag}',       // Name or ID is required.
    'id': '{$product_no}',
    'price': parseInt('{$product_price}'),
    'brand': '',
    'category': '',
    'variant': '',
    'list': '',
    'position': cnt
});
cnt++;
</script>                         
                        <a href="{$link_product_detail}" name="anchorBoxName_{$product_no}" onclick="pClick(prdObject[cnt-2]);"><img src="{$image_medium}" id="{$image_medium_id}" alt="{$seo_alt_tag}" /><span module="product_Imagestyle"><span class="prdIcon {$icon_class_name}" style="background-image:url('{$icon_url}');"></span></span></a>
                        <span class="wish">{$list_wish_icon}</span>
                    </div>
                    <div class="icon">
                        <div class="promotion">{$soldout_icon} {$stock_icon} {$recommend_icon} {$new_icon} {$product_icons} {$pickup_icon} {$benefit_icons}</div>
                        <div class="button">
                           <div class="likeButton {$disp_likeprd_class}"><button type="button">{$disp_likeprd_icon} <strong>{$disp_likeprd_count}</strong></button></div>
                           <div class="option">{$option_preview_icon}</div> {$basket_icon} {$zoom_icon}
                       </div>
                    </div>
                </div>
                <div class="description">
                    <span class="chk"><input type="checkbox" class="{$product_compare_class} {$product_compare_display|display}" /></span>
                    <strong class="name"><a href="{$link_product_detail}" class="{$product_name_display|display}" onclick="pClick(prdObject[cnt-2]);"><span class="title {$product_name_title_display|display}">{$product_name_title} :</span> {$product_name}</a></strong>
                    <ul module="product_ListItem" class="spec">
                        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                        <li class="{$item_display|display}"><strong class="title {$item_title_display|display}">{$item_title} :</strong> {$item_content}</li>
                    </ul>
                </div>
            </li>
        </ul>
    </div>
</div>
 
<div module="product_normalpaging" class="ec-base-paginate">
    <a href="{$param_first}" class="first"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_first.gif" alt="첫 페이지" /></a>
    <a href="{$param_before}"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_prev.gif" alt="이전 페이지" /></a>
    <ol>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
        <li><a href="{$param}" class="{$param_class}">{$no}</a></li>
    </ol>
    <a href="{$param_next}"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_next.gif" alt="다음 페이지" /></a>
    <a href="{$param_last}" class="last"><img src="//img.echosting.cafe24.com/skin/base/common/btn_page_last.gif" alt="마지막 페이지" /></a>
</div>
<script>
dataLayer = [];    
  'event' : 'Product Impressions',
  'ecommerce': {
    'currencyCode': 'KRW',                       // Local currency is optional.
    'impressions': prdObject
  }
});
</script>
http://colorscripter.com/info#e" target="_blank" style="color:#4f4f4f; text-decoration:none">Colored by Color Scripter

- 태그매니저

Product Impression 태그 생성, 추적유형 : 이벤트 또는 페이지뷰 사용 가능

  Google 애널리틱스 설정에 이전에 생성한 추적코드 변수 설정

  이 태그의 설정 재정의 사용 체크

  전자상거래 > 향상된 전자상거래 기능 사용 > 참 > 데이터영역 사용 체크

Product Click 태그 생성, 추적 유형 : 이벤트 또는 페이지뷰 사용 가능

  Google 애널리틱스 설정에 이전에 생성한 추적코드 변수 설정

  이 태그의 설정 재정의 사용 체크

  전자상거래 > 향상된 전자상거래 기능 사용 > 참 > 데이터영역 사용 체크

- 트리거

객체 안에 들어있는 [event] 이름으로 맞춤이벤트 트리거를 생성

Product Impressions
productClick

 

 

 

 

 

Google 애널리틱스: 유니버설 애널리틱스Google 애널리틱스 설정에 이전에 생성한 추적코드 변수 설정

이 태그의 설정 재정의 사용 체크

전자상거래 > 향상된 전자상거래 기능 사용 > 참 > 데이터영역 사용 체크

저작자표시 비영리 (새창열림)

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

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

1. 구글애널리틱스에서 향상된 전자상거래를 위한 설정

관리(왼쪽 하단 톱니바퀴 모양) > 전자상거래 설정

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

저작자표시 비영리 (새창열림)

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

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

카페24에 구글애널리틱스를 태그매니저를 통해 설치하는 방법을 안내드리겠습니다.

하나씩 보시고 따라하시면 됩니다.

 

1. 태그매니저와 구글애널리틱스의 계정을 생성합니다.(이미지생략)

 

2. 공통 영역에 태그매니저 스니펫 코드를 설치하며, 사이트내 모든 페이지에서 노출되어야 한다.

// Javascript는 절차지향 언어, 위에서 부터 순서대로 실행되어 <head></head> 태그 안에 설치 권장

- 경로 예시)

관리자 로그인 후,

디자인관리 > 쇼핑몰 디자인 수정 > 메인 레이아웃
디자인관리 > 쇼핑몰 디자인 수정 > 공통 레이아웃

 

3. 태그 매니저에서 구글애널리틱스 추적코드를 저장할 [사용자 정의 변수]를 생성한다.

이 때, 변수 유형은 [Google 애널리틱스 설정]을 사용하며, [추적 ID]에 구글애널리틱스에서 생성 된 추적코드를 입력한다.

4. 작업공간에서 제출

저작자표시 비영리 (새창열림)

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

[카페24] 구글 애널리틱스 설치하기 - Product Impressions/Product Click  (0) 2019.06.18
[카페24] 구글 애널리틱스 설치하기 - 전자상거래설정  (0) 2019.06.18
향상된전자상거래 설치하기 - Add/Remove Cart  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Detail Impressions  (0) 2018.11.28
향상된전자상거래 설치하기 - Product Clicks  (0) 2018.11.28

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

 

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

 

* Add/Remove from Cart 소스

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
28
29
30
31
32
33
34
35
36
37
38
39
40
41
42
<button type="button" class="btn_add_cart" onclick="addCart();">장바구니</button>
<button type="button" class="btn_add_cart" onclick="rmCart();">장바구니삭제</button>
 
function addCart(){
dataLayer.push({
  'event': 'addToCart',
  'ecommerce': {
    'currencyCode': 'WON',
    'add': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': '라이트그레이 린넨 슬랙스',         // Name or ID is required.
        'id': '1000000004',
        'price': '10000',
        'brand': '',
        'category': '',
        'variant': ''
        'quantity': '4'
       }]
    }
  }
});
}
 
function rmCart(){
dataLayer.push({
  'event': 'removeFromCart',
  'ecommerce': {
    'currencyCode': 'WON',
    'remove': {                                // 'add' actionFieldObject measures.
      'products': [{                        //  adding a product to a shopping cart.
        'name': '라이트그레이 린넨 슬랙스',         // Name or ID is required.
        'id': '1000000004',
        'price': '10000',
        'brand': '',
        'category': '',
        'variant': ''
        'quantity': '4'
       }]
    }
  }
});
}
 cs

 

 

태그매니저 

Add/Remove from Cart가 실행될수 있는 태그와 트리거 생성

 

정의

Tag type : Universal Analytics
Track type : Event
Event Category: Ecommerce
Event Action: Add to Cart / Remove from Cart
Enable Enhanced Ecommerce Features: true
Use Data Layer: true
Trigger: event equals addToCart / removeFromCart

 

태그

 

트리거

 

 

결과

 

 

애널리틱스

전환 > 전자상거래

 

 

** Add/Remove 구조는 동일하여 Add만 표시, 장바구니 입력 및 삭제 시 n개의 제품정보가 있을 경우 제품 정보를 배열로 입력하여 n개 제품 모두 담길 수 있게 설치 필요

저작자표시 (새창열림)

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

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

향상된전자상거래(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

+ Recent posts

티스토리툴바