⚠️ 重要なお知らせ

この記事で紹介している機能は「Webflow Users」および「Webflow Logic」は近日中に提供終了されます。

詳しくは以下をご確認ください：

• ユーザーアカウント（会員機能）の提供終了について
• Logicの提供終了について

MailchimpのAPIキーの作成方法

1. Mailchimpダッシュボードに移動します。
2. プロフィールアイコンをクリックして、 Account & billing をクリックします。
3. Extras > API keys に移動します。
4. Create a key をクリックします。
5. 新しいAPIキーをコピーし、このタブを開いたままにしておきます！

Logicフローの認証の設定方法

1. 新しいタブでWebflow Designerでサイトを開きます。
2. デザイナーキャンバスでフォームブロックを選択し、Form block settingsを開きます。
3. Sourceのドロップダウンをクリックし、Logicを選択します。
4. Add new flowをクリックします。
5. Nameフィールドに新しいフローの名前を入力します（例：「Mailchimpニュースレターへの購読者追加」）、説明フィールドに任意で説明を追加します。
6. Make HTTPリクエストブロックをフローエディターキャンバスにドラッグし、名前を付けます（例：「Mailchimpへのリクエスト送信」）。
7. AuthenticationのドロップダウンからAPIトークンを選択します。
8. Add toのドロップダウンからHeaderを選択します。
9. Headerフィールドに「Authorization」と入力します。
10. Select a credential > Add new credentialをクリックします。
11. NameフィールドにAPIトークンの名前を入力します（例：「Mailchimp APIトークン」）、任意で Description フィールドに説明を追加します。
12. Tokenフィールドに「Bearer {APIキー}」を入力します。ここで**{APIキー}**はMailchimpからコピーしたAPIキーに置き換えます。
13. Createをクリックして新しい認証情報を保存し、このタブを開いたままにしておきます！

プロのヒント: フォームを新しいLogicフローに接続するには、Logicパネル > Flowsタブからも行えます。Logicでフォームの送信トリガーについて詳しく学ぶ。

MailchimpオーディエンスIDの取得方法

1. Mailchimpダッシュボードに戻ります。
2. Audience > All contactsに移動します。
3. 複数のMailchimpオーディエンスを持っている場合、Current audienceのドロップダウンをクリックし、Webflowサイトに接続したいオーディエンスを選択します。
4. Settingsのドロップダウンをクリックし、Audience name and defaultsを選択します。
5. Audience IDをコピーします。

重要: このページのURLの最初の部分（例：us5、us6など）に注意してください。これはMailchimpアカウントのデータセンターに対応しています。これをHTTPリクエストに含める必要があります。

HTTPリクエストの設定方法

LogicのフローとMailchimpの認証情報を作成したので、Webflowに戻り、フロー内でHTTPリクエストを設定する必要があります。このステップで設定するHTTPリクエストにより、Webサイトの訪問者が購読フォームを送信するたびに、Mailchimpに新しい購読者が作成されます。

注意: Webflowサイトのタブを閉じた場合は、Logicパネル > Flowsタブに移動し、前のステップで設定したフローを選択します。フローエディターキャンバス上のMake HTTP requestブロックを選択してブロックの設定を開き、以下の手順を完了します。

1. Request methodドロップダウンをクリックし、POSTを選択します。
2. URLフィールドに「https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members」と入力し、**{dc}をMailchimpのURLから取得したデータセンターに、{list_id}**をMailchimpからコピーしたオーディエンスIDに置き換えます。
3. 以下をBodyフィールドに貼り付けます：

{"email_address": "","status": "subscribed"}

1. Bodyフィールドの空の引用符の間にカーソルを置きます。
2. 紫色の「dot」アイコンをクリックし、Emailフォームフィールドを選択します。

テストとフローの公開方法

1. Run test to complete setupをクリック
2. 対応する入力フィールドにサンプルのメールアドレスを入力します。
3. Run test をクリック
4. テストモーダルを終了するには、Cancel または Apply data をクリックします。
5. Publishをクリック
6. Stage flow for publishをクリック
7. サイトを公開します。

注意: テスト中にエラーメッセージを受け取った場合は、トラブルシューティング手順 を参照してから、上記の手順を再試行してください。HTTPリクエストのテスト方法についての詳細 も学んでください。

フローのトラブルシューティング方法

フローのテスト中にエラーが発生する場合、以下の方法を試してみてください。

• リクエストURLが正しいデータセンターと対象者ID を使用しているか確認してください。
• 無料のツール JSONLint を使用して、リクエストボディにエラーがないか確認してください。