• 홈페이지
  • 조항
  • 마케팅
  • Shopify에서 GA4 전자 상거래 추적을 설정하는 방법은 무엇입니까? 단계별 가이드

Shopify에서 GA4 전자 상거래 추적을 설정하는 방법은 무엇입니까? 단계별 가이드

게시 됨: 2022-09-13
  • Shopify에 Google 태그 관리자( GTM )를 설치하는 방법은 무엇입니까?
    • 1단계: GTM 컨테이너 코드 및 고객 세부 정보 스크립트를 <head> 아래의 theme.liquid에 추가합니다.
    • 2단계: GTM 컨테이너 코드 및 고객 세부 정보 스크립트를 체크아웃 페이지에 추가합니다.
  • GTM에서 데이터 영역 변수 생성
  • GTM에서 GA4 페이지 보기 태그 만들기
  • view_item 및 구매를 이벤트로 추적하고 사용자 범위 및 제품 관련 세부 정보를 GA4에 전달
    • 1단계: Shopify에 view_item 데이터 계층 추가
    • 2단계: view_item 및 구매 이벤트에 대한 GTM 트리거 생성
    • 3단계: GTM 태그 생성.
  • GTM 레시피 다운로드

Shopify에 Google 태그 관리자( GTM )를 설치하는 방법은 무엇입니까?

1단계: GTM 컨테이너 코드 및 고객 세부 정보 스크립트를 <head> 아래의 theme.liquid에 추가합니다.

  1. Gmail 계정에 로그인합니다.
  2. Google 태그 관리자로 이동합니다.
  3. 올바른 GTM 계정을 선택하십시오.
  4. GTM 컨테이너 ID 를 클릭합니다.
  5. <head> 섹션에 코드를 붙여넣는 지침이 포함 된 GTM 컨테이너 코드의 첫 번째 스크립트를 복사합니다 .
  6. Shopify 스토어에 로그인하고 탐색 패널 왼쪽의 온라인 스토어에서 테마를 클릭합니다 .
  7. 작업 드롭다운에서 코드 편집 을 클릭합니다.
  8. 레이아웃 아래의 theme.liquid 를 클릭합니다.
  9. 복사한 GTM 컨테이너 코드(5단계) 를 페이지의 <head>에 가능한 한 높은 곳에 붙여넣습니다.
  10. 아래에 언급된 고객 세부정보 스크립트를 복사 하여 GTM 컨테이너 코드 위의 <head> 섹션에 붙여넣습니다.
  11. 오른쪽 상단 모서리에 있는 theme.liquid에서 저장을 클릭 합니다.

1단계: Gmail 계정에 로그인합니다.

2단계: https://tagmanager.google.com/ 링크를 따라 Google 태그 관리자로 이동합니다.

3단계: 올바른 GTM 계정 선택

Select the correct GTM account

4단계: GTM 컨테이너 ID를 클릭합니다.

GTM - click on the container id

5단계: <head> 섹션에 코드를 붙여넣는 지침이 포함된 GTM 컨테이너 코드의 첫 번째 스크립트를 복사합니다 .

copy the GTM container code

6단계: 이제 Shopify 스토어에 로그인하고 왼쪽 탐색 패널의 온라인 스토어에서 테마를 클릭합니다 .

select themes under online store

7단계: 작업 드롭다운에서 코드 편집 을 클릭합니다.

Click on Edit code under Actions drop down

8단계: 레이아웃에서 theme.liquid 를 클릭합니다.

Click on theme.liquid

9단계: 복사한 GTM 컨테이너 코드(5단계) 를 페이지의 <head>에서 가능한 한 높은 곳에 붙여넣습니다.

10단계: 다음 고객 세부 정보 스크립트를 복사합니다. 이제 아래 이미지와 같이 GTM 컨테이너 코드 위의 <head> 섹션에 붙여넣습니다 . 이 스크립트는 사용자 범위 데이터를 GA4로 전달하는 데 도움이 됩니다.

