レッスン内容
MailchimpのAPIキーの作成方法
- Mailchimpダッシュボードに移動します。
- プロフィールアイコンをクリックして、 Account & billing をクリックします。
- Extras > API keys に移動します。
- Create a key をクリックします。
- 新しいAPIキーをコピーし、このタブを開いたままにしておきます!
Logicフローの認証の設定方法
- 新しいタブでWebflow Designerでサイトを開きます。
- デザイナーキャンバスでフォームブロックを選択し、Form block settingsを開きます。
- Sourceのドロップダウンをクリックし、Logicを選択します。
- Add new flowをクリックします。
- Nameフィールドに新しいフローの名前を入力します(例:「Mailchimpニュースレターへの購読者追加」)、説明フィールドに任意で説明を追加します。
- Make HTTPリクエストブロックをフローエディターキャンバスにドラッグし、名前を付けます(例:「Mailchimpへのリクエスト送信」)。
- AuthenticationのドロップダウンからAPIトークンを選択します。
- Add toのドロップダウンからHeaderを選択します。
- Headerフィールドに「Authorization」と入力します。
- Select a credential > Add new credentialをクリックします。
- NameフィールドにAPIトークンの名前を入力します(例:「Mailchimp APIトークン」)、任意で Description フィールドに説明を追加します。
- Tokenフィールドに「Bearer {APIキー}」を入力します。ここで**{APIキー}**はMailchimpからコピーしたAPIキーに置き換えます。
- Createをクリックして新しい認証情報を保存し、このタブを開いたままにしておきます!
プロのヒント: フォームを新しいLogicフローに接続するには、Logicパネル > Flowsタブからも行えます。Logicでフォームの送信トリガーについて詳しく学ぶ。
MailchimpオーディエンスIDの取得方法
- Mailchimpダッシュボードに戻ります。
- Audience > All contactsに移動します。
- 複数のMailchimpオーディエンスを持っている場合、Current audienceのドロップダウンをクリックし、Webflowサイトに接続したいオーディエンスを選択します。
- Settingsのドロップダウンをクリックし、Audience name and defaultsを選択します。
- Audience IDをコピーします。
重要: このページのURLの最初の部分(例:us5、us6など)に注意してください。これはMailchimpアカウントのデータセンターに対応しています。これをHTTPリクエストに含める必要があります。
HTTPリクエストの設定方法
LogicのフローとMailchimpの認証情報を作成したので、Webflowに戻り、フロー内でHTTPリクエストを設定する必要があります。このステップで設定するHTTPリクエストにより、Webサイトの訪問者が購読フォームを送信するたびに、Mailchimpに新しい購読者が作成されます。
注意: Webflowサイトのタブを閉じた場合は、Logicパネル > Flowsタブに移動し、前のステップで設定したフローを選択します。フローエディターキャンバス上のMake HTTP requestブロックを選択してブロックの設定を開き、以下の手順を完了します。
- Request methodドロップダウンをクリックし、POSTを選択します。
- URLフィールドに「https://{dc}.api.mailchimp.com/3.0/lists/{list_id}/members」と入力し、**{dc}をMailchimpのURLから取得したデータセンターに、{list_id}**をMailchimpからコピーしたオーディエンスIDに置き換えます。
- 以下をBodyフィールドに貼り付けます:
{"email_address": "","status": "subscribed"}
- Bodyフィールドの空の引用符の間にカーソルを置きます。
- 紫色の「dot」アイコンをクリックし、Emailフォームフィールドを選択します。
テストとフローの公開方法
- Run test to complete setupをクリック
- 対応する入力フィールドにサンプルのメールアドレスを入力します。
- Run test をクリック
- テストモーダルを終了するには、Cancel または Apply data をクリックします。
- Publishをクリック
- Stage flow for publishをクリック
- サイトを公開します。
注意: テスト中にエラーメッセージを受け取った場合は、トラブルシューティング手順 を参照してから、上記の手順を再試行してください。HTTPリクエストのテスト方法についての詳細 も学んでください。
フローのトラブルシューティング方法
フローのテスト中にエラーが発生する場合、以下の方法を試してみてください。
関連レッスン
No items found.
コースのレッスン
No items found.