> For the complete documentation index, see [llms.txt](https://help.impact.com/llms.txt). Markdown versions of documentation pages are available by appending `.md` to page URLs; this page is available as [Markdown](https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.md).

# カスタムウィジェットを作成する

パートナーがあなたのブランドを促進できるような動的ツールを開発しましょう。カスタムウィジェットを使うと、外部でホストされたツールやページを iframe 経由で impact.com のインターフェースに直接埋め込めます。このガイドを使って、パートナーにパーソナライズされたリソースと一貫したブランド体験を提供するカスタムコンテンツウィジェットを作成・設定してください。

{% stepper %}
{% step %}

## カスタムウィジェット作成画面にアクセスする

1. 左側のナビゲーションメニューから、次を選択します ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-230534471fef5f40808e921e41ee44e4a06ded03%2Fe6cb9548999afdc1ed3ce4942e4cb5b45b5cecbd323267aac2a7cd1915fccc09.svg?alt=media) **\[エンゲージ]** → **コンテンツ** → [**ウィジェット**](https://app.impact.com/secure/advertiser/engage/ads/list-widget-tool-flow.ihtml)**.**
2. 右上隅で、次を選択します **ウィジェットを作成** → **カスタム**.
   {% endstep %}

{% step %}

## ウィジェットの詳細を入力

1. リソースの **名前** カスタムウィジェットの
2. 必要に応じて、 **説明** カスタムウィジェット用の
3. 必要に応じて、 **ラベル** カスタムウィジェット用の
4. 必要に応じて、 ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2FiZjM1xY8o3v1iR3Zaysd%2FToggle.svg?alt=media\&token=b1550d48-bba9-4e81-8604-bc12370c5caa) **\[オンに切り替え] パートナーアクセスを制限** ウィジェットにアクセスできる個々のパートナーとグループを指定します。
   * **パートナー：** カスタムウィジェットにアクセスできるパートナー名を入力します。
   * **グループ：** カスタムウィジェットにアクセスできるグループ名を入力します。
     {% endstep %}

{% step %}

## ウィジェットを設定

1. 表示オプションからウィジェットの動作を選択します：
   * **新しいタブで開く：** ホストされた URL を別のタブで開きます。
   * **impact.com に埋め込む：** プラットフォームのインターフェース内にウィジェットを直接表示します。