복사

 <스크립트>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
{고객이 %인 경우 %}
사용자 유형: "구성원",
고객: {
아이디: {{ 고객 아이디 }},
lastOrder: "{{ customer.orders.first.created_at | 날짜: '%B %d, %Y %I:%M%p' }}",
orderCount: {{ customer.orders.size }},
totalSpent: {% if customer %}{% assign total_spent = 0 %}{% for item in customer.orders %}{% assign total_spent = total_spent | 플러스: item.total_net_amount %}{% endfor %}{{ total_spent | money_without_currency | 제거:"," }}{% else %}""{% endif %},
태그: {{- customer.tags | json -}}
},
{% 또 다른 %}
사용자 유형: "방문자",
고객: {
ID: "",
마지막 주문: "",
주문 개수: "",
총 지출: "",
태그: ""
},
{% endif %}
});
</스크립트>

User data script above the GTM code

11단계: 오른쪽 상단 모서리에 있는 theme.liquid에서 저장을 클릭 합니다.

Click save on theme.liquid

잘했어요 !!

Shopify에 GTM 컨테이너 코드를 추가하는 첫 번째 단계를 완료했습니다. 다음으로 체크아웃 페이지에서 GTM 컨테이너 코드 , 고객 세부 정보 스크립트 및 구매 데이터 레이어 를 추가해야 합니다.

2단계: GTM 컨테이너 코드 및 고객 세부 정보 스크립트를 추가하고 체크아웃 페이지에 데이터 계층을 구매합니다.

  1. Shopify 스토어 관리자에서 왼쪽 하단 모서리에 있는 설정을 클릭합니다.
  2. 체크아웃 및 계정을 클릭합니다.
  3. 아래로 스크롤하여 상태 블록의 주문 아래에 있는 추가 스크립트를 찾습니다.
  4. 먼저 GTM 컨테이너 코드를 붙여넣습니다. 이제 다음 고객 세부 정보 스크립트를 복사하여 GTM 컨테이너 코드 위에 붙여넣습니다.
  5. 고객 세부 정보 스크립트와 GTM 컨테이너 코드 사이에 다음 구매 데이터 영역을 복사하여 붙여넣습니다.

1단계: Shopify 스토어 관리자에서 왼쪽 하단 모서리에 있는 설정을 클릭합니다.

On Shopify admin click on Settings towards the laft hand side bottom corner

2단계: 체크아웃 및 계정을 클릭합니다.

Click on Checkout and accounts

3단계: 아래로 스크롤하여 상태 블록의 주문 아래에 있는 추가 스크립트를 찾습니다.

Scroll Down and below Order Status block look for the Additional Scripts

4단계: 먼저 GTM 컨테이너 코드를 붙여넣습니다. 이제 다음 고객 세부 정보 스크립트를 복사하여 GTM 컨테이너 코드 위에 붙여넣습니다.

Paste the GTM container code first and above the GTM container code paste the customer details script

5단계: 고객 세부 정보 스크립트와 GTM 컨테이너 코드 사이에 다음 구매 데이터 영역을 복사하여 붙여넣습니다.

복사

 <script>{% if first_time_accessed %}
window.dataLayer.push({
'page_type': '구매',
'event': 'purchase', /* GTM에서 사용자 정의 이벤트 생성 */
'transaction_id': '{{ 주문.이름 || order.order_number }}',
'totalValue': {{ total_price | money_without_currency | remove:',' }}, // 세금 및 배송비 포함
'소계값': {{ 소계_가격 | money_without_currency | 제거하다:',' }},
'세금': {{ tax_price | money_without_currency | 제거하다:',' }},
'배송': {{ shipping_price | money_without_currency | 제거하다:',' }},
'통화': '{{ shop.currency }}',
'payment_type': '{{ order.transactions[0].gateway }}', //선택적 매개변수
'전자상거래': {
'checkout_currency': '{{ checkout.currency }}', 
'값': '{{ checkout.total_price | money_without_currency | remove:',' }}', // 주문 합계(모든 제품의 가격 + 배송료)
'세금': '{{ checkout.tax_price | money_without_currency | remove:',' }}', // 세금
'배송':'{{ checkout.shipping_price | money_without_currency | remove:',' }}', // 배송비
'transaction_id': '{{ transaction[0].id }}', // 트랜잭션 ID
'항목': [
{line_items %의 line_item에 대한 %}
{
'item_name': '{{ line_item.product.title | 바꾸기: "'",##@@[이메일 보호]@##" }}'.replace("##@@[이메일 보호]@##", "'"), 
'item_id': '{{ line_item.sku || line_item.product.id }}',
'가격': {{ line_item.final_price | money_without_currency | 제거하다:',' }},
'항목_브랜드': '{{ line_item.vendor }}',
'수량': {{ line_item.quantity }},
'item_variant': '{{ line_item.variant.title }}'
},
{% endfor %}
]
}
});
{% endif %}
</스크립트>

