Shopify Webピクセルは、コンバージョン率などの購入データをトラッキングするためのShopifyのソリューションです。これらとの主な関わり方は2つあります。

アプリWebピクセル
カスタムWebピクセル

アプリWebピクセル

一部のアプリピクセル（例：Omega Facebook Pixel）は、Shopify Webピクセルと直接統合されています。これらのアプリは、Aftersellと連携するための追加設定は不要です。

カスタムWebピクセル

カスタムピクセルは、ニーズを満たすアプリピクセルがShopifyマーケットプレイスで見つからない場合に、独自のソリューションを可能にします。以下では、既存の注文ステータスページのトラッキングスクリプトをカスタムピクセルを使用するように変換する方法を説明します。進める前に、カスタムピクセルの潜在的なリスクにご注意ください。 Google Tag Managerを使用している場合は、Shopifyがこの移行を完了するための便利なドキュメントを提供しています。コンバージョントラッキング用のカスタムピクセルの作成には、3つの主要なステップがあります。

サードパーティJavaScript SDKの準備
Webピクセルによるコンバージョントラッキングの設定
カスタムピクセルの接続

1. サードパーティJavaScript SDKの準備

提供されたピクセルコードに含まれるHTMLを取り除く必要があります。HTMLの<script>タグで読み込まれているJavaScriptは、代わりにJavaScriptのみのアプローチで読み込むようにしてください。このプロセスの詳細はこちらで説明されています。 Google Tag Managerを使った例 元のピクセルコード：

<!-- 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>

HTMLを取り除き、<script>タグを書き換えた後：

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のカスタムピクセルからデータを自動的に送信しないことに注意してください。データを送信するには、イベントをサブスクライブする必要があります。

2. Webピクセルによるコンバージョントラッキングの設定

カスタムピクセルでコンバージョンをトラッキングするには、Shopifyが提供するcheckout_completedイベントをサブスクライブします。このイベントは、顧客に購入後ページが表示される場合はそのページで、表示されない場合はサンキューページでトリガーされます。どちらの場合もこのイベントは1回のみトリガーされるため、購入の二重カウントを避けるための追加ロジックは不要です。

analytics.subscribe("checkout_completed", (event) => {  
  // process event using 3rd party pixel tracking code  
});

eventから取得できるデータポイントについては、こちらのリファレンスを参照してください。 Shopify checkout_completedイベントカスタム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);  
  
analytics.subscribe("checkout_completed", (event) => {  
  fbq('track', 'Purchase', {  
    currency: event.data?.checkout?.currencyCode,  
    value: event.data?.checkout?.totalPrice?.amount,  
  });  
});

3. カスタムピクセルの接続

カスタムピクセルを追加する前に、顧客イベントが二重にカウントされないよう、既存のピクセルを削除または修正してください。既存のピクセルコードは、theme.liquid、checkout.liquid（Plusマーチャントのみ）、チェックアウト設定のAdditional scriptsなど、存在するすべての場所から手動で削除する必要があります。それが完了したら、次の手順に従ってカスタムピクセルをストアに接続します。

Settings > Customer Events > Custom Pixels > Add Custom Pixelに移動します
1. カスタムピクセルの名前を入力します。
「Code」セクションにカスタムピクセルコードを貼り付けます。
顧客プライバシー設定が適切に構成されていることを確認します。
カスタムピクセルの「Save」をクリックします。
「Connect」をクリックしてカスタムピクセルを公開します！

はじめに

ホームページ

ベストプラクティス

購入後アップセル

チェックアウトアップセル（Shopify Plus）

サンキューページ

商品ページアップセル

Rokt Thanks

戦略

アナリティクスとトラッキング

連携

Aftersell MCP

請求とアカウント

トラブルシューティング

Shopify Webピクセルの設定

アプリWebピクセル

カスタムWebピクセル

1. サードパーティJavaScript SDKの準備

2. Webピクセルによるコンバージョントラッキングの設定

3. カスタムピクセルの接続

​アプリWebピクセル

​カスタムWebピクセル

​1. サードパーティJavaScript SDKの準備

​2. Webピクセルによるコンバージョントラッキングの設定

​3. カスタムピクセルの接続

アプリWebピクセル

カスタムWebピクセル

1. サードパーティJavaScript SDKの準備

2. Webピクセルによるコンバージョントラッキングの設定

3. カスタムピクセルの接続