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

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

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

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

留意事項

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

• スクリプトは注文状況ページではなく、購入後ページに追加されます。
• フィールドに入力できるのはJavaScriptのみです。Liquidコードは使用できません。
• 使用できる唯一のHTMLタグは{%endif%}

  利用可能なAPI

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

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

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

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

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

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

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

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

  スクリプトの例

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

  スクリプト例のファイル

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

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

  リファレンス

  次の表には、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から处理程序を登録解除します。現在のところ、CheckoutAmendedのイベントのみサポートされています。
  Shop
  id	ショップのID。
  currency	ISO 4217形式のストアの通貨。たとえば、USD。詳細については、「shop.currency」を参照してください。
  Order
  id	注文の内部向けのID。
  数量	注文名の整数表記。たとえば、1025。
  checkoutToken	チェックアウトの内部向けのID。
  customer	注文に関連付けられたお客様。
  行Item	注文の項目。
  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	項目内のすべてのアイテムの合算価格。これは行_item.quantityを乗算したline_item.final_priceの値と等しくなります。
  finalPrice	すべての項目レベルでのディスカウント額を含む項目価格。
  行LevelTotalDiscount	特に項目に適用されるディスカウントすべての合計金額。この金額にはカートに追加されるディスカウントは含まれていません。
  optionsWithValues	アイテムの商品オプションから選択した値の配列。詳細については、「行_item.options_with_values」を参照してください。
  originalLinePrice	ディスカウントが適用される前の、項目に含まれるアイテムの数量での合算価格。この価格は、行_item.original_priceに行_item.quantityを乗じた値と等しくなります。
  originalPrice	ディスカウントが適用される前の、項目の元の価格。
  price	項目の単価。価格には、項目に適用されるディスカウントが反映されています。ドイツまたはフランスにあるストアでのみ利用可能です。
  product	項目の商品。
  properties	カートに追加されたアイテムのカスタム情報の配列。詳細については、「行_item.properties」を参照してください。
  quantity	項目の数量。
  title	項目のタイトル。詳細については、「行_item.title」を参照してください。
  variant	項目のバリエーション。
  Product
  id	商品のID。
  类型	商品のタイプ。
  ProductVariant
  id	バリエーションのID。
  sku	バリエーションのSKU。
  CartDiscount
  id	ディスカウントアプリケーションの内部向けのID。
  code	ディスカウントのコード (ある場合)。
  类型	ディスカウントのタイプ。想定される値は、automatic、discount_code、manual、scriptです。
  amount	注文価格からディスカウントを適用した合計金額。