6단계: 오른쪽 하단 모서리에서 저장을 클릭합니다.

축하합니다! Shopify에 GTM 컨테이너 코드를 성공적으로 추가했습니다. 이제 계속해서 GA4 페이지 보기 태그를 만들기 전에 GTM에서 데이터 영역 변수를 만들 것입니다. 페이지 뷰 태그가 로드되면 이러한 변수를 통해 사용자 범위 데이터를 수집하고 GA4에 전달할 수 있습니다.

GTM에서 데이터 영역 변수 생성

  1. GTM의 왼쪽 탐색 패널에서 변수 를 클릭합니다.
  2. 사용자 정의 변수에서 새로 만들기를 클릭합니다.
  3. 변수 구성 의 아무 곳이나 클릭합니다.
  4. 페이지 변수에서 데이터 계층 변수 를 선택합니다.
  5. 데이터 영역 변수 이름 할당 .
  6. 변수 이름을 바꾸고 저장을 클릭합니다.

1단계: GTM의 왼쪽 탐색 패널에서 변수 를 클릭합니다.

Click on Variables on the left hand navigation panel

2단계: 사용자 정의 변수에서 새로 만들기를 클릭합니다.

Click New under User Defined Variables

3단계: 변수 구성에서 아무 곳이나 클릭합니다.

Click anywhere on Variable configuration

4단계: 페이지 변수에서 데이터 계층 변수 를 선택합니다.

Select Data Layer variable under page variables

5단계: 데이터 영역 변수 이름 할당

Data Layer Variable Name

6단계: 변수 이름 을 변경하고 저장 을 클릭합니다.

Rename the variable and click save

위에서 언급한 단계에 따라 아래에 언급된 데이터 영역 변수를 생성합니다.

데이터 레이어 변수 이름: 변수 이름 바꾸기
user_id “dlv – 고객 – id – 변수”
고객.마지막 주문 “dlv – 고객 – lastOrder – 변수”
customer.orderCount “dlv – 고객 – orderCount – 변수”
고객.태그 “dlv – 고객 – 태그 – 변수”
customer.totalSpent "dlv - 고객 - totalSpent - 가변"
고객.사용자 유형 “dlv – 고객 – 사용자 유형 – 변수”
이벤트 “dlv – 이벤트 – 변수”

GTM에서 GA4 페이지 보기 태그 만들기

  1. Google 애널리틱스로 이동하여 GA4 속성을 선택합니다. https://analytics.google.com/
  2. 왼쪽 하단의 톱니바퀴 아이콘을 클릭합니다.
  3. 속성 수준에서 데이터 스트림을 클릭합니다.
  4. 웹 스트림을 선택하고 화살표(>)를 클릭합니다.
  5. GA4 측정 ID를 복사합니다.
  6. Google 태그 관리자로 이동합니다. https://tagmanager.google.com/
  7. 새 태그 추가를 클릭합니다.
  8. 태그 구성의 아무 곳이나 클릭합니다.
  9. Google 애널리틱스: GA4 구성을 선택합니다.
  10. "측정 ID" 상자 아래에 이전에 복사한 GA4 측정 ID를 붙여넣습니다.
  11. 설정할 필드에서 행 추가를 클릭한 다음 필드 이름과 값을 추가합니다.
  12. 사용자 속성에서 속성 이름 및 값으로 다음을 추가합니다.
  13. 트리거링의 아무 곳이나 클릭합니다.
  14. 모든 페이지를 트리거로 선택합니다.
  15. 태그 이름을 바꾸고 저장을 클릭합니다.

