WebflowロジックでMailchimpにフォロワーを追加する

Logic の HTTP リクエストの作成ブロックを使用して連絡先情報を収集し、Mailchimp に新しい購読者を登録します。

Mailchimp を利用すると、プロモーション メール、ニュースレター、ターゲット キャンペーンを作成して送信できます。Logic を使用すると、Webflow ポータルから Mailchimp に新しいフォロワーを登録して、マーケティング アプローチの 2 つの重要な要素をスムーズに統合できます。

開始する前に: まだお済みでない場合は、 Mailchimpアカウントを作成する だけでなく、 Mailchimp オーディエンスさらに、Webflow ページにフォームを挿入し、訪問者がサインアップできるテキスト category: email を含む必須フィールドを組み込む必要があります。

このチュートリアルでは以下について説明します。

  1. Mailchimp APIキーを生成する方法
  2. ロジックフローの検証システムを確立する方法
  3. MailchimpオーディエンスIDを取得する方法
  4. HTTPリクエストの設定
  5. テストを実施してフローをリリースする方法
  6. フローで課題に取り組む方法

Mailchimp APIキーの生成

  1. Mailchimpのコントロールパネルに進みます
  2. プロフィールアイコンをタップして選択 アカウントと請求
  3. 進む 特典 > APIキー 
  4. 打つ キーを作成する 
  5. 最近の APIキー そして このタブをそのまま維持する!

ロジックフローの検証システムを確立する

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

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

  1. Mailchimpダッシュボードに戻る
  2. 進む 観客 > すべての連絡先
  3. Mailchimpのオーディエンスを複数所有している場合は、 現在の視聴者 ドロップダウンからWebflowサイトにリンクしたいオーディエンスを選択します
  4. 選ぶ 設定 ドロップダウンから選択して オーディエンス名とデフォルト
  5. 取得する オーディエンスID

重要な: このページの URL の最初のセグメント (us5、us6 など) をメモします。これは Mailchimp アカウントのデータ センターに対応しており、HTTP リクエストにこれを含めることが重要です。

HTTPリクエストの設定

ロジック フローと Mailchimp 認証資格情報を確立したら、Webflow に戻ってフロー内で HTTP リクエストを設定します。この構成された HTTP リクエストにより、サイト訪問者がサブスクリプション フォームを送信するたびに、Mailchimp に新しいサブスクライバーが追加されます。 

注記: Webflowサイトを開いていたタブを閉じた場合は、 ロジックパネル > 流れ タブを開き、前の手順で設定したフローを選択します。次に、 HTTPリクエストを行う フロー エディター キャンバスのブロックをクリックしてブロック設定を開き、後続の手順を完了します。
  1. 選択してください リクエスト方法 ドロップダウンメニューから選択 役職
  2. の中に URL フィールドのプレースホルダーを「https://{dc}.api.mailchimp.com/3.0/リスト/{リストID}/members」を置き換えます。 {dc} Mailchimpデータセンターと {リストID} Mailchimpから抽出したオーディエンスID 
  3. 以下の内容を 分野:
         
            { "email_address": "", "status": "subscribed" }
         
      

  1. カーソルを空の引用符の間に置きます。 セクション
  2. 紫色の「ドット”アイコンをクリックして Eメール フォームフィールド 

フローのテストとデプロイ

  1. クリック セットアップを完了するためにテストを実行する 
  2. 入力フィールドにサンプルのメールアドレスを入力してください
  3. クリック テストを実行する 
  4. 選ぶ キャンセル または データの適用 テストモーダルを終了する
  5. 選ぶ 公開 
  6. 選択する 公開のステージフロー
  7. サイトを公開する
注記: フロー テスト中にエラー メッセージが表示された場合は、診断ガイドラインに従って上記の手順を繰り返します。HTTP 要求のテストに関する追加情報を参照してください。

フロー関連の問題のトラブルシューティング

フローのテスト中にエラーが発生した場合は、次のアクションを検討してください。

  • リクエストURLが正しい データセンター およびオーディエンスID
  • 次のような無料ツールを使ってリクエスト本文に潜在的なエラーがないか精査します。 JSONリント 
ユアン・マック