料金プランを有効化して学習を始めましょう。
Add subscribers to Mailchimp with Webflow Logic

ロジックでMailchimp購読者を追加する

Mailchimpを使用すると、マーケティングメール、ニュースレター、ターゲットキャンペーンを作成して送信できます。Logicを使用すると、WebflowサイトからMailchimpに新しい購読者を登録し、マーケティング戦略の重要な要素をシームレスに結びつけることができます。

レッスン内容

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 を使用して、リクエストボディにエラーがないか確認してください。

関連レッスン

No items found.

コースのレッスン

No items found.

次のレッスン

サポート

チャットで講師に質問を聞きましょう

質問する

学習進捗

閲覧後に「完了」を押して、進捗を保存しましょう