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

# カスタムメール購読解除ページの作成

> コンプライアンスとトラッキングを維持しながら、OneSignalのデフォルトの購読解除リンクをブランド化された多言語でパーソナライズされたメール設定ページに置き換える方法を学びます。

## 概要

OneSignalは、ユーザーが簡単に購読解除でき、[サブスクリプションステータス](./subscriptions)がリアルタイムで更新されるように、メールテンプレートにリンクを挿入する[デフォルトのメール準拠購読解除エクスペリエンス](./unsubscribe-links-email-subscriptions)を提供します。ブランディング、コピー、フィールド（カテゴリオプトアウトなど）を完全に制御したい場合は、デフォルトのリンクを独自のカスタムページに置き換え、OneSignal APIを使用してユーザー設定を購読解除または更新できます。

このガイドでは、メールに独自のカスタム購読解除ページを追加する方法（デフォルトのOneSignalリンクを削除）と、ユーザーのメールサブスクリプションを購読解除するために使用するAPIについて説明します。

カスタム購読解除ページにさらに機能を追加したい場合（すべてではなく特定のメールカテゴリからオプトアウトするなど）、これは[Preference Center](./preference-center)チュートリアルで詳しく説明されています。

***

## OneSignalのデフォルト購読解除リンクを削除

OneSignalは、`[unsubscribe_url]`形式の特別なリンクをメールテンプレートに自動的に挿入します。このURLは、OneSignalのすべてのメールからユーザーを購読解除します。詳細については、[Email Unsubscribe Links](./unsubscribe-links-email-subscriptions)を参照してください。

独自のページを使用するには、テンプレート内の**デフォルトのリンクを見つけて削除**します。

<Tabs>
  <Tab title="ドラッグアンドドロップエディター">
    ドラッグアンドドロップエディターでは、デフォルトのリンクが次のようにネストされて表示される場合があります：

    <Frame caption="ドラッグアンドドロップエディターの購読解除リンク">
      <img src="https://mintcdn.com/onesignal/0qspEXXeJ8zJbkJ-/images/docs/82cc033-Default_Unsubscribe.png?fit=max&auto=format&n=0qspEXXeJ8zJbkJ-&q=85&s=3c507499bbc29854761df1136f8c0ff4" alt="ドラッグアンドドロップエディターの購読解除リンク" width="1598" height="1203" data-path="images/docs/82cc033-Default_Unsubscribe.png" />
    </Frame>
  </Tab>

  <Tab title="HTMLエディター">
    ```html theme={null}
    <a href="[unsubscribe_url]">Unsubscribe</a>
    ```
  </Tab>
</Tabs>

***

## カスタム購読解除リンクを追加

特別なリンクを削除したので、独自のURLに置き換えることができます。

多くの場合、これらのリンクはページに渡すための追加データが必要です。[Liquid変数](./message-personalization)を使用してOneSignalデータをページに渡します。

一般的なパラメータ：

| パラメータ                            | 説明                |
| -------------------------------- | ----------------- |
| `subscription.email`             | サブスクライバーのメールアドレス  |
| `subscription.external_id`       | ユーザーの外部ID         |
| `app.id`                         | OneSignal App ID  |
| `message.id`                     | メール通知のID          |
| `subscription.language`          | 優先言語（ローカリゼーション用）  |
| `subscription.unsubscribe_token` | API検証用のセキュリティトークン |

**URLの例：**

```liquid theme={null}
https://examplesite.com/unsubscribe?app_id={{app.id}}&notification_id={{message.id}}&email={{subscription.email}}&language={{subscription.language}}&token={{subscription.unsubscribe_token}}
```

```html HTML theme={null}
  <div style="text-align: center;">
    <a
      href="https://examplesite.com/unsubscribe?app_id={{app.id}}&notification_id={{message.id}}&email={{subscription.email}}&language={{subscription.language}}&token={{subscription.unsubscribe_token}}"
      data-disable-tracking="true"
      style="display: inline; text-decoration: none;"
    >
      Unsubscribe
    </a>
    <p style="display: inline;"> from our emails</p>
  </div>
```

<Frame caption="カスタム購読解除リンクを追加">
  <img src="https://mintcdn.com/onesignal/6v_cVPknFpo5qSVB/images/docs/0c94ab0-HTML_unsubscribe_custom.png?fit=max&auto=format&n=6v_cVPknFpo5qSVB&q=85&s=e931f0e8649ea80d29194e0db2722942" alt="カスタム購読解除リンクを追加" width="1606" height="1175" data-path="images/docs/0c94ab0-HTML_unsubscribe_custom.png" />
