구매 후 페이지에서 픽셀 추적
구매 후 페이지를 스토어의 결제에 추가하는 앱이 설치되어 있으면 스토어에서 사용 중인 사용자 지정 픽셀 추적이 특정 추적 이벤트를 캡처하지 못할 수 있습니다. 스토어의 추가 스크립트 상자에 추가된 사용자 지정 추적 픽셀은 결제 시 구매 후 페이지 다음에 열리는 주문 상태 페이지에서만 이벤트를 추적합니다. 따라서 고객이 구매 후 페이지에서 스토어를 나가면 주문 상태 페이지의 이벤트는 추적되지 않습니다.
전환 이벤트를 올바르게 캡처할 수 있도록 구매 후 페이지에 이벤트를 추적하는 스크립트를 추가할 수 있습니다. 이 스크립트를 사용하면 상향 판매 등 구매 후 페이지에서 발생하는 추가 구매도 추적할 수 있습니다. 구매 후 페이지 스크립트를 추가한 후에는 구매 후 페이지 스크립트에서 이미 캡처한 이벤트를 무시하도록 주문 상태 페이지 스크립트를 조정해야 합니다.
스토어에서 이벤트를 추적하는 방식의 변경은 사용자 지정 추적 픽셀을 사용하는 경우에만 수행해야 합니다. 예를 들어, 온라인 스토어 > 기본 설정에서 Google Analytics를 설정하면 구매 후 페이지에서 이미 이벤트가 올바르게 캡처됩니다.
고려 사항
구매 후 페이지의 추가 스크립트는 주문 상태 페이지의 추가 스크립트와 유사하지만 다음과 같은 몇 가지 중요한 차이점이 있습니다.
- 스크립트가 주문 상태 페이지가 아닌 구매 후 페이지에 추가됩니다.
- 필드에는 JavaScript만 허용됩니다. Liquid 코드는 허용되지 않습니다.
- HTML 태그는
<script>만 허용됩니다. - 스크립트는 샌드박스에서만 실행되고 메인 페이지에는 포함되지 않습니다.
- 스토어에서 결제에 구매 후 페이지를 추가할 수 있는 앱이 설치된 경우에만 구매 후 페이지를 추가할 수 있습니다.
스크립트를 샌드박스에서 실행하면 스크립트를 보호하고 의도한 목적으로만 사용되도록 할 수 있습니다.
Shopify 지원팀은 구매 후 페이지 스크립트와 관련하여 지원을 제공하지 않습니다. 도움이 필요한 경우 Shopify 커뮤니티에 게시하거나 Shopify Expert를 고용하는 것이 좋습니다.
주문 상태 페이지의 스크립트 호환성
픽셀이 모든 전환 이벤트를 올바르게 추적하게 하려면 추적 스크립트를 구매 페이지와 주문 상태 페이지 양쪽에 설정해야 합니다. 전환 이벤트가 중복으로 계산되지 않게 하려면 주문 상태 페이지에서 실행되는 스크립트에 post_purchase_page_accessed Liquid 변수를 사용하면 됩니다.
고객이 구매 후 페이지를 방문한 다음 주문 상태 페이지로 이동하면 post_purchase_page_accessed 변수가 true를 반환합니다. 고객이 구매 후 페이지를 방문하지 않으면 이 변수는 false를 반환합니다.
예를 들어, 주문 상태 페이지의 스크립트에 다음의 형식을 사용할 수 있습니다.
{% if first_time_accessed == true and post_purchase_page_accessed == false %}
<script>
// insert your tracking script
</script>
{% endif %}사용 가능한 API
JavaScript global을 사용하여 추적 스크립트가 필요한 데이터에 액세스하도록 할 수 있습니다. 액세스 가능한 데이터는 window.Shopify 아래에 제공됩니다.
구매 후 페이지에서 주문한 구매 추적하기
Shopify.on 이벤트를 구독하면 구매 후 페이지를 통해 발생한 추가 구매를 추적할 수 있습니다.
구독한 후에는 구매 후 변경 설정이 성공적으로 적용될 때마다 다음의 작업이 수행됩니다.
-
order및outdated order, 두 가지주문유형의 인수가 포함된 핸들러가 호출됩니다. -
window.Shopify아래의 global이 업데이트되어 스크립트가 업데이트된 데이터를 사용할 수 있게 됩니다.
이 이벤트를 구독하는 핸들러는 실행에 적어도 500밀리초가 걸릴 수 있습니다. 필요한 종속성이 있으면 미리 로드해두어야 합니다.
구매 후 페이지 스크립트 추가
- Shopify Admin에서 설정 > 결제로 이동합니다.
- 구매 후 추가 스크립트 필드에 스크립트를 입력합니다.
- 저장을 클릭합니다.
예제 스크립트
다음의 기본 스크립트 템플릿을 사용하면 구매 후 페이지 스크립트를 직접 작성하는 데 도움이 됩니다. 이 예시 스크립트는 Google Analytics를 사용하여 초기 전환을 추적하고, 추가 구매 추적 방법에 대해 설명합니다. 이 예시는 아주 단순하며, 최종 스크립트는 예시와 다를 수 있습니다.
예제 스크립트 파일
주문 상태 페이지의 예제 스크립트:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
// make sure the initial conversion isn't tracked twice
{% if first_time_accessed == false or post_purchase_page_accessed == true %}
return;
{% endif %}
// set up google analytics
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-FYNQ742HTX');
// track initial conversion
var order = window.Shopify.order;
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: order.lineItems.map((item) => ({
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
})),
});
})();
</script>구매 후 페이지의 예제 스크립트:
<script async src="https://www.googletagmanager.com/gtag/js?id=G-FYNQ742HTX"></script>
<script>
(function() {
// set up google analytics
window.dataLayer = window.dataLayer || [];
function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'G-FYNQ742HTX');
// make sure the initial conversion isn't tracked twice
if (!Shopify.wasPostPurchasePageSeen) {
var order = window.Shopify.order;
// track initial conversion
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: order.lineItems.map(function(item) {
return {
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
};
}),
});
}
// set up additional conversion tracking
Shopify.on('CheckoutAmended', function(newOrder, previousOrder) {
// identify which items were recently added, if any
var oldItems = previousOrder.lineItems.map(function (line) { return line.id; });
var addedItems = newOrder.lineItems.filter(
function (line) { return oldItems.indexOf(line.id) < 0; }
);
// no new items were added, so we skip conversion tracking
if (addedItems.length === 0) {
return;
}
// track additional purchase
gtag('event', 'purchase', {
affiliation: 'My Shopify Store',
transaction_id: Number(order.id).toString(),
value: order.totalPrice,
currency: order.currency,
items: addedItems.map(function (item) {
return {
id: Number(item.id).toString(),
name: item.title,
category: item.product.type,
price: item.price,
quantity: item.quantity,
variant: Number(item.variant.sku).toString(),
};
}),
});
});
})();
</script>참조
아래의 표에는 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 | 할인으로 인해 감소된 주문 가격의 총 금액입니다. |