2. 必要に応じて、 **プレビュー画像** セクションで、 **ファイルを選択** からサムネイルをアップロードします。ファイルは GIF、JPG、または PNG で、512 KB を超えないようにしてください。
3. で、 **ウィジェット URL** 欄に、ウィジェットがホストされている Web アドレスを入力します。
4. 次の ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[ドロップダウンメニュー]**、サイトのセキュリティに合ったプロトコル（例：https\://）を選択します。
5. 必要に応じて、次を選択します： ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-6282f271b7521383385339243690b303086736d9%2F3b5a585dd2895bdf1c30d1236c72ba590dddd18717863b27074c8d313d05ae20.svg?alt=media) **\[追加] 動的フィールドを挿入** してトークン一覧を展開します。
6. 使用したいトークンを見つけて **挿入**を選択します。プラットフォームが自動的にトークン（例：{irpid}）を **ウィジェット URL**に追加します。 [動的フィールドトークン](#dynamic-field-tokens) 以下のセクションで各トークンの説明を確認してください。
   {% endstep %}

{% step %}

## 詳細設定を更新

次の **言語** ![](https://1458456015-files.gitbook.io/~/files/v0/b/gitbook-x-prod.appspot.com/o/spaces%2FwMLlMoFBtKJa8ptd3zaw%2Fuploads%2Fgit-blob-c2cb550b55c51ea1eeff0acbd6f437a03b621a2c%2F60d033ae8a04c14498d5229c3c0160ac05feea7f605dbd770741793c900469f0.svg?alt=media)**\[ドロップダウンメニュー]**を選択して、このウィジェットの表示言語を指定します。
{% endstep %}

{% step %}

## カスタムウィジェットを完成させる

選択 **作成** してウィジェットを保存します。パートナーはこのウィジェットを *コンテンツウィジェット*.
{% endstep %}
{% endstepper %}

<details>

<summary>動的フィールドトークン</summary>

| トークン                           | 説明                                   |
| ------------------------------ | ------------------------------------ |
| `{click_url_encoded}`          | エンコードされたクリックURL                      |
| `{click_url}`                  | エンコードされていないクリックURL                   |
| `{irimpurl}`                   | 当社のインプレッションURL                       |
| `{irpid}`                      | パートナーID                              |
| `{subid1}`                     | パートナーサブID 1                          |
| `{subid2}`                     | パートナーサブID 2                          |
| `{subid3}`                     | パートナーサブID 3                          |
| `{sharedId}`                   | 共有ID                                 |
| `{iradid}`                     | 広告ID                                 |
| `{ircid}`                      | プログラム ID                             |
| `{click_url_encoded_deeplink}` | 末尾にディープリンクパラメータを追加したエンコード済みのクリックURL。 |

</details>

## 実例

{% hint style="info" %}
**これらの例について：** カスタムウィジェットはあなたが構築・ホストします — impact.com はホストされたページを埋め込み、そこにライブのパートナーデータを注入するだけです。以下の参照実装をコピーし、自社ドメインでホストして、適応させてください。パートナーはコードを一切編集せず、完成したウィジェットを *コンテンツウィジェット*.
{% endhint %}

### 動的フィールドトークンがウィジェットに届く仕組み

動的フィールドトークンを **ウィジェット URL**に追加すると、impact.com はページを読み込む前に各パートナーの実際の値に置き換えます。ページはクエリ文字列からそれらの値を読み取り、追跡可能なリンクの作成に使用します。

たとえば、 **ウィジェット URL** を `https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}`を設定すると、impact.com は ID が次のパートナーに対して以下を読み込みます： `123456`:

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/search?partner=123456&clickurl=https%3A%2F%2Facme.sjv.io%2Fc%2F123456%2F789012%2F3456
```

{% endcode %}

{% hint style="warning" %}
クリックURLは `{click_url_encoded}`として渡し、 `{click_url}` としてではなく `?` および `&` — 未加工のクリックURLには独自の
{% endhint %}

### 文字が含まれており、クエリ文字列が壊れてしまうためです。使用する前にページ側でデコードしてください。

パートナーが impact.com から離れずにあなたのカタログを検索し、任意の商品を追跡可能なリンクとしてコピーできるようにします。検索ページはあなたがホストし、impact.com はパートナーの ID とクリックURLを渡すため、各結果リンクはそのパートナーに帰属します。

1. HTTPS 経由で、自分が管理するドメインに検索ページをホストします（例： `https://widgets.yourbrand.com/search`）。デモ用の `CATALOG` 配列を、独自の商品カタログまたは検索 API の呼び出しに置き換えてください。
2. 上記の 5 つの手順を使ってカスタムウィジェットを作成します。 **ウィジェットを設定**で、 **ウィジェット URL** を `{irpid}` および `{click_url_encoded}` トークン（下記参照）が付いたページに設定します。
3. でテストし、 **新しいタブで開く**でテストパートナーとして検索を実行し、結果リンクがあなたのサイトに解決されてクリックが記録されることを確認します。その後、ウィジェットを **impact.com に埋め込む**.

**ウィジェット URL**

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/search?partner={irpid}&clickurl={click_url_encoded}
```

{% endcode %}

<details>

<summary>search-widget.html</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>商品検索</title>
  <style>
    body { font-family: Arial, sans-serif; margin: 0; padding: 16px; }
    .search-bar { display: flex; gap: 8px; margin-bottom: 16px; }
    .search-bar input { flex: 1; padding: 10px; font-size: 16px; }
    .search-bar button { padding: 10px 16px; font-size: 16px; cursor: pointer; }
    .result { padding: 12px; border: 1px solid #ddd; border-radius: 6px; margin-bottom: 8px; }
    .result a { text-decoration: none; font-weight: bold; }
    .copy { margin-left: 8px; font-size: 13px; color: #2b6cb0; cursor: pointer; }
  </style>
</head>
<body>
  <div class="search-bar">
    <input id="q" type="text" placeholder="商品を検索..." />
    <button id="go">検索</button>
  </div>
  <div id="results"></div>

  <script>
    // 1. Widget URL に impact.com が注入した値を読み取ります。
    var params    = new URLSearchParams(window.location.search);
    var partnerId = params.get('partner') || '';
    var clickUrl  = decodeURIComponent(params.get('clickurl') || '');

    // 2. このデモ配列を独自の商品カタログ / 検索 API の呼び出しに置き換えてください。
    var CATALOG = [
      { name: 'Trail Runner Shoe',   url: 'https://www.yourbrand.com/products/trail-runner' },
      { name: 'Waterproof Jacket',   url: 'https://www.yourbrand.com/products/waterproof-jacket' },
      { name: 'Merino Hiking Socks', url: 'https://www.yourbrand.com/products/merino-socks' }
    ];

    // 3. 追跡可能なディープリンクを作成します：パートナーのクリックURL + 遷移先ページ。
    //    公開する前に、プログラムの正確なディープリンク形式を確認してください（「公開前に」を参照）。
    function buildTrackingLink(destinationUrl) {
      if (!clickUrl) return destinationUrl;            // フォールバック: トークンがない場合は追跡なし
      return clickUrl + encodeURIComponent(destinationUrl);
    }

    function search() {
      var term = document.getElementById('q').value.toLowerCase();
      var matches = CATALOG.filter(function (p) {
        return p.name.toLowerCase().indexOf(term) !== -1;
      });
      var container = document.getElementById('results');
      container.innerHTML = matches.length ? '' : '<p>商品が見つかりませんでした。</p>';
      matches.forEach(function (p) {
        var link = buildTrackingLink(p.url);
        var row = document.createElement('div');
        row.className = 'result';
        row.innerHTML =
          '<a href="' + link + '" target="_blank" rel="noopener">' + p.name + '</a>' +
          '<span class="copy" data-link="' + link + '">リンクをコピー</span>';
        container.appendChild(row);
      });
    }

    document.getElementById('go').addEventListener('click', search);
    document.getElementById('q').addEventListener('keyup', function (e) {
      if (e.key === 'Enter') search();
    });
    document.addEventListener('click', function (e) {
      if (e.target.classList.contains('copy')) {
        navigator.clipboard.writeText(e.target.getAttribute('data-link'));
      }
    });
  </script>
</body>
</html>
```

</details>

### 例 2：動的リッチメディア広告（フローティングチャットウィジェット）

動的リッチメディア広告とは、ホストしてウィジェットとして埋め込むインタラクティブな HTML アセットのことです。この例では、プロモーションメッセージと行動喚起に展開するフローティングのチャットバブルを作成します。訪問者がボタンを選択すると、パートナーのクリックURL経由でリダイレクトされるため、クリックは追跡され、帰属されます。

1. HTTPS 経由で、自分が管理するドメインにページをホストします（例： `https://widgets.yourbrand.com/chat`）。コピー、色、行動喚起をキャンペーンに合わせてカスタマイズしてください。
2. 上記の 5 つの手順を使ってカスタムウィジェットを作成し、 **ウィジェット URL** を `{click_url_encoded}` トークン（下記参照）付きで設定します。
3. でテストし、 **新しいタブで開く** をテストパートナーとして使い、行動喚起がサイトを開いてクリックを記録することを確認したら、ウィジェットを **impact.com に埋め込む**.

**ウィジェット URL**

{% code overflow="wrap" %}

```
https://widgets.yourbrand.com/chat?clickurl={click_url_encoded}
```

{% endcode %}

既定のランディングページではなく特定のページへ訪問者を送るには、 `{click_url_encoded_deeplink}` トークンを `{click_url_encoded}`の代わりに使用するか、例 1 に示すように独自コードで遷移先を追加します。

<details>

<summary>chat-widget.html</summary>

```html
<!DOCTYPE html>
<html lang="en">
<head>
  <meta charset="UTF-8" />
  <meta name="viewport" content="width=device-width, initial-scale=1" />
  <title>アシスタント</title>
  <style>
    html, body { margin: 0; height: 100%; background: transparent; font-family: Arial, sans-serif; }
    #bubble {
      position: fixed; bottom: 20px; right: 20px;
      width: 60px; height: 60px; border-radius: 50%;
      background: #2b6cb0; color: #fff; font-size: 26px;
      display: flex; align-items: center; justify-content: center;
      cursor: pointer; box-shadow: 0 4px 12px rgba(0,0,0,.25);
    }
    #panel {
      position: fixed; bottom: 90px; right: 20px; width: 260px;
      background: #fff; border-radius: 10px; box-shadow: 0 6px 24px rgba(0,0,0,.2);
      padding: 16px; display: none;
    }
    #panel.open { display: block; }
    #panel p { margin: 0 0 12px; font-size: 14px; color: #333; }
    #cta {
      display: block; width: 100%; padding: 10px; border: none; border-radius: 6px;
      background: #2b6cb0; color: #fff; font-size: 15px; cursor: pointer;
    }
  </style>
</head>
<body>
  <div id="bubble">&#128172;</div>
  <div id="panel">
    <p>こんにちは！最新のお得情報をお探しですか？ 下のボタンをタップして、お買い物して節約しましょう。</p>
    <button id="cta">今すぐ購入</button>
  </div>

  <script>
    // impact.com がこのページにパートナーのクリックURLを注入します。
    var params   = new URLSearchParams(window.location.search);
    var clickUrl = decodeURIComponent(params.get('clickurl') || '');

    var bubble = document.getElementById('bubble');
    var panel  = document.getElementById('panel');
    bubble.addEventListener('click', function () {
      panel.classList.toggle('open');
    });

    document.getElementById('cta').addEventListener('click', function () {
      if (!clickUrl) return;
      // クリックが追跡され、パートナーに帰属するように新しいタブで開きます。
      window.open(clickUrl, '_blank', 'noopener');
    });
  </script>
</body>
</html>
```

</details>

## 公開する前に

* 自分で HTTPS 経由でホストしてください。impact.com は iframe 経由であなたのページを埋め込むか、新しいタブで開くだけで、コードのホスティングはしません。埋め込みモードではページは iframe 内で実行されるため、遷移先リンクは `target="_blank"` または `window.open(...)` を使って開き、親ウィンドウを移動させないでください。
* クリックURLをエンコードしてください。 `{click_url_encoded}` として渡し、ページ側でデコードして `?` および `&` 文字がクエリ文字列を壊さないようにします。
* impact.com の Integration Engineer とディープリンク形式を確認し、ディープリンクの許可済みドメインに遷移先が含まれていることを確認してください。

## 追加リソース

* [パートナーと追跡リンクを作成・共有する](/brand/ja/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-and-share-tracking-links-with-partners.md) — 追跡リンクを作成し、パートナーと共有する方法。
* [追跡リンクのパラメータを解説](/brand/ja/what-would-you-like-to-learn-about/platform-features/tracking/tracking-explained/tracking-link-parameters-explained.md) — サブID、共有ID、ディープリンクなど、追跡リンクの構造と追加できるパラメータ。
* [ディープリンク用の許可済みドメインを設定する](/brand/ja/what-would-you-like-to-learn-about/account-administration/program-settings/tracking-settings/set-up-permitted-domains-for-deep-linking.md) — パートナーがあなたのサイトでディープリンクできる遷移先ドメインを許可します。
* [アセットタイプの概要](/brand/ja/what-would-you-like-to-learn-about/platform-features/ads/create-ads/introduction-to-asset-types.md) — カスタムウィジェットの位置づけを含む、パートナーに提供できるアセットタイプ。
* [Rakuten Advertising から impact.com へ：主要な移行ステップ](/brand/ja/what-would-you-like-to-learn-about/getting-started/rakuten-advertising-to-impact.com-key-transition-steps.md) — プログラムを Rakuten Advertising から impact.com に移行すると何が変わるか。


---

# Agent Instructions
This documentation is published with GitBook. GitBook is the documentation platform designed so that both humans and AI agents can read, navigate, and reason over technical content effectively. Learn more at gitbook.com.

## Querying This Documentation
If you need additional information that is not directly available in this page, you can query the documentation by asking a question.

Perform an HTTP GET request on the following URL with the `ask` and `goal` query parameters:

```
GET https://help.impact.com/brand/ja/what-would-you-like-to-learn-about/platform-features/reach-out-to-partners/generate-leads/create-a-custom-widget.md?ask=<question>&goal=<user_goal>
```

`ask` is the immediate question: it should be specific, self-contained, and written in natural language.
`goal` is what the user is ultimately trying to achieve, the reason they need the answer. Sharing it helps GitBook give you a better, more relevant answer. A goal is most helpful when it describes the outcome the user wants rather than restating the question. For example, with `ask=how do I create an API token`, a goal like `automate deployments from our CI pipeline` lets GitBook tailor the answer to that use case.

The response will contain a direct answer to the question and relevant excerpts and sources from the documentation.

Use this mechanism when the answer is not explicitly present in the current page, you need clarification or additional context, or you want to retrieve related documentation sections.