# 計測Pixelの設定

> 共通設定

Recustomerの計測Pixelを設定すると、ストアフロント（購入者が閲覧するショップ画面）での購買行動データを自動的に取得できるようになります。

> **注意: Shopifyをご利用の場合のみ**
>
> 計測PixelはShopifyの「顧客イベント」機能を使って設定します。Shopify以外のカートシステムをご利用の場合、この設定は不要です。

1. [計測される主なデータ](#計測される主なデータ)
2. [設定方法](#設定方法)
3. [補足](#補足)

### 計測される主なデータ

| 行動 | 説明 |
| --- | --- |
| ページ閲覧 | トップページ、商品ページ、コレクションページなどの閲覧 |
| カート操作 | 商品のカートへの追加・削除、カートページの閲覧 |
| チェックアウト | チェックアウトの開始と完了 |

メールアドレス・電話番号・住所などの個人情報は**自動的に除外**されます。計測されるのは購買行動データのみです。

### 設定方法

1. Shopify管理画面にログインします

2. 設定 > 顧客イベント を開きます

3. 画面右上の「カスタムピクセルを追加」をクリックします

   ![Shopifyのお客様イベント画面。右上の「カスタムピクセルを追加」ボタンを押します](images/setup_02c1a_web-pixel-add-pixel.png)

4. ピクセル名に任意の名前を入力し、「ピクセルを追加」をクリックします

   ![「カスタムピクセルを追加」のモーダル。ピクセル名を入力して「ピクセルを追加」を押します](images/setup_02c1a_web-pixel-name.png)

5. コードエディタが表示されたら、以下のコードをそのまま貼り付けます

   ```js
   const recustomerEvents = [];
   globalThis.recustomerEvents = recustomerEvents;
   globalThis.recustomerInit = init;
   analytics.subscribe("all_standard_events", (event) => recustomerEvents.push(event));
   analytics.subscribe("all_custom_events", (event) => recustomerEvents.push(event));
   const script = document.createElement("script");
   script.src = "https://script.rcmr.io/pixel/main.js";
   script.async = true;
   document.head.append(script);
   ```

6. 右上の「保存」をクリックした後、ピクセルのステータスを「接続」に変更します。ステータスが「接続済み」になれば設定完了です

### 補足

- 貼り付けたコードは、計測本体を読み込むための「ローダー」です。計測ロジックの更新はRecustomer側で自動的に行われるため、**一度設定すればコードの貼り直しは不要**です。
- 複数のShopifyストアで利用する場合は、各ストアの管理画面でそれぞれ同じ手順で設定してください。コードは全ストア共通で、ストアの識別は自動的に行われます。
- 計測を一時停止したい場合は、設定 > 顧客イベント から、Recustomerのピクセルのステータスを「切断」に変更してください。コードを削除する必要はありません。
- 計測スクリプトは非同期で読み込まれ、Shopifyのサンドボックス内で動作するため、**ストアの表示速度への影響はほぼありません**。