Shopify에서 GA4 전자 상거래 추적을 설정하는 방법

지금쯤이면 Google이 2023년 7월에 유니버설 애널리틱스를 중단하고 모든 것을 GA4로 이전한다는 사실을 알아야 합니다. 즉, 웹사이트 소유자는 가능한 한 빨리 GA4를 설정해야 합니다. 전자상거래 웹사이트의 경우 GA4에서도 전자상거래 추적이 작동하도록 하는 추가 복잡성이 있습니다. Shopify 매장의 경우 이 프로세스는 Universal Analytics에서 정말 간단했지만 GA4에서는 더 어렵습니다.

앱을 설치하거나 개발자를 사용할 필요 없이 모든 Shopify 웹사이트에서 GA4 전자상거래 추적을 설정하는 쉬운 프로세스에 대해 읽어보십시오.

누구나 이 가이드를 따를 수 있지만 GTM 작동 방식에 대한 기본적인 이해가 있으면 더 쉬울 것입니다.

Shopify에서 데이터 계층 생성

우리의 첫 번째 작업은 데이터 계층을 만드는 것입니다. 데이터 영역은 방문자의 웹사이트 세션에 대한 정보를 포함하는 간단한 코드입니다. 그런 다음 이 정보를 GTM과 같은 다른 플랫폼으로 전달할 수 있습니다.

Shopify 주문 완료 페이지에 표시되는 데이터 영역을 만들었습니다. 주문 금액, 배송 비용 및 구매 항목과 같은 고객 주문에 대한 정보가 자동으로 채워집니다.

• 아래 스크립트를 복사하여 Shopify 관리자 설정의 '결제' 스크립트 필드에 붙여넣습니다. '설정 > 결제 및 계정 > 추가 스크립트'로 이동하여 찾을 수 있습니다.

• 이 데이터 계층은 고객 주문에 대한 정보가 포함된 '구매' 이벤트를 GTM에 푸시합니다.

 {% if first_time_accessed %} <script> dataLayer.push({ ecommerce: null }); // Clear the previous ecommerce object. window.dataLayer.push({ 'event': 'purchase', ecommerce: { 'transaction_id': '{{ order.name || order.order_number }}', 'value': {{ total_price | money_without_currency | remove:',' }}, // Includes tax & shipping 'tax': {{ tax_price | money_without_currency | remove:',' }}, 'shipping': {{ shipping_price | money_without_currency | remove:',' }}, 'currency': '{{ shop.currency }}', 'payment_type': '{{ order.transactions[0].gateway }}', //optional parameter 'items': [ {% for line_item in line_items %} { 'item_id': '{{ line_item.sku || line_item.product_id }}', //if no SKU exists, use product Id 'item_name': '{{ line_item.product.title }}', 'discount': {{ line_item.line_level_total_discount | money_without_currency }}, 'item_variant': '{{ line_item.variant.title }}', 'price': {{ line_item.final_price | money_without_currency }}, 'quantity': {{ line_item.quantity }} }, {% endfor %} ]} }); </script> {% endif %}**

GTM에서 실행 트리거 만들기

이제 고객이 주문을 완료할 때 실행되는 트리거를 설정해야 합니다. 트리거가 실행되면 주문 정보가 포함된 태그가 GA4로 전송됩니다.

구매 트리거가 실행되는 조건을 정의해야 합니다. 트리거 조건은 데이터 레이어의 구매 이벤트가 푸시될 때입니다. 이것을 설정하려면:

• GTM에 로그인하고 왼쪽 메뉴로 이동하여 '트리거'를 선택합니다.
• 파란색 '새로 만들기' 버튼을 누릅니다.
• 트리거를 'GA4 - 구매'라고 부릅니다.
• '트리거 구성' 창의 모서리에 있는 '편집' 아이콘을 누릅니다.
• '트리거 유형 선택'에서 '맞춤 이벤트'를 선택합니다.
• '이벤트 이름' 필드에 '구매'를 입력합니다.
• '이 트리거 실행'을 '일부 사용자 지정 이벤트'로 설정
• 이벤트 조건을 다음과 같이 설정합니다.
• 이벤트 - 같음 - 구매

완료되면 다음과 같아야 합니다.

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

태그를 설정하기 전에 데이터 영역에서 정보를 가져오기 위해 GTM 변수를 생성해야 합니다. 변수가 생소한 경우 작은 정보를 포함하는 패킷으로 생각하십시오.

데이터 레이어의 특정 값이 이러한 변수에 추가된 다음 GA4로 전송됩니다.

데이터 레이어에서 다음 값을 추출하려면 변수를 생성해야 합니다.

• 주문 수익

• 주문 아이디

• 통화

• 세

• 배송비

• 구매한 항목

• GTM의 왼쪽 메뉴에서 '변수' 페이지를 클릭합니다.

• '사용자 정의 변수' 상자에서 '새로 만들기' 버튼을 클릭합니다.

• 이 화면에서 새 GTM 변수를 만들 수 있습니다. 위에 나열된 각 변수에 대해 다음 프로세스를 수행해야 합니다. 각 개별 변수에 대한 세부 정보는 다음과 같습니다.

