カスタムピクセルを追加する

データを収集する特定のお客様イベントを追跡するアプリがない場合は、緩いサンドボックス環境で実行されるカスタムピクセルを追加できます。

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

  • 外部サービスの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);

script src=を使用して読み込まれるピクセルが含まれていることがあります。HTMLはShopifyのピクセルではサポートされていないため、これを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');

標準イベントに登録する

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

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

Shopifyのピクセル拡張機能APIを使用して、イベントに登録できます。登録しているイベントに、外部サービスのピクセルコードを配置する必要があります。

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

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

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
  });
});

カスタムピクセルを追加する

カスタムピクセルを追加する前に、既存のピクセルを削除して、お客様イベントが2回カウントされないようにします。次のような既存のピクセルコードは、存在する場所から手動で削除する必要があります: theme.liquidcheckout.liquid (Plusマーチャントのみ)、その他のチェックアウトスクリプト内のコード。

  1. 管理画面から、[設定] > [お客様イベント] の順に移動します。
  2. ピクセルに固有の名前を付けます。すでに存在するカスタムピクセルの名前を入力すると、ピクセルに別の名前を付けするように求めるメッセージが表示されます。
  3. [ピクセルを追加] をクリックして、イベントエディターを開きます。
  4. [コード] ウィンドウに、外部サービスのJavaScriptピクセルを貼り付けます。
  5. 追跡するイベント適切なスキーマに追加します。
  6. オプション: [その他の操作] をクリックして、ピクセル名を編集したり、Shopify Expertを雇い、カスタムピクセルに対応する方法についての情報を確認したりします。
  7. [保存] をクリックしてカスタムピクセルを保存します。カスタムピクセルを連携する準備が整ったら、[ピクセルを連携] をクリックして、イベントの追跡を開始できます。

カスタムピクセルを連携させる

カスタムピクセルを追加したら、ピクセルをストアに連携させる必要があります。

  1. 管理画面の [お客様イベント] ページで、[カスタムピクセル] をクリックします。
  2. 現在連携されていないカスタムピクセルは、[連携解除されたピクセル] という見出しの下に表示されます。該当するカスタムピクセルの行で [連携] をクリックします。
  3. Shopifyの利用規約を確認します。ピクセルがサービス要件を満たしている場合は、[連携] をクリックします。

カスタムピクセルの例

カスタム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');
fbq('init', YOUR_PIXEL_ID);

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

analytics.subscribe("product_viewed", event => {
  fbq('track', 'ViewContent', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

analytics.subscribe("product_added_to_cart", event => {
  fbq('track', 'AddToCart', {
    content_ids: [event.product_id],
    content_name: event.product_title,
    currency: event.currency,
    value: event.product_price,
  });
});

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

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

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

カスタムピクセルの連携を解除する

カスタムピクセルを追加したイベントの追跡を停止する場合、ピクセルとオンラインストアの連携を手動で解除する必要があります。

手順:

  1. 管理画面の [お客様イベント] ページで、[カスタムピクセル] をクリックします。
  2. 現在連携されているカスタムピクセルは、カスタムピクセルリストの上部に表示されます。該当するカスタムピクセルの行で [連携解除] をクリックします。ピクセルの連携を解除すると、ピクセルが削除されます。

カスタムピクセルを削除する

不要になったカスタムピクセルを削除できます。

手順:

  1. 管理画面の [お客様イベント] ページで、[カスタムピクセル] をクリックします。
  2. 該当するカスタムピクセルの行で、[...] ボタンをクリックします。
  3. [削除] をクリックします。削除を確定すると、カスタムピクセルがピクセルマネージャーから削除されます。

カスタムピクセルの削除は元に戻すことができないため、必ず適切なピクセルを削除してください。

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

無料体験を試す