Mailchimp を利用すると、プロモーション メール、ニュースレター、ターゲット キャンペーンを作成して送信できます。Logic を使用すると、Webflow ポータルから Mailchimp に新しいフォロワーを登録して、マーケティング アプローチの 2 つの重要な要素をスムーズに統合できます。
開始する前に: まだお済みでない場合は、 Mailchimpアカウントを作成する だけでなく、 Mailchimp オーディエンスさらに、Webflow ページにフォームを挿入し、訪問者がサインアップできるテキスト category: email を含む必須フィールドを組み込む必要があります。
このチュートリアルでは以下について説明します。
- Mailchimp APIキーを生成する方法
- ロジックフローの検証システムを確立する方法
- MailchimpオーディエンスIDを取得する方法
- HTTPリクエストの設定
- テストを実施してフローをリリースする方法
- フローで課題に取り組む方法
Mailchimp APIキーの生成
- Mailchimpのコントロールパネルに進みます
- プロフィールアイコンをタップして選択 アカウントと請求
- 進む 特典 > APIキー
- 打つ キーを作成する
- 最近の APIキー そして このタブをそのまま維持する!

ロジックフローの検証システムを確立する
- 新しいブラウザタブでWebflowデザイナー内でウェブページを起動します
- デザイナーキャンバスでフォームブロックを選択し、 フォームブロック設定
- を押す ソース リストして選択する 論理
- タップする 新しいフローを追加
- 新しいフローに名前を付けます(例:「Mailchimpの掲示板にフォロワーを含める」)。 名前 セクションに説明を追加し、 説明 必要に応じてセグメント化
- ドラッグ HTTPリクエストを行う フローエディタキャンバスにブロックを追加し、名前を付けます(例:「Mailchimpにリクエストを送信」)
- 選択する APIトークン から 認証 落ちる
- 選択する ヘッダ から に追加 落ちる
- 「認証」と入力し、 ヘッダ 分野
- 打つ 資格情報を選択 > 新しい資格情報を追加
- APIトークンにラベルを付けます(例:「Mailchimp APIトークン」)。 名前 セグメントを作成し、説明を追加します 説明 必要に応じてセグメント化
- 「ベアラー」と入力 {API キー}" の中に トークン フィールドを置き換え、 {API キー} MailchimpからコピーしたAPIキー
- タップ 作成する 新しい認証情報を保存し、 このタブをそのまま維持する!
インサイダーのヒント: フォームを新しいロジックフローにリンクすることもできます。 ロジックパネル > 流れリスト。Logic のフォーム送信トリガーに関する詳細を理解してください。

MailchimpオーディエンスIDの取得
- Mailchimpダッシュボードに戻る
- 進む 観客 > すべての連絡先
- Mailchimpのオーディエンスを複数所有している場合は、 現在の視聴者 ドロップダウンからWebflowサイトにリンクしたいオーディエンスを選択します
- 選ぶ 設定 ドロップダウンから選択して オーディエンス名とデフォルト
- 取得する オーディエンスID
重要な: このページの URL の最初のセグメント (us5、us6 など) をメモします。これは Mailchimp アカウントのデータ センターに対応しており、HTTP リクエストにこれを含めることが重要です。
HTTPリクエストの設定
ロジック フローと Mailchimp 認証資格情報を確立したら、Webflow に戻ってフロー内で HTTP リクエストを設定します。この構成された HTTP リクエストにより、サイト訪問者がサブスクリプション フォームを送信するたびに、Mailchimp に新しいサブスクライバーが追加されます。
注記: Webflowサイトを開いていたタブを閉じた場合は、 ロジックパネル > 流れ タブを開き、前の手順で設定したフローを選択します。次に、 HTTPリクエストを行う フロー エディター キャンバスのブロックをクリックしてブロック設定を開き、後続の手順を完了します。
- 選択してください リクエスト方法 ドロップダウンメニューから選択 役職
- の中に URL フィールドのプレースホルダーを「https://{dc}.api.mailchimp.com/3.0/リスト/{リストID}/members」を置き換えます。 {dc} Mailchimpデータセンターと {リストID} Mailchimpから抽出したオーディエンスID
- 以下の内容を 体 分野:
- カーソルを空の引用符の間に置きます。 体 セクション
- 紫色の「ドット”アイコンをクリックして Eメール フォームフィールド
フローのテストとデプロイ
- クリック セットアップを完了するためにテストを実行する
- 入力フィールドにサンプルのメールアドレスを入力してください
- クリック テストを実行する
- 選ぶ キャンセル または データの適用 テストモーダルを終了する
- 選ぶ 公開
- 選択する 公開のステージフロー
- サイトを公開する
注記: フロー テスト中にエラー メッセージが表示された場合は、診断ガイドラインに従って上記の手順を繰り返します。HTTP 要求のテストに関する追加情報を参照してください。
フロー関連の問題のトラブルシューティング
フローのテスト中にエラーが発生した場合は、次のアクションを検討してください。
Ewan Mak による最新の投稿 (すべてを見る)
- ワークスペーススポットとメンバーの追加または削除 - 2024年4月15日
- センタリングボックスの概要 - 2024年4月15日
- 将来の参照用にサイトを保存する - 2024年4月15日