---
title: フロントエンド統合
slug: xUsQupJZjyICXTdsSFOr7
createdAt: 2025-07-30T21:22:24.108Z
---

## Forter JavaScript スニペット

本番環境とサンドボックス環境の両方の完全なJSスニペットは、
[こちら](https://portal.forter.com/app/integration/js-snippets)にあります。

スクリプトまたはピクセルを統合する環境に応じて、正しいスクリプト（サンドボックス対本番）を使用してください。

## Shopify ピクセル統合（チェックアウト拡張性）

すべてのShopifyマーチャントは、Shopifyカスタムピクセルを作成および有効にするための以下の指示に従い、ForterスニペットをそれぞれのShopifyチェックアウトコンポーネントのネイティブHTMLに貼り付ける必要があります。Shopifyのカスタムピクセルフレームワークに関する詳細情報は、[こちら](https://help.shopify.com/en/manual/promoting-marketing/pixels/custom-pixels)で見つけることができます。

### ステップ 1: スニペットをShopifyテーマに貼り付ける

1. このパスに移動します: `https://admin.shopify.com/store/<your-sandbox-shop.com>/themes` そして、次に `theme.liquid` オプションを選択します。「**編集**」ボタンを右側にクリックして、HTMLコードにアクセスします。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-lby9CMK6q4hFUwGq_3JSm-20250723-221025.png)

2\. Forter JavaScriptスニペットをエディタにコピー＆ペーストします。スクリプトを追加しているShopify環境に対応するsiteIdを持つスニペットを使用していることを確認してください（つまり、「本番ストア用の本番スニペット」または「サンドボックスストア用のサンドボックススニペット」）。

3\. 変更を保存するには、「**保存**」を押します。

### ステップ 2: 管理者にログインする

Shopify管理画面にログインし、**設定** > **顧客イベント**に移動し、**カスタムピクセルを追加**オプションをクリックします。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-IQuMWupROCm_e-jQn7y_m-20250723-221135.png)

### ステップ3: ピクセルに名前を付ける

スニペットに名前を付けます。既に存在するカスタムピクセルの名前を入力すると、異なる名前を付けるように促されます。Forterは「Forterスニペット」を推奨します。

### ステップ4: テンプレートとForterサイトIDを貼り付ける

- 「ピクセルを追加」をクリックしてイベントエディタを開きます。
- コードウィンドウに移動し、以下のテンプレートを貼り付けて使用します。

```javascript
window.__api = api;
const script = document.createElement('script');
script.setAttribute('type', 'text/javascript');
script.setAttribute('id', '%SITE_ID%'); // where siteId is the siteId from your Forter portal (select sandbox or prod siteId according to the environment you're adding your pixel)
script.text = `%SNIPPET_CONTENT_FROM_PORTAL%`; // your Forter js snippet (select the sandbox or prod snippet depending on the env you're adding your pixel)
document.head.appendChild(script);
```

テンプレートの`'%SITE_ID%`フィールドを、[Forterポータル設定ページ](https://portal.forter.com/app/integration/credentials/)にあるsiteID値に更新します。正しいsiteId（本番環境とsandbox）を使用していることを確認するために、適切なポータル環境に切り替えてください。

### ステップ5: ForterのJavaScriptスニペットを貼り付ける

上記のテンプレートを貼り付けたら、[JavaScript統合ページ](https://portal.forter.com/app/integration/js-snippets)に移動します。追加する予定のスクリプト（sandboxまたはproduction）を表示して、貼り付ける準備をします。

:::BlockQuote
JSスニペットのコードバージョンは*18*以上を使用していることを確認してください。
:::

- スニペット全体を貼り付けることを確認してください (`%SNIPPET_CONTENT_FROM_PORTAL%`) 正しい環境（本番またはサンドボックス）からForterポータルを使用して、スニペットの開くと閉じる `<script>` タグを除外してください。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-23NkRDUpVCGS5f0Yj4o7m-20250723-221215.png)

### ステップ6: 権限を選択

あなたのShopifyピクセルの **顧客のプライバシー** セクションで、次の項目を選択します:

- `必要なし` 権限のため。
- 収集されたデータはデータ販売には該当しません。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-zf23PWHKGroZr2BuYDz28-20250723-221329.png)

これにより、顧客がマーケティングや広告ターゲティングをオプトアウトしても、Forterのピクセルが読み込まれるようになります。

:::BlockQuote
注意 - ForterのJSスクリプトとそれに付随するピクセルは、「厳密に必要」と「機能的」のカテゴリーに該当します。なぜなら、このスクリプトはあなたのウェブサイトでの詐欺や悪用を防ぐためだけに機能しているため、GDPRおよびCCPAに準拠しながら読み込むことができます。Forterのデータセキュリティとプライバシーに関する詳細については、私たちの [セキュリティハブ](https://www.forter.com/privacy-security-hub/) をご覧ください。
:::

### ステップ7: 保存してアクティブ化

「**保存**」をクリックしてカスタムピクセルを保存し、「ピクセルを接続」をクリックしてイベントの追跡を開始します。

:::BlockQuote
注意 - ピクセルが追跡するためにShopifyのイベントを選択する必要はありません。ForterのJSは、Shopifyの利用規約に準拠しながら、必要なデータを収集し、意思決定の正確性を保ちながら必要なイベントをプログラム的に取得できます。
:::

### ステップ8: アクティベーションの確認

ストアのテーマセクションに移動し [テーマ](https://admin.shopify.com/store/) を確認し、"アプリ埋め込み"セクションでForterピクセルが有効になっていることを確認したら、"保存"ボタンをクリックします。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-elqWpXFAwTaz38Cbuxoui-20250723-221413.png)

## JS統合のテスト

ForterのJavaScript統合が注文に関する関連するサイバーおよび行動データを収集していることを確認するために、以下の手順を実行できます。

1. ForterチームがJSスクリプトをアクティブにしていることを確認してください - これはcdnがアクティブになっており、スクリプトが動的にトークンをレンダリングし、関連するフロントエンドイベントを追跡できることを意味します。
2. あなたのウェブサイトを訪問します `<your-site>.myshopify.com` として顧客のように注文を行います。製品を検索し、製品のサイズを選択し、製品をカートに入れるなど、通常の顧客行動を行います。その後、チェックアウトに進みます。
   - クレジットカードまたはShopPay（保存されたクレジットカード）支払い方法を使用します。特定の決定を強制したい場合は、任意のメールアドレスまたはForterのテストメールの1つ（例えば、`approve@forter.com` または `decline@forter.com`）をサンドボックス環境で使用できます。
3. 注文を行ったら、Forterポータルにログインし、 [取引タブ](https://portal.forter.com/app/dashboard/transactions) に移動し、メールまたは注文IDでテスト取引を検索します。

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-yFcnp2m3PdE7sy7Kw36pI-20250723-221508.png)

4\. 取引を見つけたら、**Cyber Intelligence** と **Behavioral** の詳細注文ビューのセクションを確認してください。そこには、スクリプトと注文のリクエストヘッダーが収集した内容のハイライトが表示されるはずです。

:::BlockQuote
**注意** すべてのサイバーおよび行動イベントがForterポータルに表示されるわけではありませんが、これらのセクションが populated されていることは、スクリプトがあなたのウェブサイトで機能していることを示します。
:::

![](https://api.archbee.com/api/optimize/dYhsqkppjaUNAqFmds_Ny-kboeyOOmQLdF8gh5pApkY-20250723-221753.png)

5\. Forterチームに確認してください - Forterチームにこの作業を完了したことを知らせて、設定を検証できるようにしてください。