ヘルプ
ログイン

カスタムピクセルコードを作成する

このページでは、特定の顧客イベントを追跡できるように、外部サービスのピクセル用のカスタムピクセルコードを作成する手順を説明します。カスタムピクセルのコードを作成したら、Shopify ストアにピクセルを追加することができます。

このページの内容

カスタムピクセルを作成する準備

カスタムピクセルを作成する前に、ピクセルの設定方法を理解できるよう、以下の情報を確認してください。

カスタムピクセルを追加する際には、以下の情報を指定します。

  • 外部サービスの JavaScript ピクセル。
  • 追跡する行動イベント。
  • お客様のプライバシーに関する同意設定。

カスタムピクセル用のコードを作成する

カスタムピクセル用のコードの作成には、以下の手順が含まれます。

  1. 外部サービスの Javascript SDK を準備する。
  2. ピクセルを顧客イベントを追跡するように設定します。
  3. ピクセルのお客様のプライバシーに関する同意設定を構成します。

外部サービスの Javascript SDK の準備

利用している外部サービスから、ピクセルに統合されたコードが提供されます。通常、ピクセルには Javascript SDK とトラッキングコードの 2 つのコンポーネントがあります。Shopify のピクセルサンドボックスでは JavaScript のみサポートされているため、外部サービスのコードに含まれる HTML はすべて削除する必要があります。

以下に Meta ピクセルの例を示します。ピクセルは、外部サービスによって若干異なります。

​​<!-- Meta Pixel Code -->
​​<script>
!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);
fbq('track', 'PageView');
</script>
<noscript><img height="1" width="1" style="display:none"
src="https://www.facebook.com/tr?id=618182112209280&ev=PageView&noscript=1"/></noscript>
<!-- End Meta Pixel Code -->

Meta のコードから HTML を削除すると、Meta のピクセル SDK と、それを初期化するコードが残ります。PageView イベントのトラッキングコードは、次のステップで追加されるため、削除されています。

​​!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');
fbq('init', YOUR_PIXEL_ID);

Meta のピクセル SDK は、Shopify のカスタムピクセルからデータを自動的に送信しません。データを送信するには、イベントをサブスクライブする必要があります。

script src= を使用して読み込まれるピクセルが見つかることがあります。Shopify のピクセルでは HTML がサポートされていないため、script src= を JavaScript の同等のコードに置き換える必要があります。

以下は、script src= を使用して読み込む Google アナリティクスのピクセルのサンプルです。

<!-- Global site tag (gtag.js) - Google Analytics -->
<script async src="https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('config', ''YOUR_PIXEL_ID'');
</script>

script src= の部分は、JavaScript の同等のコードに置き換えることができます。src 属性が必ず HTML 版と一致するようにしてください。

const script = document.createElement('script');
script.setAttribute('src', 'https://www.googletagmanager.com/gtag/js?id=YOUR_PIXEL_ID');
script.setAttribute('async', '');
document.head.appendChild(script);

window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'YOUR_PIXEL_ID');

Google のピクセル SDK は、Shopify のカスタムピクセルからデータを自動的に送信しません。データを送信するには、イベントをサブスクライブする必要があります。

顧客イベントを追跡する

ピクセルの SDK を読み込んで初期化した後、追跡のためにイベントを渡す必要があります。そのためには、イベントをサブスクライブし、そのイベントデータをピクセルの SDK に渡して、外部サービスによって処理されるようにします。

標準イベントをサブスクライブする

Shopify では一連の標準イベントが提供されており、これを使用することで、ピクセルが必要なデータを確実に収集できるようになります。

Shopify Pixels Extension API を使用してイベントをサブスクライブできます。サブスクライブするイベントとともに、外部サービスのピクセルコードを配置する必要があります。

これは Meta のピクセルに対する PageView イベントの例です。fbq("track") は Meta のコードの一部であり、各会社に独自のバージョンがあるため、そのドキュメントを参照する必要があることにご注意ください。

analytics.subscribe("page_viewed", async (event) => {
  fbq('track', 'PageView');
});

一部のイベントには、ピクセルに渡すことができるメタデータがあります。以下は、商品詳細の一部を Meta の ViewContent イベントに渡す例です。