1단계: Google 애널리틱스로 이동하여 GA4 속성을 선택합니다. https://analytics.google.com/

2단계: 왼쪽 하단의 톱니바퀴 아이콘을 클릭합니다.

Click on the Gear Icon bottom left hand

3단계: 속성 수준에서 데이터 스트림을 클릭합니다.

Click on the Data Stream under property level

4단계: 웹 스트림을 선택하고 화살표(>)를 클릭합니다.

Select the Web Stream and click click the arrow (>)

5단계: GA4 측정 ID를 복사합니다.

Copy the GA4 Measurement ID

6단계: Google 태그 관리자로 이동합니다. https://tagmanager.google.com/

7단계: 새 태그 추가를 클릭합니다.

Click On Add a new tag

8단계: 태그 구성의 아무 곳이나 클릭합니다.

Click anywhere on the tag configuration

9단계: Google 애널리틱스: GA4 구성을 선택합니다.

Select Google Analytics: GA4 Configuration

10단계: "측정 ID" 상자 아래에 이전에 복사한 GA4 측정 ID를 붙여넣습니다.

Paste the previously copied GA4 Measurement ID under the "Measurement ID" Box.

11단계: 설정할 필드 아래에서 행 추가를 클릭한 다음 아래에 언급된 대로 필드 이름과 값을 추가합니다.

필드 이름: user_id

값: {{dlv – 고객 – ID – 변수}}

5 설정할 필드 아래에 사용자 ID 추가

12단계: 사용자 속성에서 아래에 설명된 대로 속성 이름과 값을 추가합니다.

속성 이름 값
고객 ID {{dlv – 고객 – ID – 변수}}
마지막 주문 {{dlv – 고객 – 마지막 주문 – 변수}}
order_count {{dlv – 고객 – 주문 수 – 변수}}
total_spent {{dlv – 고객 – 총 지출 – 변수}}
사용자 유형 {{dlv – 고객 – 사용자 유형 – 변수}}

User Properties Assign Property Name and value

13단계: 트리거링의 아무 곳이나 클릭합니다.

트리거 구성 - 아무 곳이나 클릭

14단계: 모든 페이지를 트리거로 선택합니다.

Select All Pages as a Trigger Type

15단계: 태그 이름을 바꿉니다.

Rename as GA4 - Page View - Tag as and Click Save

훌륭한!

이제 GA4 페이지 보기 태그를 만들었습니다.

이제 누군가가 제품 페이지를 보고 필요한 세부 정보를 GA4에 전달할 때 view_item 이벤트를 추적하는 방법을 살펴보겠습니다.

view_item 및 구매 이벤트 데이터를 추적하고 GA4로 전달합니다.

Shopify에 view_item 데이터 계층을 추가합니다.

  1. Shopify 스토어에 로그인하고 왼쪽 탐색 패널의 온라인 스토어에서 테마를 클릭합니다.
  2. 작업 드롭다운에서 코드 편집을 클릭합니다.
  3. 섹션에서 main-product.liquid를 클릭합니다.
  4. 아래에 언급된 데이터 영역 스크립트를 복사하여 붙여넣습니다.
  5. 오른쪽 상단 모서리에 있는 main-product.liquid에서 저장을 클릭합니다.

1단계: Shopify 스토어에 로그인하고 왼쪽 탐색 패널의 온라인 스토어에서 테마를 클릭합니다.

select themes under online store

섹션 2: 작업 드롭다운에서 코드 편집을 클릭합니다.

Click on Edit code under Actions drop down

섹션 3: 섹션 아래에서 main-product.liquid를 클릭합니다.

