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

このページには、外部サービスピクセル向けのカスタムピクセルコードを作成して、特定のお客様イベントを追跡できるようにする手順が含まれています。カスタムピクセルのコードを作成した後、Shopifyストアにピクセルを追加できます。

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

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

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

  • 外部サービスのJavaScriptピクセル
  • 追跡する行動イベント

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

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

  1. 外部サービスのJavascript SDKを用意します
  2. ピクセルを設定して、お客様イベントを追跡します。

外部サービスの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の開発者向けドキュメントを参照してください。

ウェブピクセルは、[マーケティング][ストア分析] を行う目的のために、同意が必要とされるマーケットで設定されており、訪問者の同意があった場合にのみ実行されます。各ピクセルには、目的ごとに異なる名前が付けられる場合があります。ピクセルが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,
  });
});

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

無料体験を試す