구매 후 페이지에서 픽셀 추적
구매 후 페이지를 스토어의 결제에 추가하는 앱이 설치되어 있으면 스토어에서 사용 중인 사용자 지정 픽셀 추적이 특정 추적 이벤트를 캡처하지 못할 수 있습니다. 스토어의추가 스크립트상자에 추가된 사용자 지정 추적 픽셀은 결제 시 구매 후 페이지 다음에 열리는 주문 상태 페이지에서만 이벤트를 추적합니다. 따라서 고객이 구매 후 페이지에서 스토어를 나가면 주문 상태 페이지의 이벤트는 추적되지 않습니다.
전환 이벤트를 올바르게 캡처할 수 있도록 구매 후 페이지에 이벤트를 추적하는 스크립트를 추가할 수 있습니다. 이 스크립트를 사용하면 상향 판매 등 구매 후 페이지에서 발생하는 추가 구매도 추적할 수 있습니다. 구매 후 페이지 스크립트를 추가한 후에는 구매 후 페이지 스크립트에서 이미 캡처한 이벤트를 무시하도록 주문 상태 페이지 스크립트를 조정해야 합니다.
스토어에서 이벤트를 추적하는 방식의 변경은 사용자 지정 추적 픽셀을 사용하는 경우에만 수행해야 합니다. 예를 들어,온라인 스토어>기본 설정에서 Google Analytics를 설정하면 구매 후 페이지에서 이미 이벤트가 올바르게 캡처됩니다.
고려 사항
구매 후 페이지의 추가 스크립트는 주문 상태 페이지의 추가 스크립트와 유사하지만 다음과 같은 몇 가지 중요한 차이점이 있습니다.
- 스크립트가 주문 상태 페이지가 아닌 구매 후 페이지에 추가됩니다.
- 필드에는 JavaScript만 허용됩니다. Liquid 코드는 허용되지 않습니다.
- HTML 태그는
만 허용됩니다.
- 스크립트는 샌드박스에서만 실행되고 메인 페이지에는 포함되지 않습니다.
- 스토어에서 결제에 구매 후 페이지를 추가할 수 있는 앱이 설치된 경우에만 구매 후 페이지를 추가할 수 있습니다.
스크립트를 샌드박스에서 실행하면 스크립트를 보호하고 의도한 목적으로만 사용되도록 할 수 있습니다.
Shopify 지원팀은 구매 후 페이지 스크립트와 관련하여 지원을 제공하지 않습니다. 도움이 필요한 경우Shopify 커뮤니티에 게시하거나Shopify Expert를고용하는것이좋습니다。
주문 상태 페이지의 스크립트 호환성
픽셀이 모든 전환 이벤트를 올바르게 추적하게 하려면 추적 스크립트를 구매 페이지와 주문 상태 페이지 양쪽에 설정해야 합니다. 전환 이벤트가 중복으로 계산되지 않게 하려면 주문 상태 페이지에서 실행되는 스크립트에post_purchase_page_accessed
Liquid 변수를 사용하면 됩니다.
고객이 구매 후 페이지를 방문한 다음 주문 상태 페이지로 이동하면post_purchase_page_accessed
변수가true
를 반환합니다. 고객이 구매 후 페이지를 방문하지 않으면 이 변수는false
를 반환합니다.
예를 들어, 주문 상태 페이지의 스크립트에 다음의 형식을 사용할 수 있습니다.
사용 가능한 API
JavaScript global을 사용하여 추적 스크립트가 필요한 데이터에 액세스하도록 할 수 있습니다. 액세스 가능한 데이터는window.Shopify
아래에 제공됩니다.
구매 후 페이지에서 주문한 구매 추적하기
Shopify.on
이벤트를 구독하면 구매 후 페이지를 통해 발생한 추가 구매를 추적할 수 있습니다.
구독한 후에는 구매 후 변경 설정이 성공적으로 적용될 때마다 다음의 작업이 수행됩니다.
order
및outdated order
, 두 가지주문
유형의 인수가 포함된 핸들러가 호출됩니다.window.Shopify
아래의 global이 업데이트되어 스크립트가 업데이트된 데이터를 사용할 수 있게 됩니다.
이 이벤트를 구독하는 핸들러는 실행에 적어도 500밀리초가 걸릴 수 있습니다. 필요한 종속성이 있으면 미리 로드해두어야 합니다.
구매 후 페이지 스크립트 추가
- Shopify Admin에서설정>결제로 이동합니다.
- 구매 후 추가 스크립트필드에 스크립트를 입력합니다.
- 저장을 클릭합니다.
예제 스크립트
다음의 기본 스크립트 템플릿을 사용하면 구매 후 페이지 스크립트를 직접 작성하는 데 도움이 됩니다. 이 예시 스크립트는 Google Analytics를 사용하여 초기 전환을 추적하고, 추가 구매 추적 방법에 대해 설명합니다. 이 예시는 아주 단순하며, 최종 스크립트는 예시와 다를 수 있습니다.
예제 스크립트 파일
주문 상태 페이지의 예제 스크립트:
구매 후 페이지의 예제 스크립트:
참조
아래의 표에는window.Shopify
를 통해 구매 후 추가 스크립트에 노출되는 속성의 유형 정의가 포함됩니다.
필드 | 정의 |
---|---|
window.Shopify | |
shop | 주문이 접수되는상점의 세부 정보입니다. |
order | 주문의 세부 정보입니다. |
pageUrl | 현재 페이지의 URL입니다. |
wasPostPurchasePageSeen | 고객이 결제 도중에 구매 후 페이지를 봤는지 여부를 표시합니다. 처음 렌더링되는 경우 값은false 가 되고, 페이지가 다시 로드되는 등 그 외의 경우에는true 가 됩니다. |
on(event: string, handler: function): void | 이벤트 를 구독합니다. 현재CheckoutAmended 이벤트만 지원됩니다. |
off(event: string, handler: function): void | 지정된이벤트 에서핸들러 구독을 취소합니다. 현재CheckoutAmended 이벤트만 지원됩니다. |
Shop | |
id | 상점의 ID입니다. |
currency | ISO 4217형식으로 된 스토어 통화입니다. 예를 들어, USD를 사용할 수 있습니다. 자세한 사항은shop.currency를 참조하십시오. |
Order | |
id | 주문의 내부 식별자입니다. |
number | 주문 이름을 표현하는 정수입니다. 예를 들어, 1025입니다. |
checkoutToken | 결제의 내부 식별자입니다. |
customer | 주문과 관련된고객입니다. |
lineItem | 주문에 포함된품목입니다. |
subtotalPrice | 품목/카트할인이모두적용된주문품목금액의 소계입니다. 소계에는 세금(세금 미포함 가격인 경우), 배송비, 팁이 포함되지 않습니다. |
totalPrice | 주문의 총 가격입니다. |
currency | 주문 통화의ISO 4217코드입니다. |
discounts | 주문에 적용된 할인 총액입니다. |
Customer | |
id | 고객의 ID입니다. |
고객의 이메일 주소입니다. | |
acceptsMarketing | 고객이 마케팅을 수락했는지 여부입니다. 고객이 마케팅을 수락하면true 이고, 수락하지 않으면false 입니다. |
hasAccount | 고객이메일이고객계정과연결되었는지여부입니다。이메일이고객 계정에 등록되어 있으면true 이고, 등록되지 않았으면false 입니다. 자세한 사항은customer.has_account를 참조하십시오. |
firstName | 고객의 이름입니다. |
lastName | 고객의 성입니다. |
ordersCount | 고객이 지금까지 주문한 총 주문 수입니다. |
totalSpent | 고객이 모든 주문에서 소비한 총 금액입니다. |
LineItem | |
finalLinePrice | 품목에 있는 모든 항목의 결합된 가격입니다. 이는line_item.final_price 에line_item.quantity 를 곱한 값과 같습니다. |
finalPrice | 모든 품목 수준의 할인 금액을 포함한 품목 가격입니다. |
lineLevelTotalDiscount | 품목에 구체적으로 적용된 모든 할인의 총액입니다. 카트에 추가된 할인은 포함되지 않습니다. |
optionsWithValues | 품목의 제품 옵션에서 선택된 값의 배열입니다. 자세한 사항은line_item.options_with_value를 참조하십시오. |
originalLinePrice | 품목에 있는 모든 항목의 결합된 할인 미적용 가격입니다. 이는line_item.final_price 에line_item.quantity 를 곱한 값과 같습니다. |
originalPrice | 할인이 적용되기 전 품목의 원래 가격입니다. |
price | 품목의 단가입니다. 가격에는 품목에 적용되는 할인이 모두 반영됩니다. 독일이나 프랑스 내의 스토어에서만 사용할 수 있습니다. |
product | 품목의제품입니다. |
properties | 카트에 추가된 품목에 대한 사용자 지정 정보의 배열입니다. 자세한 사항은line_item.properties를 참조하십시오. |
quantity | 품목의 수량입니다. |
title | 품목의 이름입니다. 자세한 사항은line_item.title을 참조하십시오. |
variant | 품목의이형 상품입니다. |
Product | |
id | 제품의 ID입니다. |
type | 제품 유형입니다. |
ProductVariant | |
id | 이형 상품의 ID입니다. |
sku | 이형 상품의 SKU(재고 관리 코드)입니다. |
CartDiscount | |
id | 할인적용의 내부 식별자입니다. |
code | 할인이 적용되는 경우, 할인 코드입니다. |
type | 할인유형입니다. 가능한 값은automatic ,discount_code ,manual ,script 입니다. |
amount | 할인으로 인해 감소된 주문 가격의 총 금액입니다. |