この投稿は公式のWebflow Universityを元に作成しました。翻訳したテキストと画像は引用元のものを使用する場合があります。
引用元Mailchimpを使用すると、マーケティングメール、ニュースレター、ターゲットキャンペーンを作成して送信できます。Logicを使用すると、WebflowサイトからMailchimpに新しい購読者を登録し、マーケティング戦略の重要な要素をシームレスに結びつけることができます。
始める前に: もしあなたがまだMailchimpアカウントを持っていない場合、Mailchimpアカウントを作成し、Mailchimpオーディエンスを作成してください。また、Webflowサイトにフォームを追加し、サイト訪問者が購読できるように必須フィールドを追加しておく必要があります。
このレッスンで学ぶこと
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リクエストのテスト方法についての詳細 も学んでください。
フローのトラブルシューティング方法
フローのテスト中にエラーが発生する場合、以下の方法を試してみてください。
目次
トップへ