購入後ページでのピクセルトラッキング
ストアのチェックアウトに購入後ページを追加するアプリをインストールしていると、ストアで使用するカスタムピクセルトラッキングでは、特定の追跡イベントがキャプチャされない場合があります。ストアの [追加スクリプト] ボックスに追加されたカスタムトラッキングピクセルは、購入後ページの後に表示される注文状況ページでのみイベントを追跡します。お客様が購入後ページでストアを離れると、注文状況ページでのイベントは追跡されません。
コンバージョンイベントを適切にキャプチャするようにするには、購入後ページでイベントを追跡するスクリプトを追加します。このスクリプトでは、アップセルなどの購入後ページから行われた追加購入を追跡することもできます。購入後ページのスクリプトを追加したら、注文状況ページのスクリプトを調整して、購入後ページのスクリプトによってすでにキャプチャされているイベントを無視するようにする必要があります。
カスタムトラッキングピクセルを使用している場合にのみ、ストアのイベントを追跡する方法を変更する必要があります。たとえば、[オンラインストア] > [各種設定] の順に移動してGoogleアナリティクスを設定した場合、購入後ページのイベントはすでに適切にキャプチャされています。
留意事項
購入後ページの追加スクリプトは、注文状況ページの追加スクリプトに類似していますが、次のいくつかの重要な違いがあります。
- スクリプトは注文状況ページではなく、購入後ページに追加されます。
- フィールドに入力できるのはJavaScriptのみです。Liquidコードは使用できません。
- 使用できる唯一のHTMLタグは
<script>です。 - スクリプトはサンドボックス内で実行され、メインページには記述されません。
- 購入後ページのスクリプトを追加できるのは、チェックアウト時の購入後ページを追加するアプリをストアにインストールしている場合のみです。
サンドボックス内でスクリプトを実行すると、スクリプトは安全になり、所期の目的で使用されます。
Shopify サポートでは購入後ページのスクリプトには対応できません。サポートが必要な場合は、Shopify コミュニティに投稿するか、Shopify Expertを雇うことができます。
注文状況ページのスクリプトとの互換性
ピクセルがすべてのコンバージョンイベントを適切に追跡するようにするには、購入後ページと注文状況ページの両方で追跡スクリプトを設定します。同じコンバージョンイベントを2回カウントしないようにするには、注文状況ページで実行されるスクリプトにLiquid変数のpost_purchase_page_accessedを使用します。
お客様が購入後ページに遷移してから注文状況ページに移動すると、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のグローバル変数を使用して、追跡スクリプトが必要とするデータにアクセスできるようにします。アクセス可能なデータは、window.Shopifyで確認できます。
購入後ページで行われた購入を追跡する
購入後ページで行われた追加購入を追跡するには、Shopify.onのイベントに登録します。
登録すると、購入後のさまざまな変更が正常に適用されるたびに、次のアクションが発生します。
- 2つの
Orderタイプの引数 （orderとoutdated order) でハンドラーが呼び出されます。 -
window.Shopifyのグローバル変数が更新され、スクリプトで更新されたデータを使用できるようになります。
このイベントに登録されたハンドラーが実行されるのに必要な時間は500ミリ秒ほどである場合があります。必要な依存関係を前もって読み込んでおくようにしてください。
購入後ページのスクリプトを追加する
- Shopify Adminから、[設定] > [チェックアウト] に移動します。
- [購入後の追加スクリプト] のフィールドに、スクリプトを入力します。
- [保存] をクリックします。
スクリプトの例
次の基本スクリプトのテンプレートを使用して、独自の購入後ページのスクリプトを構築できます。このスクリプト例では、最初のコンバージョンの追跡にGoogleアナリティクスを使用しており、追加購入を追跡する方法について説明しています。この例は非常にシンプルであるため、独自で作成される実際のスクリプトとは異なる可能性があります。
スクリプト例のファイル
注文状況ページのスクリプト例:
<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 |
eventに登録します。現在のところ、CheckoutAmendedのイベントのみサポートされています。 |
| off(event: string, handler: function): void | 所定のeventからhandlerを登録解除します。現在のところ、CheckoutAmendedのイベントのみサポートされています。 |
| Shop | |
| id | ショップのID。 |
| currency | ISO 4217形式のストアの通貨。たとえば、USD。詳細については、「shop.currency」を参照してください。 |
| Order | |
| id | 注文の内部向けのID。 |
| number | 注文名の整数表記。たとえば、1025。 |
| checkoutToken | チェックアウトの内部向けのID。 |
| 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.quantityを乗算したline_item.final_priceの値と等しくなります。 |
| finalPrice | すべての項目レベルでのディスカウント額を含む項目価格。 |
| lineLevelTotalDiscount | 特に項目に適用されるディスカウントすべての合計金額。この金額にはカートに追加されるディスカウントは含まれていません。 |
| optionsWithValues | アイテムの商品オプションから選択した値の配列。詳細については、「line_item.options_with_values」を参照してください。 |
| originalLinePrice | ディスカウントが適用される前の、項目に含まれるアイテムの数量での合算価格。この価格は、line_item.original_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 | ディスカウントアプリケーションの内部向けのID。 |
| code | ディスカウントのコード (ある場合)。 |
| type | ディスカウントのタイプ。想定される値は、automatic、discount_code、manual、scriptです。 |
| amount | 注文価格からディスカウントを適用した合計金額。 |