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

このページはJul 27, 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 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's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

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

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's pixel SDK doesn't automatically transmit data from a Shopify custom pixel. To transmit data, you need to subscribe to events.

お客様イベントを追跡する

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

Shopifyではイベントの標準セットを提供しています。これにより、ピクセルが必要なデータを簡単に収集できます。

Shopifyのピクセル拡張機能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,
  });
});

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

目次

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

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

外部サービスのJavascript SDKコードを準備する

お客様イベントを追跡する

カスタムピクセルのサンプル

カスタムMetaピクセル

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

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

目次

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

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

外部サービスのJavascript SDKコードを準備する

お客様イベントを追跡する

標準イベントに登録する

カスタムのお客様イベントに登録する

同意を設定する

カスタムピクセルのサンプル

カスタムMetaピクセル

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