Click on the main-product.liquid under Sections.

4단계: 아래에 언급된 데이터 계층 스크립트를 복사하여 붙여넣습니다.

복사

 <스크립트>
window.dataLayer = window.dataLayer || [];
window.dataLayer.push({
이벤트: 'view_item',
전자상거래: {
항목: [{
item_name: '{{ product.title | 바꾸기: "'",##@@[이메일 보호]@##" }}'.replace("##@@[이메일 보호]@##", "'"),
item_id: "{% if product.sku %}{{ product.sku }}{% else %}{{ product.id}}{% endif %}",
가격: "{{ product.price | money_without_currency | 제거:',' }}",
item_brand: "{{ product.vendor | 제거: "'" | 제거: '"' }}",
{product.collections의 컬렉션 %}
item_category{% if forloop.index == 1 %}{{ forloop.index }}{% endunless %}: "{{ collection.title }}",
{% endfor %}
item_variant: "{{ product.selected_or_first_available_variant.title | 제거: "'" | 제거: '"' }}",
수량: '1'
}]
}
});
</스크립트>

Copy and Paste the below mentioned Data Layer script on the main-product.liquid under Sections

5단계: 오른쪽 상단 모서리에 있는 main-product.liquid에서 저장을 클릭합니다.

Click save on the main-product.liquid under Sections

view_item 및 구매 이벤트에 대한 GTM 트리거를 생성합니다.

  1. Google 태그 관리자로 이동합니다.
  2. 왼쪽 탐색 패널에서 트리거를 클릭합니다.
  3. 새로 만들기를 클릭합니다.
  4. 트리거 구성에서 아무 곳이나 클릭합니다.
  5. 기타에서 사용자 지정 이벤트를 선택합니다.
  6. 이벤트 이름 view_item을 지정합니다.
  7. 트리거 이름을 CE – EEC – view_item – Trigger 로 바꾸고 저장을 클릭합니다.

노트:

  1. 이벤트 이름을 구매로 지정
  2. 트리거 이름을 CE – EEC – 구매 – 트리거 로 변경하고 저장을 클릭합니다.

1단계: Google 태그 관리자로 이동합니다.

2단계: 왼쪽 탐색 패널에서 트리거를 클릭합니다.

Click on Trigger on the left hand navigation panel

3단계: 새로 만들기를 클릭합니다.

Click New

4단계: 트리거 구성에서 아무 곳이나 클릭합니다.

Click anywhere on Trigger configuration

5단계: 기타에서 사용자 지정 이벤트를 선택합니다.

Select Custom Event under Other

6단계: 이벤트 이름 view_item을 지정합니다.

Assign Event Name as view_item

7단계: 트리거 이름을 CE – EEC – view_item – 트리거로 변경하고 저장을 클릭합니다.

Rename the Trigger - view_item

이 단계를 통해 view_item 이벤트 트리거를 만들었습니다. 이제 구매 이벤트를 트리거해야 합니다. 구매 이벤트를 트리거하려면 위의 처음 5단계를 따르세요.

8단계: 이벤트 이름을 구매 로 지정

custom event name purchase

9단계: 트리거 이름을 CE – EEC – 구매 – 트리거로 변경하고 저장을 클릭합니다.

Rename the Trigger - purchase

모든 단계를 따랐다면 view_item을 수집하고 사용자 범위 데이터로 Shopify 스토어에서 이벤트 관련 데이터를 구매하는 거의 모든 작업을 완료한 것입니다. 이제 Google 태그 관리자를 사용하여 이러한 세부정보를 GA4에 전달하는 방법을 살펴보겠습니다.

