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

# Profound Pixel をインストールする

> Profound Pixel をインストールして使用するためのステップバイステップガイド

このガイドでは、Profound Pixel を使い始めるために必要なすべての手順を説明します。ピクセル ID の取得、Web サイトへのコードスニペットの追加、コンバージョントラッキングの設定と検証までを順に解説します。

## 始める前に

サイトにコードを追加する前に、次の準備を整えてください。

1. **データ処理補遺に署名します。** ピクセルは、現在の契約ではカバーされていないエンドユーザーデータを Profound に送信します。広告担当者に連絡し、補遺に署名するまではインストールしないでください。
2. **Profound チームにドメインを伝えます。** 各ピクセル ID には許可されたドメインのリストがあり、リストにないドメインからのイベントは処理されません。ピクセルをインストールするすべてのホスト名を共有してください。

## インストール手順

<Steps>
  <Step id="step-1" title="ピクセル ID を取得する">
    Profound プラットフォームで **Ad Manager**(左サイドバーの **Ads** の下)に移動し、右上の **Conversions** を選択してから、**Your pixels** の下で **Generate pixel** を選択します。

    <Note>
      各ピクセル ID は 1 つのサイトまたは環境に対応します。
    </Note>
  </Step>

  <Step id="step-2" title="Web サイトにスニペットを追加する">
    スニペットは手動で、または Google Tag Manager を通じてインストールします。

    <Tabs>
      <Tab title="手動インストール">
        計測したいすべてのページの `<head>` にこのコードスニペットを貼り付け、`<YOUR_PIXEL_ID>` を [ステップ 1](#step-1) で取得したピクセル ID に置き換えます。

        ```html expandable theme={null}
          <script>
            (function (w, d, s, u) {
              try {
                if (w.pfq) return;
                var q = function () { q.q.push([].slice.call(arguments)); };
                q.q = [];
                w.pfq = q;
                var js = d.createElement(s);
                js.async = true;
                js.src = u;
                js.onerror = function () { w.pfq = function () {}; };
                var f = d.getElementsByTagName(s)[0];
                if (f && f.parentNode) f.parentNode.insertBefore(js, f);
                else d.head.appendChild(js);
              } catch (e) {}
            })(window, document, "script", "https://pixel.profound.click/sdk/v1/p.js");

            pfq("init", "<YOUR_PIXEL_ID>");
            pfq("track", "page_viewed");
          </script>
        ```

        両方の `pfq` 関数呼び出しを残してください。それぞれ異なる役割があります。

        * `pfq("init", …)` は ID と同意の処理を設定し、ランディング URL から広告クリック ID を取得します。それ自体では何も記録しません。
        * `pfq("track", "page_viewed")` はページビューを記録します。これがないと、そのページからは何も報告されません。

        **配置ルール**:

        * 計測したいすべてのページにスニペットを配置します。グローバルレイアウトまたはベーステンプレートを通じて全ページに追加するのがおすすめです。
        * `<head>` 内のできるだけ早い位置に配置します。広告クリック ID が失われるのを防ぐため、ランディング URL が書き換えられる前にスニペットが実行される必要があります。
        * 1 ページにつき 1 回だけ配置します。スニペットは自身の重複を無視します(`if (w.pfq) return`)が、`page_viewed` の行は無視されないため、重複があるとページビューが複数回カウントされます。

        <Note>
          **シングルページアプリでは、ページビューを独自に記録する必要があります。** ピクセルはルートの変更を監視しないため、記録したいルート変更のたびに `pfq('track', 'page_viewed')` を 1 回呼び出してください。
        </Note>
      </Tab>

      <Tab title="Google Tag Manager">
        サイトのタグを Google Tag Manager で管理している場合は、ピクセルを [カスタム HTML タグ](https://support.google.com/tagmanager/answer/6107167) としてインストールします。

        1. Google Tag Manager で新しいタグを作成し、タグの種類として **Custom HTML** を選択します。
        2. **手動インストール** タブのコードスニペットを貼り付け、`<YOUR_PIXEL_ID>` を [ステップ 1](#step-1) で取得したピクセル ID に置き換えます。
        3. トリガーを **Initialization - All Pages** に設定します。
        4. **Advanced Settings** > **Tag firing options** で **Once per page** を選択します。
        5. [Consent Settings](https://support.google.com/tagmanager/answer/10718549) で **No additional consent required** を選択します。

        <Note>
          最後の 2 つの設定は許可が広すぎるように見えるかもしれませんが、意図的なものです。ピクセルは同意を自ら管理しており、また発火が遅すぎると広告クリック ID が失われ、コンバージョンを広告に紐づけられなくなります。
        </Note>

        サイトがシングルページアプリの場合は、[History Change トリガー](https://support.google.com/tagmanager/answer/7679322) で `pfq('track', 'page_viewed')` を呼び出す 2 つ目のタグを追加し、ルート変更がページビューとして記録されるようにします。
      </Tab>
    </Tabs>
  </Step>

  <Step id="step-3" title="同意ポスチャーを設定する">
    <Tip>
      ピクセルが同意シグナルをどのように読み取るか、また各設定の役割については、[同意とプライバシー](/ja-jp/pixel/consent-and-privacy#consent-handling) を参照してください。
    </Tip>

    ピクセルはオプトインモードで開始します。同意シグナルによって許可されるまで、何も保存・送信しません。

    サイトが英国、EU、または欧州経済領域(EEA)にある場合は、対応は不要です。同意管理プラットフォーム(CMP)がピクセルに同意シグナルを提供します。

    米国のみを対象とするサイトの場合、通常は CMP がないため、ピクセルがイベントを記録できるよう、同意ポスチャーを明示的にオプトアウトに設定する必要があります。[ステップ 2](#step-2) で追加したスニペット内の `pfq("init", …)` の行を編集し、posture オプションを渡すようにします。

    ```javascript theme={null}
      pfq("init", "<YOUR_PIXEL_ID>", { posture: "opt-out" });
    ```
  </Step>

  <Step id="step-4" title="(任意)Content Security Policy でピクセルを許可する">
    サイトで厳格な [Content Security Policy](https://developer.mozilla.org/en-US/docs/Web/HTTP/Guides/CSP) を適用している場合、Profound のドメインを許可するまでピクセルはブロックされます。

    ポリシーに次のディレクティブを追加します。

    * [`script-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) `https://pixel.profound.click` は、ブラウザーがピクセルスクリプトを読み込むことを許可します。
    * [`connect-src`](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/connect-src) `https://events.profound.click` は、ピクセルがイベントを送信することを許可します。

    [ステップ 2](#step-2) のインラインスニペットにも、サイトの他のインラインスクリプトを許可するのと同じ方法で、`<script>` ブロックに [nonce またはハッシュ](https://developer.mozilla.org/en-US/docs/Web/HTTP/Reference/Headers/Content-Security-Policy/script-src) を付与する必要があります。
  </Step>

  <Step id="step-5" title="コンバージョンをトラッキングする">
    [ステップ 2](#step-2) のスニペットはページビューを自動的に記録しますが、訪問者が顧客になったタイミングを知ることはできません。サイトは `pfq` 関数を呼び出してそれを報告します。この関数は、スニペットを含むすべてのページで利用できます。

    <Tabs>
      <Tab title="手動インストール">
        コンバージョンが完了した時点で、サイト独自のコードに `pfq('track', …)` の呼び出しを追加します。注文確認ページ、フォームの送信ハンドラーなど、コンバージョンが確定する場所に追加してください。コンバージョンに対応する標準の [イベント名](/ja-jp/pixel/events#standard-events) を使用し、手元にある詳細情報を渡します。例:

        ```javascript theme={null}
          pfq('track', 'items_added',   { amount: 4900,  currency: 'USD', product_id: 'SKU123' });
          pfq('track', 'order_created', { amount: 12999, currency: 'USD', order_id: 'A-1001' });
          pfq('track', 'lead_created',  { form: 'contact-sales' });
        ```
      </Tab>

      <Tab title="Google Tag Manager">
        コンバージョンの種類ごとに [カスタム HTML タグ](https://support.google.com/tagmanager/answer/6107167#custom-html-tag) をもう 1 つ作成し、サイト上でそのコンバージョンを示すトリガーで発火させます。[ステップ 2](#step-2) のインストールスニペットのタグが実行されなかった場合にタグが何もしないよう、各呼び出しの前に `window.pfq &&` を付けます。例:

        ```html theme={null}
          <script>
            window.pfq && pfq('track', 'order_created', {
              order_id: {{DLV - transaction_id}},
              amount: Math.round(Number({{DLV - value}}) * 100),
              currency: {{DLV - currency}},
            });
          </script>
        ```

        **注意事項**:

        * 上記の `{{DLV - …}}` 変数名は例にすぎません。Google Tag Manager コンテナで定義されている変数名を使用してください。詳しくは [データレイヤー変数のドキュメント](https://support.google.com/tagmanager/answer/7683362) を参照してください。
        * コード例の `* 100` の乗数は、USD や EUR など小数点以下 2 桁の通貨にのみ適しています。その他の通貨では、通貨の小数桁数に合わせて乗数を調整してください。
      </Tab>
    </Tabs>

    <Tip>
      イベントとそのフィールドの詳細については、[イベントリファレンス](/ja-jp/pixel/events) を参照してください。
    </Tip>
  </Step>

  <Step id="step-6" title="動作を確認する">
    自分のサイトでテストコンバージョン(テスト購入など)を完了します。ブラウザーのネットワークタブで `events.profound.click` でフィルターします。

    テストコンバージョンによって生成されたイベントリクエストを見つけ、次の点を確認します。

    1. `202` ステータスのレスポンスを返す `POST` リクエストであること。
    2. ペイロード本文の `amount` フィールドが補助単位(その通貨の最小単位)の整数であること。たとえば、129.99 米ドルは `12999` と表示されるはずです。異なる単位で表示されている場合は、[ステップ 5](#step-5) で追加したトラッキングコードに戻り、送信する単位を修正してください。
    3. サイトに欧州/英国からのトラフィックがある場合は、欧州の訪問者としてコンバージョンをテストします。同意バナーを承認するまで、ピクセルはリクエストを送信せず、Cookie も書き込まないはずです。承認後は、`events.profound.click` へのリクエストがネットワークタブに表示され、ピクセルの Cookie がブラウザーの Cookie ストレージに表示されるはずです。

           <Tip>
             VPN を使用するか、ブラウザーの DevTools で EU 内の位置情報オーバーライドを設定することで、欧州からのサイト訪問をシミュレートできます。
           </Tip>
  </Step>
</Steps>

これらの手順が完了すると、ピクセルの設定が完了し、利用できる状態になります。設定中に問題が発生した場合は、よくある問題について [トラブルシューティング](/ja-jp/pixel/troubleshooting) を参照するか、[サポートにお問い合わせください](mailto:support@tryprofound.com)。
