購入後ページでのピクセルトラッキング

ストアのチェックアウトに購入後ページを追加するアプリをインストールしていると、ストアで使用するカスタムピクセルトラッキングでは、特定の追跡イベントがキャプチャされない場合があります。ストアの [追加スクリプト] ボックスに追加されたカスタムトラッキングピクセルは、購入後ページの後に表示される注文状況ページでのみイベントを追跡します。お客様が購入後ページでストアを離れると、注文状況ページでのイベントは追跡されません。

コンバージョンイベントを適切にキャプチャするようにするには、購入後ページでイベントを追跡するスクリプトを追加します。このスクリプトでは、アップセルなどの購入後ページから行われた追加購入を追跡することもできます。購入後ページのスクリプトを追加したら、注文状況ページのスクリプトを調整して、購入後ページのスクリプトによってすでにキャプチャされているイベントを無視するようにする必要があります。

カスタムトラッキングピクセルを使用している場合にのみ、ストアのイベントを追跡する方法を変更する必要があります。たとえば、[オンラインストア] > [各種設定] の順に移動してGoogleアナリティクスを設定した場合、購入後ページのイベントはすでに適切にキャプチャされています。

留意事項

購入後ページの追加スクリプトは、注文状況ページの追加スクリプトに類似していますが、次のいくつかの重要な違いがあります。

  • スクリプトは注文状況ページではなく、購入後ページに追加されます。
  • フィールドに入力できるのはJavaScriptのみです。Liquidコードは使用できません。
  • 使用できる唯一のHTMLタグは<script>です。
  • スクリプトはサンドボックス内で実行され、メインページには記述されません。
  • 購入後ページのスクリプトを追加できるのは、チェックアウト時の購入後ページを追加するアプリをストアにインストールしている場合のみです。

サンドボックス内でスクリプトを実行すると、スクリプトは安全になり、所期の目的で使用されます。

Shopify サポートでは購入後ページのスクリプトには対応できません。サポートが必要な場合は、Shopify コミュニティに投稿するか、Shopify Expertを雇うことができます。

注文状況ページのスクリプトとの互換性

ピクセルがすべてのコンバージョンイベントを適切に追跡するようにするには、購入後ページと注文状況ページの両方で追跡スクリプトを設定します。同じコンバージョンイベントを2回カウントしないようにするには、注文状況ページで実行されるスクリプトにLiquid変数のpost_purchase_page_accessedを使用します。

お客様が購入後ページに遷移してから注文状況ページに移動すると、post_purchase_page_accessedの変数がtrueを返します。お客様が購入後ページに到達しないと、変数はfalseを返します。

たとえば、注文状況ページのスクリプトに次のフォーマットを使用できます。

{% unless post_purchase_page_accessed %}
<script> 
    //insert your tracking script
</script>
{% endunless %}

利用可能なAPI

JavaScriptのグローバル変数を使用して、追跡スクリプトが必要とするデータにアクセスできるようにします。アクセス可能なデータは、window.Shopifyで確認できます。

購入後ページで行われた購入を追跡する

購入後ページで行われた追加購入を追跡するには、Shopify.onのイベントに登録します。

登録すると、購入後のさまざまな変更が正常に適用されるたびに、次のアクションが発生します。

  • 2つのOrderタイプの引数 (orderoutdated order) でハンドラーが呼び出されます。
  • window.Shopifyのグローバル変数が更新され、スクリプトで更新されたデータを使用できるようになります。

このイベントに登録されたハンドラーが実行されるのに必要な時間は500ミリ秒ほどである場合があります。必要な依存関係を前もって読み込んでおくようにしてください。

購入後ページのスクリプトを追加する

  1. 管理画面から、[設定] > [チェックアウト] に移動します。
  2. [購入後の追加スクリプト] のフィールドに、スクリプトを入力します。
  3. [保存] をクリックします。

スクリプトの例

次の基本スクリプトのテンプレートを使用して、独自の購入後ページのスクリプトを構築できます。このスクリプト例では、最初のコンバージョンの追跡にGoogleアナリティクスを使用しており、追加購入を追跡する方法について説明しています。この例は非常にシンプルであるため、独自で作成される実際のスクリプトとは異なる可能性があります。

スクリプト例のファイル

注文状況ページのスクリプト例:

``` ``` 購入後ページのスクリプト例: ``` ```

リファレンス

次の表には、window.Shopifyで購入後の追加スクリプトに公開される属性のタイプの定義が記載されています。

フィールド 定義
window.Shopify
shop 注文が行われたショップの詳細
order 注文の詳細
pageUrl 現在のページのURLを示します。
wasPostPurchasePageSeen お客様が今回のチェックアウト時に購入後ページを表示したかどうかを示します。表示するのが初めての場合は、trueとなり、それ以外 (ページが再読み込みされるなど) の場合は、false となります。
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。
email お客様のメールアドレス。
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_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。
translate="no"CartDiscount
id ディスカウントアプリケーションの内部向けのID。
code ディスカウントのコード (ある場合)。
type ディスカウントのタイプ。想定される値は、automaticdiscount_codemanualscriptです。
amount 注文価格からディスカウントを適用した合計金額。

Shopifyで販売を開始する準備はできていますか?

無料体験を試す