analytics.subscribe("product_viewed", async (event) => {
  fbq('track', 'ViewContent', {
    content_ids: [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price?.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

カスタム顧客イベントをサブスクライブする

ボタンのクリック時など、追加の顧客イベントを追跡したい場合は、カスタム顧客イベントを追加できます。カスタムイベントは、標準イベントと同じ方法でサブスクライブできます。サブスクライブするイベントの名前を宣言し、その情報を外部サービスプロバイダーのピクセルに渡します。

以下は、公開済みのカスタムイベントがテーマの Liquid ファイルでどのように表示されるかを示す例です。

<script>Shopify.analytics.publish("special_email_signup", { email_campaign_id: 123});</script>

以下は、そのカスタムイベントをサブスクライブするようにピクセルを設定する方法の例です。

analytics.subscribe("special_email_signup", event => {
  window.dataLayer.push({event: emailSignUp, emailCampaignId: event.customData.email_campaign_id});
});

カスタムイベントに関する詳細については、Shopify 開発者ドキュメントを参照してください。

欧州経済地域 (EEA) やイギリスなど、同意を必要とするように設定されたマーケットでは、ウェブサイトの訪問者がピクセル設定で要求される許可を提供した場合にのみ、ウェブピクセルが実行されます。

デフォルトでは、新しいカスタムピクセルには [マーケティング] と [ストア分析] の許可が必要です。カスタムピクセルの詳細で、[お客様のプライバシー] > [許可] セクションに移動して、どの許可を必須にするかカスタマイズできます。

同様に、データ販売として設定されたピクセルは、限定的なデータ使用をサポートしていない限り、データ販売または共有をオプトアウトしたお客様に対しては実行されません。デフォルトでは、新しいカスタムピクセルはデータ販売に該当します。カスタムピクセルの詳細で、[お客様のプライバシー] > [データ販売] セクションに移動して、収集されたデータがデータ販売に該当するかどうかをカスタマイズできます。

カスタムピクセルの開発者は、同意の収集と登録に関する詳細を確認できます。

各ピクセルでは、目的ごとに異なる名前が付けられている場合があります。Shopify の定義にどのようにマッピングされるかを理解するには、外部サービスのピクセルのドキュメントを参照してください。

たとえば、[マーケティング] と [ストア分析] の目的が、Google の同意モードにどのようにマッピングされるかを以下に示します。

gtag('consent', 'update', {
  'ad_storage': 'granted',
  'analytics_storage': 'granted',
  'ad_user_data': 'granted',
  'ad_personalization': 'granted',
});

カスタムピクセルの例

以下は、Meta ピクセルのコードの例です。ピクセルコードは、外部サービスプロバイダーや追跡するイベントによって異なります。利用可能なイベントの一覧については、顧客イベントのリファレンスを参照してください。

カスタム Meta ピクセルの例

!function(f,b,e,v,n,t,s)
{if(f.fbq)return;n=f.fbq=function(){n.callMethod?
n.callMethod.apply(n,arguments):n.queue.push(arguments)};
if(!f._fbq)f._fbq=n;n.push=n;n.loaded=!0;n.version='2.0';
n.queue=[];t=b.createElement(e);t.async=!0;
t.src=v;s=b.getElementsByTagName(e)[0];
s.parentNode.insertBefore(t,s)}(window, document,'script',
'https://connect.facebook.net/en_US/fbevents.js');

// replace YOUR_PIXEL_ID with the pixel ID provided by third-party
fbq('init', YOUR_PIXEL_ID);

// integrate third-party pixel tracking
analytics.subscribe("page_viewed", (event) => {
  fbq('track', 'PageView');
});

analytics.subscribe("product_viewed", (event) => {
  fbq('track', 'ViewContent', {
    content_ids:  [event.data?.productVariant?.id],
    content_name: event.data?.productVariant?.title,
    currency: event.data?.productVariant?.price.currencyCode,
    value: event.data?.productVariant?.price.amount,
  });
});

analytics.subscribe("search_submitted", (event) => {
  fbq('track', 'Search', {
    search_string: event.searchResult.query
  });
});

analytics.subscribe("product_added_to_cart", (event) => {
  fbq('track', 'AddToCart', {
    content_ids: [event.data?.cartLine?.merchandise?.productVariant?.id],
    content_name: event.data?.cartLine?.merchandise?.productVariant?.title,
    currency: event.data?.cartLine?.merchandise?.productVariant?.price?.currencyCode,
    value: event.data?.cartLine?.merchandise?.productVariant?.price.amount,
  });
});

analytics.subscribe("payment_info_submitted", (event) => {
  fbq('track', 'AddPaymentInfo');
});

analytics.subscribe("checkout_started", (event) => {
  fbq('track', 'InitiateCheckout');
});

analytics.subscribe("checkout_completed", (event) => {
  fbq('track', 'Purchase', {
    currency: event.data?.checkout?.currencyCode,
    value: event.data?.checkout?.totalPrice?.amount,
  });
});