投票ブロック
ワンタップのアンケート質問です: 各選択肢は、実際にメール内で機能するコントロールであると同時に、単純なリンクでもあります。投票は、Gmail Web版から最もプレーンなテキストのみのクライアントまで、ほとんどの場合受信者に受信トレイを離れさせることなく、どこでも機能します。
仕組み
すべての投票の選択肢は、ビルド時にどちらか一方を選ぶのではなく、常に2つの表現を同時にレンダリングします。メール内でのフォーム送信に対応しているクライアント(Gmail Web版/Android、Yahooなど)では、各選択肢は実際の<form method="post">としてMailInAppの公開インタラクションエンドポイントへ直接送信され、タップすると受信トレイを離れずに投票できます。そのフォームはキネティック専用ティアに包まれており、もう一方の表現 — /v/[token]/actへの確認・記録を行うホスティングされたページへの単純な<a href>リンク — を隠すCSSルールと対になっています。
そのCSSルールが有効にならない環境(Outlook、またはメール内フォーム送信ができないクライアント)では、隠れていたリンクの方が代わりに表示され、役割を果たします。単純なリンクは、すべてのメールクライアントがレンダリングし、辿ることができる唯一の普遍的な仕組みです。どちらの経路でも同じ記録用エンドポイントを経由して送信され、同一のイベントが生成されるため、結果が受信者の使ったクライアントによって分岐することはありません。
投票は、ライブページ上で確認された時点(またはメール内送信であれば即時)に記録されます — 単純なリンクの取得だけでは記録されません。これが重要なのは、企業のスキャナーや受信ボックスのセキュリティツールが、メールが届いた瞬間にその中のすべてのリンクを事前に取得(プリフェッチ)するためです。単純なGETでカウントされてしまうなら、人間がメールを開く前に投票結果がボットで埋まってしまいます。確認はリンク経路でもフォーム送信を通じて行われるため、/v/[token]/actはリダイレクトして即記録するのではなく、確認してから記録する2段階になっています。
受信者自身の投票は重複排除されます。自分のリンクを再クリックしても(慌てての二度タップ、再試行されたページ読み込みなど)、2件目の行として記録されるのではなく、何も起きません — キャンペーン・ブロック・受信者から決まる決定論的なFirestoreドキュメントIDによって強制されます。匿名の投票(受信者トークンがない場合 — 例えば書き出したHTMLファイルをサードパーティのESPに貼り付けた場合など)は、1人ずつの重複排除ができません。キーにできる「人」が存在しないためです。代わりに、IPアドレス・キャンペーン・分単位でレート制限されます。キャンペーンのIDはメール自身のソースに表示されており、スクリプトが任意の投票を送信することを防ぐ他の手段がないためです。
設定可能なフィールド:
- 質問 — 投票の問いかけテキストで、独自の色とフォントサイズを持ちます。
- カードの背景色、パディング、ボーダー、ボーダーの角丸。
- 選択肢のテキスト色と選択肢の背景色 — すべての選択肢チップに一律で適用される共有スタイルの上書きです。
各投票の選択肢は、単一のラベルフィールドを持つ子ノードです — ツリー内で選択肢を自由に追加・削除・並べ替えできます。
プロジェクトに終了日または回答上限が設定されており(アンケートのライフサイクルを参照)、それに達している場合、ライブビューはインタラクティブなチップを、操作できないグレーの等価物に切り替え、「このアンケートは新しい回答の受付を終了しました」という注記を表示します。メールHTML自体はこの状態を一切表示しません — 送信時点で静的であり、このチェックはページが開かれたときにのみ行われ、メール送信時には行われません。
例
Subject
Quick one: what should we build next?
「次に開発すべき機能はどれですか?」のような単一質問の投票を商品ニュースレターに入れておけば、本格的なフォームの手間なく興味を直接読み取れます。受信トレイから直接、構造化されたフィードバックを収集するより広いパターンについてはアンケートとNPSフィードバックを参照してください。イベントの振り返りメールでは「また参加したいですか?」を「はい/いいえ/わからない」の選択肢で尋ね、そのまま次回の計画に活用できます。方向性が定まらないチームは、投票を軽量な社内投票(「ロゴAかロゴBか?」)として利用し、関係者に送って、結果ページでリアルタイムに結果を確認できます。
静的フォールバックの見え方
<div id="em-poll-1" style="margin:12px 0;background-color:transparent">
<p style="margin:0 0 10px;font-weight:600;font-size:16px;color:#111827">Which do you prefer?</p>
<div>
<span class="kn-fallback">
<a href="https://mailinapp.com/v/eyJhbGci.../act?blockId=poll-1&blockType=poll&action=vote&option=Option+A"
style="display:inline-block;margin:0 6px 6px 0;padding:8px 14px;border:1px solid #d1d5db;border-radius:6px;background-color:#ffffff;color:#111827;font-size:14px;text-decoration:none">
Option A
</a>
</span>
</div>
</div>
これはティア2のリンク経路です: /v/[token]/actへの単純な<a>で、メール内フォームがレンダリングするのと同じチップに見えるようスタイルされています — キネティックフォームがCSSで非表示になっている場合にのみ表示されます。