HTMLメールにカウントダウンを組み込む

HTMLメールは、「JavaScriptが使用できない」「CSSの対応状況がブラウザと比べて遅れている」などの理由からWebサイトと比べるとインタラクティブなコンテンツを作るのが難しいです。
それでも、コンバージョンを増やす取り組みとして、gifアニメーションや動画などを取り入れてユーザーに注意を向けてもらう施策などがあります。

今年も残りわずかとなり、2018年のメールマーケティングのトレンドを予想している海外の記事を見ると2017年に引き続きインタラクティブなHTMLメールが注目されています。
今回はインタラクティブなコンテンツの作成が難しいHTMLメールにおいても、幅広い閲覧環境で動作する「カウントダウン」の実装について触れたいと思います。

カウントダウンについて

Webサイト上のカウントダウンの使用方法として、映画の公開日へ向けての期待感の向上、ECサイトのタイムセールのような期間が決まっている重要な情報の伝達などがあげられます。
HTMLメールにもカウントダウンを入れることで、キャンペーンやセールなどの期限をリアルタイムでユーザーに知らせ、コンバージョンの向上を図ることができます。

カウントダウンをHTMLメールに組み込んでみる

今回はHow to: Add a Countdown Timer to your Emailに紹介されているサンプルコードを使ってみます。

原理としては、カウントダウン用の画像に対してPHPを使用してリアルタイムに更新することであたかも動いているように見せています。そのため、PHPが動作する環境でのみ使用できます。

また、このサンプルコードでは、1分経過するとカウントダウンが開始した時間に戻り、再び動き出す仕様となっています。

まずは、Omgitsonlyalex/EmailCountdownをダウンロードします。

次に、gif.phpに記述されているdate_default_timezone_set('Europe/London');をdate_default_timezone_set('Asia/Tokyo');に変更してフォルダごとサーバーにアップロードします。

「YOURHOST」部分を適宜置き換えて、下記のURLにアクセスすると今年のクリスマスまでのカウントダウン画像が表示されるはずです。

YOURHOST/EmailCountdown-master/gif.php?time=2017-12-25+00:00:01

あとは、制作しているHTMLメールに下記のようにimg要素として記述するだけになります。

<img src="YOURHOST/EmailCountdown-master/gif.php?time=2017-12-25+00:00:01" alt="Countdown" border="0" style="display:block;">

記事でも紹介されていますがOutlook 07/10/13ではメールを開いたときの残り時間が表示されるのみでカウントダウンが動くことはありません。しかし、それ以外の環境でカウントダウンが動くのは制限が多いHTMLメールにおいてうれしい情報です。

gif.phpの設定項目の変更とサンプルコードに同封されている画像を加工してミツエーリンクスニュースに仮の文言と一緒に組み込んでみたキャプチャーが下記になります。

最後に

カウントダウンの拡張性や画像生成のサーバーへの負荷を考えると、今回紹介したサンプルコードをそのまますぐに取り入れるのは難しいかと思います。
しかし、紹介したコードを使用してカウントダウンが有効な手段と判断するための実験としては使用できると考えます。正式に採用する場合は、「Countdown Timers for Email」で検索するとHTMLメール向けに作られたカウントダウン用のサービスが多数ヒットしますので、専用のサービスを導入してみるのがよいでしょう。