FirebaseとSendGridを使ったメルマガサービスの実装で使用するキャンペーンメッセージフォーム

2020年11月27日

FirebaseとSendGridを使ったメルマガサービスの実装で使用するキャンペーンメッセージフォーム

FirebaseとSendGridを利用してメルマガ（ニュースレター）のサービスを実装する場合に使用するマーケティングキャンペーンの入力フォームの実装例を紹介しています。
メルマガ（ニュースレター）などを沢山の宛先に一括送信する場合、通常のE-MailベースのメッセージよりSendGridのマーケティングキャンペーンを利用した方が便利でいろいろな機能の拡張が可能です。
この記事では、マーケティングキャンペーンの作成フォームの実装例を紹介しています。

マーケティングキャンペーンの作成フォームで必要な事

マーケティングキャンペーンを作成する場合、SendGridのAPIで必須の項目は「タイトル（title）」だけです。しかし、マーケティングキャンペーンを送信する場合に必須な項目でマーケティングキャンペーンを作成後に更新できない情報があります。これらの情報がないと、送信時や送信日時を予約する場合にエラーになります。
そこで、マーケティングキャンペーンを作成する際に後から更新できない情報も取得しておく必要があります。
その場合に必要な情報が以下の様になります：
タイトル（title）必須ですが後から変更可能
件名（subject）後から変更可能
本文（html_content/text_content）後か変更可能
送信者(sender_id)後から変更不可
送付先リスト（list_ids）
送付停止リストなども後から変更不可ですが、今回の実装ではグローバル停止リストを利用する事にして、利用者からの入力なしで一律に設定してしまうことにして、シンプルにしています。また、送付先リストの他にセグメント（segment）を利用する場合には、セグメントの入力も必要になります。

入力エラーを最小限にする

ユーザーインタフェースを設計する際に重要なことは、いかに入力のエラーを避けるかという事です。必要の情報のうち、送付先リストの情報や送信者の情報は予めSendGridに登録された情報を使う必要があります。これを利用者にタイプしてもらうようなインターフェースを作ってしまうと、入力ミスは避けられません。これを避けるためには予め登録されている情報を取得しておいてその中から利用者に選んでもらうという方法にするとタイプによるミスを防ぐことが可能になります。そこで、このページを初期化する際にSendGridから送付先リストと、送信者の情報を取得してステート（state）で管理できるようにします。

componentDidMount() {
    this.sg.getSenders().then((senders: Array<TYPE.sgSender>) => {
      this.setState({
        senders: senders,
        sender: senders.length !== 0 ? senders[0] : undefined,
      });
    });
    this.sg.getLists().then((lists: Array<TYPE.sgList>) => {
      this.setState({
        lists: lists,
        list: lists.length !== 0 ? lists[0] : undefined,
      });
    });
  }

###　マーケティングキャンペーンのフォームの例

予め取得した、送信者や送付先リストの情報を使ってマーケティングキャンペーンの作成フォームを作ります。

フォームの例です

render() {
    return (
      <React.Fragment>
        <div className="campaign_form">
          <div className="form-group">
            <label>タイトル</label>
            <input className="form-control" type="text" ref={this.title} />
          </div>
          <div className="form-group">
            <label>件名</label>
            <input className="form-control" type="text" ref={this.subject} />
          </div>
          <div className="form-group">
            <label>送信者</label>
            <select
              className="form-control"
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                this.senderSelection(e)
              }
            >
              {this.state.senders.map((item: TYPE.sgSender) => (
                <option key={item.id} value={item.id}>
                  {item.from.name + " ( " + item.from.email + " ) "}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label>送付先リスト</label>
            <select
              className="form-control"
              onChange={(e: React.ChangeEvent<HTMLSelectElement>) =>
                this.listSelection(e)
              }
            >
              {this.state.lists.map((item: TYPE.sgList) => (
                <option key={item.id} value={item.id}>
                  {item.name}
                </option>
              ))}
            </select>
          </div>
          <div className="form-group">
            <label>本文</label>
            <textarea className="form-control" ref={this.message}></textarea>
          </div>
          <button className="btn btn-primary" onClick={() => this.send()}>
            送信
          </button>
        </div>
      </React.Fragment>
    );
  }

取得した送信者や送付先リストの情報を「select」を使って選択できるようにしています。

あとは、送信ボタンが押されたらメッセージを送信できるようにしています。

実際は、このフォームはマーケティングキャンペーンの作成のみにして、作成後のマーケティングキャンペーンの一覧を表示できるようにして、操作を選択できるようにした方が使いやすいユーザーインターフェースになるかと思います。

作成されたキャンペーンに対する操作は：

直ちに送信
送信日時を予約
予約した送信日時の変更
予約した送信のキャンセル
予約した送信時の確認（表示）
キャンペーンのステータスの表示（ドラフト、送信待ち、送信済）
マーケティングキャンペーンの更新
マーケティングキャンペーンの削除

などです。操作が多いので、作成フォームとは分けて操作が必要なマーケティングキャンペーンを選択したうえで操作を行うという作り方の方がわかりやすい場合が多いかとおもいます。

まとめ

FirebaseとSendGridを利用してメルマガ（ニュースレター）を配信する場合に、マーケティングキャンペーンのメッセージを作成するフォームについて紹介してきました。
マーケティングキャンペーンに対する操作は多いので、作成とその他の操作を分けてユーザーインターフェースを設計した方が利用者にはわかりやすい場合が多いかと思います。
マーケティングキャンペーンを作成する場合も、入力ミスをなるべく起こさないような工夫をすることで、利用者には使いやすく、開発者にはエラー処理をシンプルにして実装する事ができます。

このブログを検索

シリコンバレースーパーウエア