view_item 및 구매 이벤트에 대한 GTM 태그를 만듭니다.

  1. 왼쪽 탐색 패널에서 태그를 클릭합니다.
  2. 새로 만들기를 클릭합니다.
  3. 태그 구성에서 아무 곳이나 클릭합니다.
  4. 추천 태그에서 "Google 애널리틱스: GA4 이벤트"를 선택합니다.
  5. 구성 태그의 드롭다운에서 "GA4 – 페이지 보기 – 태그"를 선택합니다.
  6. 이벤트 이름을 지정합니다. 이전에 만든 dataLayer 변수 선택 – {{dlv – 이벤트 – 변수}}
  7. 추가 설정을 클릭하고 전자 상거래에서 전자 상거래 데이터 보내기 를 선택합니다. 데이터 소스로 데이터 계층을 선택합니다.
  8. 트리거의 아무 곳이나 클릭합니다.
  9. view_item 이벤트에 대해 이전에 생성된 트리거 “CE – EEC – view_item – Trigger”를 선택합니다.
  10. 트리거 섹션의 오른쪽 상단 모서리로 마우스를 가져가 연필 아이콘을 클릭합니다.
  11. 지금 더하기 아이콘을 클릭하십시오.
  12. "CE - 구매 - 트리거"라는 구매 이벤트 트리거를 선택합니다.
  13. 태그 이름을 “GA4 – EEC 이벤트 – 태그”로 바꾸고 저장을 클릭합니다.

1단계: 왼쪽 탐색 패널에서 태그를 클릭합니다.

Click on tag on the left hand navigation panel

2단계: 새로 만들기를 클릭합니다.

Click New

3단계: 태그 구성에서 아무 곳이나 클릭합니다.

Tag Configuration - Click Anywhere

4단계: 추천 태그 아래에서 "Google 애널리틱스: GA4 이벤트"를 선택합니다.

Select Google Analytics GA4 Event under Featured Tag

5단계: 구성 태그의 드롭다운에서 "GA4 – 페이지 보기 – 태그"를 선택합니다.

Select Configuration Tag form the drop down

6단계: 이벤트 이름을 지정합니다. 이전에 만든 Data Layer 변수 선택 – {{dlv – event – ​​variable}}

Event Name Select the previously made Data Layer variable

7단계: 추가 설정을 클릭하고 전자상거래에서 전자상거래 데이터 보내기 를 선택합니다. 데이터 소스로 데이터 계층을 선택합니다.

More Settings Send eCommerce Data select Data Layer as datasource

8단계: 트리거링의 아무 곳이나 클릭합니다.

Trigger Configuration - Click Anywhere

9단계: view_item 이벤트에 대해 이전에 생성된 트리거 “CE – EEC – view_item – Trigger”를 선택합니다.

select view item trigger

10단계: 트리거 섹션의 오른쪽 상단 모서리로 마우스를 가져간 다음 연필 아이콘을 클릭합니다.

Hover over the trigger towards the right hand side top corner and click on pencil icon

11단계: 지금 더하기 아이콘을 클릭합니다.

Click on this plus icon

12단계: "CE – 구매 – 트리거"라는 구매 이벤트 트리거를 선택합니다.

Select purchase event trigger

13단계: 태그 이름을 “GA4 – EEC 이벤트 – 태그”로 변경하고 저장을 클릭합니다.

Rename the tag and click save

축하합니다

이 가이드를 통해 이제 GA4에서 제품 보기 및 구매 이벤트 데이터를 추적할 수 있습니다. 다음 단계에 따라 GA4에서 보고서를 볼 수도 있습니다.

1단계: GA4 속성으로 이동합니다.
2단계: 왼쪽 탐색 패널에서 보고서를 클릭합니다.
3단계: 수익 창출을 클릭한 다음 전자상거래 구매를 클릭합니다.

이 가이드에 대한 기성품 GTM 컨테이너를 얻으려면 GTM 레시피를 다운로드하는 것이 좋습니다.

GTM 레시피 다운로드

결론

이 단계별 가이드를 통해 저는 모든 Shopify 스토어 소유자의 불타는 문제를 해결하고 해결하기 위해 모든 수단을 동원했습니다. 전자 상거래 추적은 많은 뉘앙스를 가질 수 있으며 단일 블로그 게시물로 해결하기 어렵습니다. 질문이 있는 경우 LinkedIn에서 저에게 연락하여 질문을 하십시오.