구매 후 페이지에서 픽셀 추적

구매 후 페이지를 스토어의 결제에 추가하는 앱이 설치되어 있으면 스토어에서 사용 중인 사용자 지정 픽셀 추적이 특정 추적 이벤트를 캡처하지 못할 수 있습니다. 스토어의추가 스크립트상자에 추가된 사용자 지정 추적 픽셀은 결제 시 구매 후 페이지 다음에 열리는 주문 상태 페이지에서만 이벤트를 추적합니다. 따라서 고객이 구매 후 페이지에서 스토어를 나가면 주문 상태 페이지의 이벤트는 추적되지 않습니다.

전환 이벤트를 올바르게 캡처할 수 있도록 구매 후 페이지에 이벤트를 추적하는 스크립트를 추가할 수 있습니다. 이 스크립트를 사용하면 상향 판매 등 구매 후 페이지에서 발생하는 추가 구매도 추적할 수 있습니다. 구매 후 페이지 스크립트를 추가한 후에는 구매 후 페이지 스크립트에서 이미 캡처한 이벤트를 무시하도록 주문 상태 페이지 스크립트를 조정해야 합니다.

스토어에서 이벤트를 추적하는 방식의 변경은 사용자 지정 추적 픽셀을 사용하는 경우에만 수행해야 합니다. 예를 들어,온라인 스토어>기본 설정에서 Google Analytics를 설정하면 구매 후 페이지에서 이미 이벤트가 올바르게 캡처됩니다.

고려 사항

구매 후 페이지의 추가 스크립트는 주문 상태 페이지의 추가 스크립트와 유사하지만 다음과 같은 몇 가지 중요한 차이점이 있습니다.

  • 스크립트가 주문 상태 페이지가 아닌 구매 후 페이지에 추가됩니다.
  • 필드에는 JavaScript만 허용됩니다. Liquid 코드는 허용되지 않습니다.
  • HTML 태그는{%endif%}

    사용 가능한 API

    JavaScript global을 사용하여 추적 스크립트가 필요한 데이터에 액세스하도록 할 수 있습니다. 액세스 가능한 데이터는window.Shopify아래에 제공됩니다.

    구매 후 페이지에서 주문한 구매 추적하기

    Shopify.on이벤트를 구독하면 구매 후 페이지를 통해 발생한 추가 구매를 추적할 수 있습니다.

    구독한 후에는 구매 후 변경 설정이 성공적으로 적용될 때마다 다음의 작업이 수행됩니다.

    • orderoutdated order, 두 가지주문유형의 인수가 포함된 핸들러가 호출됩니다.
    • window.Shopify아래의 global이 업데이트되어 스크립트가 업데이트된 데이터를 사용할 수 있게 됩니다.

    이 이벤트를 구독하는 핸들러는 실행에 적어도 500밀리초가 걸릴 수 있습니다. 필요한 종속성이 있으면 미리 로드해두어야 합니다.

    구매 후 페이지 스크립트 추가

    1. Shopify Admin에서설정>결제로 이동합니다.
    2. 구매 후 추가 스크립트필드에 스크립트를 입력합니다.
    3. 저장을 클릭합니다.

    예제 스크립트

    다음의 기본 스크립트 템플릿을 사용하면 구매 후 페이지 스크립트를 직접 작성하는 데 도움이 됩니다. 이 예시 스크립트는 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입니다.
    email 고객의 이메일 주소입니다.
    acceptsMarketing 고객이 마케팅을 수락했는지 여부입니다. 고객이 마케팅을 수락하면true이고, 수락하지 않으면false입니다.
    hasAccount 고객이메일이고객계정과연결되었는지여부입니다。이메일이고객 계정에 등록되어 있으면true이고, 등록되지 않았으면false입니다. 자세한 사항은customer.has_account를 참조하십시오.
    firstName 고객의 이름입니다.
    lastName 고객의 성입니다.
    ordersCount 고객이 지금까지 주문한 총 주문 수입니다.
    totalSpent 고객이 모든 주문에서 소비한 총 금액입니다.
    LineItem
    finalLinePrice 품목에 있는 모든 항목의 결합된 가격입니다. 이는line_item.final_priceline_item.quantity를 곱한 값과 같습니다.
    finalPrice 모든 품목 수준의 할인 금액을 포함한 품목 가격입니다.
    lineLevelTotalDiscount 품목에 구체적으로 적용된 모든 할인의 총액입니다. 카트에 추가된 할인은 포함되지 않습니다.
    optionsWithValues 품목의 제품 옵션에서 선택된 값의 배열입니다. 자세한 사항은line_item.options_with_value를 참조하십시오.
    originalLinePrice 품목에 있는 모든 항목의 결합된 할인 미적용 가격입니다. 이는line_item.final_priceline_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 할인으로 인해 감소된 주문 가격의 총 금액입니다.

Shopify와 함께 사업을 시작할 준비가 되셨습니까?

무료 체험