カスタムピクセルコードを作成する
このページはMar 29, 2024に印刷されています。最新のバージョンについては、https://help.shopify.com/ja/manual/promoting-marketing/pixels/custom-pixels/codeをご覧ください。
このページには、外部サービスピクセル向けのカスタムピクセルコードを作成して、特定のお客様イベントを追跡できるようにする手順が含まれています。カスタムピクセルのコードを作成した後、Shopifyストアにピクセルを追加できます。
カスタムピクセルを作成する準備を行う
カスタムピクセルを作成する前に、ピクセルの設定方法を理解するために以下の情報を確認してください。
カスタムピクセルを追加する際に、次の情報を指定します。
- 外部サービスのJavaScriptピクセル
- 追跡する行動イベント
カスタムピクセルのコードを作成する
カスタムピクセルのコードの作成には、以下の手順が含まれます。
-
外部サービスのJavascript SDKを用意します。
- ピクセルを設定して、お客様イベントを追跡します。
外部サービスのJavascript SDKコードを準備する
使用する外部サービスでは、ピクセルと接続するコードを提供します。ピクセルには通常、Javascript SDKとトラッキングコードという2つのコンポーネントがあります。ShopifyピクセルサンドボックスではJavaScriptしかサポートしていないため、外部サービスのコード内のHTMLは削除する必要があります。
Metaピクセルの例を以下に示します。ピクセルは、外部サービスによってわずかに異なります。
MetaのコードからHTMLを削除すると、MetaピクセルのSDKとそれを初期化するコードが残ります。PageView
イベントトラッキングコードは、次のステップで追加される予定なので、削除されました。
script src=
を使用して読み込まれるピクセルが含まれていることがあります。HTMLはShopifyのピクセルではサポートされていないため、script src=
をJavaScriptに置き換える必要があります。
Googleアナリティクスピクセルの例を以下に示します。
script src=
の部分は、JavaScriptに置き換えることができます。src属性がHTMLバージョンと一致していることを必ず確認してください。
お客様イベントを追跡する
ピクセルのSDKを読み込んで初期化した後、トラッキングのために、イベントをピクセルのSDKに渡す必要があります。これを行うには、イベントに登録し、外部サービスによって処理されるように、イベントデータをピクセルのSDKに渡します。
標準イベントに登録する
Shopifyではイベントの標準セットを提供しています。これにより、ピクセルが必要なデータを簡単に収集できます。
Shopifyのピクセル拡張機能APIを使用して、イベントに登録できます。登録しているイベントに、外部サービスのピクセルコードを配置する必要があります。
これは、MetaピクセルのPageView
イベントの例です。fbq("track")
はMetaコードの一部です。会社ごとに独自のバージョンがあり、それぞれのドキュメントを参照する必要があります。
一部のイベントには、ピクセルに渡すことができるメタデータがあります。以下は、商品の詳細をMetaのViewContent
イベントに渡す例です。
カスタムのお客様イベントに登録する
誰かがボタンをクリックしたなどの追加のお客様イベントを追跡したい場合は、カスタムのお客様イベントを追加できます。カスタムイベントは、標準イベントと同じ方法で登録できます。登録するイベントの名前を公表し、その情報を外部サービスプロバイダーのピクセルに渡します。
以下は、公開されたカスタムイベントがテーマのLiquidファイルに表示される場合の例です。
以下は、そのカスタムイベントに登録するためにピクセルを設定する方法の例です。
カスタムイベントの詳細については、Shopifyの開発者向けドキュメントを参照してください。
同意を設定する
ウェブピクセルは、[マーケティング] や [ストア分析] を行う目的のために、同意が必要とされるマーケットで設定されており、訪問者の同意があった場合にのみ実行されます。各ピクセルには、目的ごとに異なる名前が付けられる場合があります。ピクセルがShopifyの定義に対応する方法を理解するには、ピクセルドキュメントを参照してください。
たとえば、[マーケティング] と [ストア分析] を行う目的で、Googleの同意モードに適応する方法は、以下のとおりです。
カスタムピクセルのサンプル
以下は、Metaピクセルのコードの例です。ピクセルコードは、外部サービスプロバイダーや追跡するイベントによって異なります。利用可能なイベントのリストについては、お客様イベントのリファレンスを参照してください。