주문 수익

이름: dlv - 감사 페이지 - 주문 수익

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.value

주문 아이디

이름: dlv - 감사 페이지 - 주문 ID

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.transaction_id

통화

이름: dlv - 감사 페이지 - 통화

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.currency

세

이름: dlv - 감사 페이지 - 세금

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.tax

배송비

이름: dlv - 감사 페이지 - 배송

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.shipping

구매한 항목

이름: dlv - 감사 페이지 - 항목

변수 구성:

변수 유형: 데이터 영역 변수

데이터 영역 변수 이름: ecommerce.items

각 변수는 완료되면 다음과 유사해야 합니다.

GTM에서 전자상거래 태그 만들기

전자상거래 데이터를 GA4로 가져오려면 GTM이 주문 완료 페이지에서 태그를 실행해야 합니다. 이 태그에는 각 주문에 대한 정보가 포함되어 있으며 GA4 보고서를 채우는 데 사용됩니다.

• GTM으로 돌아가서 왼쪽 메뉴에서 '태그'를 클릭합니다.
• 파란색 '새로 만들기' 버튼을 누릅니다.
• 태그 이름을 'GA4 구매'로 지정하세요.
• '태그 구성' 상자에서 오른쪽 상단 모서리에 있는 편집 아이콘을 누릅니다.
• 'Google 애널리틱스: GA4 이벤트'를 선택합니다.
• '구성 태그' 필드에서 'GA4 구성' 태그를 선택합니다.
• '이벤트 이름' 필드에 '구매'를 입력합니다.
• '이벤트 매개변수' 드롭다운 메뉴를 확장하고 '행 추가'를 누릅니다.

이벤트 매개변수는 태그가 실행될 때 GA4로 가져오고자 하는 순서에 대한 정보입니다. 이벤트 매개변수를 고객 주문의 개별 요소(예: 주문 금액, 배송 비용 등)로 생각하십시오. 이러한 각 요소는 구매 이벤트 태그에 대한 이벤트 매개변수로 추가되어야 합니다.

이를 설정하려면 '행 추가' 버튼을 클릭하십시오. 각 행에는 두 개의 필드가 있습니다.

• 매개변수 이름 - GA4에서 정의한 매개변수의 공식 이름입니다. GA4에 정의된 구매 매개변수 중 하나로 구매 이벤트가 발생하면 GA4에서 이를 인식합니다. 예를 들어 'transaction_id', 'tax' 및 'shipping'은 모두 인식되는 구매 매개변수입니다. 사용 가능한 구매 이벤트 매개변수의 전체 목록은 여기에서 볼 수 있습니다.

• 값 - 매개변수의 실제 값입니다. 이것은 고객 주문을 기반으로 하는 동적 값이 됩니다. 위의 예제 매개변수를 사용하면 다음과 같을 수 있습니다.

transaction_id: #245

세금: 2.56

배송: 3.99

이벤트 매개변수 값은 데이터 영역의 동적 정보 비트입니다. 이전에 생성한 데이터 영역 변수를 기억하십니까? 이벤트 매개변수 값을 채우는 데 사용되는 변수입니다.

'값' 필드의 오른쪽에 있는 아이콘을 클릭합니다. 그러면 변수를 선택할 수 있는 화면이 로드됩니다. 이 매개변수에 대한 올바른 변수를 찾아 선택합니다("dlv"로 시작하는 이전에 생성한 변수 중 하나임).

다음 매개변수에 대해 이 작업을 수행합니다.

완료되면 화면은 다음과 같아야 합니다.

디버깅

마지막으로 태그 설정이 작동하는지 테스트해야 합니다. 이것을하기 위해:

• GTM으로 이동하여 오른쪽 상단의 '미리보기' 버튼을 누릅니다.
• 스토어에서 GTM 미리보기 모드를 활성화하는 단계를 따르십시오.
• 완료되면 모서리에 태그 도우미 창이 있는 상점 전면으로 이동합니다.

이전 탭("Tag Assistant [연결됨])은 이제 미리 보기 탭에서 사이트를 탐색할 때 실행되는 태그에 대해 보고합니다.

• GA4 계정을 열고 왼쪽 메뉴에서 '구성 > DebugView'로 이동합니다.
• 상점 프런트 엔드를 미리 보고 테스트 트랜잭션을 수행하는 탭으로 돌아가십시오.
• 마지막으로 GA4 DebugView 탭으로 이동합니다. GA4 구매 태그가 성공적으로 실행되면 타임라인에 녹색 구매 이벤트가 표시됩니다. 이 이벤트를 클릭하면 오른쪽의 창이 주문에 대한 정보로 채워집니다.

GTM 변경 사항 게시

GA4 전자상거래 추적 내에서 거래가 캡처되는 것이 만족스러우면 GTM 변경 사항을 게시할 수 있습니다. 게시한 후에는 GA4 계정과 UA 계정 모두에 세심한 주의를 기울여 주문이 예상대로 기록되는지 확인하는 것이 좋습니다.