> ## Documentation Index
> Fetch the complete documentation index at: https://docs.aftersell.com/llms.txt
> Use this file to discover all available pages before exploring further.

# Shopify Webピクセルの設定

> 購入後アップセルと組み合わせたWebピクセルによるコンバージョントラッキングのセットアップ

[Shopify Webピクセル](https://help.shopify.com/en/manual/promoting-marketing/pixels)は、コンバージョン率などの購入データをトラッキングするためのShopifyのソリューションです。これらとの主な関わり方は2つあります。

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

<div id="app-web-pixels">
  # アプリWebピクセル
</div>

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

<div id="custom-web-pixels">
  # カスタムWebピクセル
</div>

カスタムピクセルは、ニーズを満たすアプリピクセルがShopifyマーケットプレイスで見つからない場合に、独自のソリューションを可能にします。以下では、既存の注文ステータスページのトラッキングスクリプトをカスタムピクセルを使用するように変換する方法を説明します。進める前に、[カスタムピクセルの潜在的なリスク](https://help.shopify.com/en/manual/promoting-marketing/pixels/overview#potential-risks)にご注意ください。

Google Tag Managerを使用している場合は、Shopifyが[この移行を完了するための便利なドキュメント](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/gtm-tutorial)を提供しています。

コンバージョントラッキング用のカスタムピクセルの作成には、3つの主要なステップがあります。

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

<div id="1-preparing-the-3rd-party-javascript-sdk">
  ## 1. サードパーティJavaScript SDKの準備
</div>

提供されたピクセルコードに含まれるHTMLを取り除く必要があります。HTMLの`<script>`タグで読み込まれているJavaScriptは、代わりにJavaScriptのみのアプローチで読み込むようにしてください。

このプロセスの詳細は[こちら](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels/code#third-party-sdk)で説明されています。

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

<div id="2-setting-up-conversion-tracking-using-web-pixels">
  ## 2. Webピクセルによるコンバージョントラッキングの設定
</div>

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

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

`event`から取得できるデータポイントについては、こちらのリファレンスを参照してください。

[Shopify checkout\_completedイベント](https://shopify.dev/docs/api/web-pixels-api/standard-events/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,  
  });  
});
```

<div id="3-connecting-your-custom-pixel">
  ## 3. カスタムピクセルの接続
</div>

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

それが完了したら、次の手順に従ってカスタムピクセルをストアに接続します。

1. Settings > Customer Events > Custom Pixels > Add Custom Pixelに移動します

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