</Frame>

### クリックトラッキングを無効にする

購読解除のクリックは通常、エンゲージメント指標には使用されません。リンクトラッキングを無効にしたい場合は、次のようにリンクに`data-disable-tracking="true"`属性を追加できます：

```html HTML theme={null}
  <a
    href="https://www.examplesite.com/unsubscribe?app_id={{app.id}}&notification_id={{message.id}}&email={{subscription.email}}&language={{subscription.language}}&token={{subscription.unsubscribe_token}}"
    data-disable-tracking="true"
  >
    Unsubscribe
  </a>
```

**プロバイダー固有の属性：**

| プロバイダー    | 属性                             |
| --------- | ------------------------------ |
| OneSignal | `data-disable-tracking="true"` |
| Mailgun   | `disable-tracking=true`        |
| SendGrid  | `clicktracking=off`            |
| Mandrill  | `mc:disable-tracking`          |

***

## カスタム購読解除ページのホスティング

次の機能を持つWebページをデプロイします：

* 購読解除リンクからクエリパラメータを読み取ります。
* ユーザーフレンドリーなオプトアウトまたは設定オプションを表示します。
* APIを介してOneSignalに購読解除または更新リクエストを送信します。

<Info> フォークしてデプロイできる実用的な[GitHubサンプルプロジェクト](https://github.com/OneSignalDevelopers/custom-email-unsubscribe-page-sample)を提供しています。 </Info>

<Frame caption="サンプル購読解除ページUI">
  <img src="https://mintcdn.com/onesignal/jBdBk5XvQR5eKOks/images/docs/75a39d1-Github_page.png?fit=max&auto=format&n=jBdBk5XvQR5eKOks&q=85&s=4d1b004b41a3ad4bd3e7c4f76da7e9fc" alt="サンプル購読解除ページ" width="1448" height="1438" data-path="images/docs/75a39d1-Github_page.png" />
</Frame>

***

## OneSignal APIの呼び出し

ユースケースに応じて、以下のAPIを使用してユーザー設定を購読解除または更新できます：

* [Update Subscription by Token](/reference/update-subscription-by-token)
* [Unsubscribe Email with Token](/reference/unsubscribe-with-token)
* [Update User](/reference/update-user)

<Tabs>
  <Tab title="Update Subscription by Token">
    このAPIは、ユーザーのメールアドレスがあり、すべてのメールから購読または購読解除したい場合に最も一般的に使用されます。

    **必須クエリパラメータ：**

    * `app_id`
    * `token`

    **認証が必要**

    * このAPIはサーバーから呼び出してください。
  </Tab>

  <Tab title="Unsubscribe Email with Token">
    特定のメールが購読解除を引き起こしたかを追跡したい場合は、このAPIを使用します。これは、購読解除を追跡するためにメールメッセージIDを使用します。詳細については、[Unsubscribe Email with Token](/reference/unsubscribe-with-token) APIを参照してください。

    **必須クエリパラメータ：**

    * `app_id`
    * `notification_id`
    * `token`

    **オプションのパラメータ：**

    * `email`
    * `language`

    **JavaScriptの例：**

    ```javascript JavaScript theme={null}
    const unsubscribeURL = (href) => {
      const unsubscribeURL = new URL(href)
      const appID = unsubscribeURL.searchParams.get("app_id")
      const notificationID = unsubscribeURL.searchParams.get("notification_id")
      const unsubscribeToken = unsubscribeURL.searchParams.get("token")
      const language = unsubscribeURL.searchParams.get("language")
      const email = unsubscribeURL.searchParams.get("email")
      return {
        unsubscribeURL: `https://api.onesignal.com/apps/${appID}/notifications/${notificationID}/unsubscribe?token=${unsubscribeToken}`,
        meta: { language, email },
      }
    }
    ```
  </Tab>

  <Tab title="Update User">
    [Update User](/reference/update-user) APIを使用してユーザーの設定を更新します。

    **必須クエリパラメータ：**

    * `app_id`
    * `alias_id` - ユーザーの外部IDを推奨します。

    **認証が必要**

    * このAPIはサーバーから呼び出してください。
  </Tab>
</Tabs>

***

<Check>
  これで、カスタム購読解除ページの作成について知っておく必要があるすべてが揃いました。
</Check>

***