Webアプリケーションをより便利にする！Gmailのクイックアクションボタンを導入するまでの3つのステップ

by kawakami
2016/02/24
Nulab

Gmail!Image by Cairo

ヌーラボアカウントでは、送信されるメールの使い勝手をよくするためにGmailのクイックアクションボタンを導入しました。

今回はクイックアクションボタンが使えるようになるまでの流れを説明します。内容については現時点(2016.02.24)での話で、将来変わることもあるかと思います。その点、ご了承ください。

クイックアクションボタンの導入にはGoogleにクイックアクションボタンを使用する申請をして、Gmailチームのレビューを経る必要があります。

今回はレビューを受けるまでの手順を大きく３つのステップに分けて説明します。

ステップ1. 対象を決める

まずはサービスがユーザーへ送るメールのうち、どのメールにどのアクションボタンを実装するのかを考えます。

アクションボタンには幾つかの種類があるのですが、Gmailチームによるレビューではメール内容、メールの目的が実装したアクションボタンのユースケースに適合しているかをチェックされるため、各アクションボタンごとのユースケースを確認しておく必要があります。

アクションボタンの種類には大きく以下のものがあります。

  • RSVP Action : イベントへの出欠を操作できます。
  • Review Action : 数値による評価(5段階評価など)と評価コメントの登録ができます。
  • One-Click Action : 決まった操作を実行することができます。一度しか押せません。
  • Go-To Action : 登録されたURLのページを表示することができます。

RSVP Action、Review Actionは特徴的な機能で、ユースケースもわかりやすいですね。One-Click Action、Go-To Actionにはさらに細かい分類があるので、もう少し説明します。

One-Click Action

One-Click ActionImage by Google

One-Click Actionはクリック１回で済む処理で使うアクションボタンです。

一度ボタンをクリックし処理が完了すると、そのボタンはクリックできなくなってしまうという特徴があります。

One-Click Actionは更にConfirm Action、Save Actionに分かれており、それぞれにユースケースがあります。

Confirm Action

承認する、確認する(approve, confirm, acknowledge)といったケースで対して使用します。友達申請を許可するといったようなことに使えます。

Save Action

リコメンドメールから「後で読む」リストやプレイリストに追加する、クーポンを受け取るといったケースで使用します。

Go-To Action

Go-To ActionImage by Google

Go-To Actionは１度きりではなく、何度か見ることのあるページを表示したい場合に使用します。

One-Click Actionと違い、表示されているアクションボタンは何度でも押すことができます。Go-To Actionは更にView Action、Track Actionに分かれています。

View Action

View Actionはアクションボタンに設定されたリンクを開くことができ、非常に使い勝手の良いアクションボタンです。

しかし、後述のガイドラインではIn-App Action(RSVP, Review, One-Clickの３つをひっくるめてIn-App Actionと呼んでいます)でできることはIn-App Actionでやるようにとあり、他のアクションボタンのユースケースに合わないものが対象のようです。

Track Action

配達物の追跡情報を表示するケースで使用するようです。

ステップ2. 実装する

どのアクションボタンを使用するか決めたら、アクションボタンをメールへ組み込んでいきます。メールはHTML形式のものである必要があります。

アクションボタンはschema.orgの仕様に則って記述するようになっています。アクションボタンの実装にはschema.orgが対応している２通りの記述方法(JSON-LD、MICRODATA)のなかからどちらか好きな方を選ぶことができます。以下にConfirm Actionの例を取り上げます。

JSON-LD

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "EmailMessage",
  "potentialAction": {
    "@type": "ConfirmAction",
    "name": "Approve Expense",
    "handler": {
      "@type": "HttpActionHandler",
      "url": "https://myexpenses.com/approve?expenseId=abc123"
    }
  },
  "description": "Approval request for John's $10.13 expense for office supplies"
}
</script>

name、url、descriptionの値を任意のものに変えることができます。

MICRODATA

<div itemscope itemtype="http://schema.org/EmailMessage">
  <div itemprop="potentialAction" itemscope itemtype="http://schema.org/ConfirmAction">
    <meta itemprop="name" content="Approve Expense"/>
    <div itemprop="handler" itemscope itemtype="http://schema.org/HttpActionHandler">
      <link itemprop="url" href="https://myexpenses.com/approve?expenseId=abc123"/>
    </div>
  </div>
  <meta itemprop="description" content="Approval request for John's $10.13 expense for office supplies"/>
</div>

JSON-LDのときと同様に、itempropがname、url、descriptionの値を任意のものに変えることができます。

実装するときの注意点

実装はドキュメントのとおりにするのがわかりやすいです。ただ、Go-To Actionのサンプルはそっくりそのまま使えないので注意が必要です。例えば、View Actionのサンプルは

<script type="application/ld+json">
{
  "@context": "http://schema.org",
  "@type": "EmailMessage",
  "potentialAction": {
    "@type": "ViewAction",
    "target": "https://watch-movies.com/watch?movieId=abc123",
    "name": "Watch movie"
  },
  "description": "Watch the 'Avengers' movie online"
}
</script>

となっていますが、実際にはtargetというキーではなく、他のアクションボタンのサンプルと同じようにurlというキーを使わなければなりません。問題なく実装されているかは、Email Markup Testerで確認できます。

テスト

実装後、アクションボタンがどのように表示されるのか確認したくなることがあると思います。そういうときのために、特定の条件を満たせばGoogleへの申請なしに動作確認できるようになっています。その条件は以下の通りです。

  • 送信元と送信先を同じメールアドレスにする。
  • 送信メールがDKIM又はSPFで認証されている。

この条件を満たせば、手元の開発環境でもメールを送って確認することができます。

また、手っ取り早い方法として、こちらを参考にして、AppsScriptから自分のGmail宛にアクションボタンを実装したメールを送るというものもあります。

クイックアクションボタンを実装する際はGoogle又はGoogle Appsのアカウントを用意しておくと良いでしょう。

ステップ3. 申請する

実際にクイックアクションボタンを使用できるようになるためには、ガイドラインで定められた要件を満たし、Googleに使用することを申請する必要があります。

ガイドライン

ガイドラインには「Email Sender Quality guidelines」、「Actions / Schema Guidelines」の２つがありそれぞれ以下のような要件を満たす必要があります。

Email Sender Quality guidelines

  • 送信するメールはDKIMまたはSPFで認証されていること。
  • Fromヘッダのメールアドレスのtop-level domain(TLD)が、SPFのTLDまたはDKIMシグニチャと一致していること。
  • 認証がSPFのみの場合、FromヘッダとReturn-PathヘッダのTLDが一致していること。
  • 送信するメールの送信元アドレスは固定であること。
  • Gmail Bulk Sender Guidelinesを満たしていること。
  • 数週の間、同じドメインから多くの電子メールを(1日に少なくとも100通をGmailに)送信していること。

Actions / Schema Guidelines

  • アクションボタンは正確に選択すること。例えば、１度のやりとりで完了できるものはIn-App Actionを使用し、より複雑なやりとりが必要なものはGo-To Actionを使用する。
  • 高いインタラクション率が予想されるときはメールにアクションボタンを使うことができる。宣伝用の一括送信のメールには使えない。
  • Go-To Actions
    • アクションが実行されうる特定のページへのディープリンクであること。
    • アクションボタンのテキストはアクションやページの内容を明確に反映すること。
    • 句読点を含んだものやすべて大文字のものをアクションボタンのテキストにしないこと。短く簡潔にすること。
    • In-App actionが使えるならIn-App actionを使い、Go-To Actionは使わないこと。(e.g. “Verify Email Address”や”Please Review”はIn-App Actionを使う)
    • 非常に特殊でとても価値のあるインタラクション率の高いユースケースではGo-To Actionを使用できる。(e.g. フライトのチェックインや積み荷追跡へのリンク)

申請フォーム

申請は申請用のフォームから行います。ですが、その前にもうひと仕事、アクションボタンを実装したメールをプロダクション環境からschema.whitelisting+sample@gmail.com宛に送信しておく必要があります。

メールを送信したらいよいよ申請です。申請用のフォームでは以下の項目を記入します。(必須項目のみ列挙しています)

  • 入力している人の名前
  • 入力している人のメールアドレス
  • 会社名
  • 会社のWebサイト
  • 会社の説明(メインゴールやプロダクトについて)
  • 会社(本社)のある国
  • メールについての説明(どんな目的か。どのような条件で送られるかなど情報はできるだけ載せる)
  • 宣伝用のメールかどうか(Yes/Noを選択)
  • 使用するスキーマの種類(ドロップダウンから選択)
  • 使用するアクションボタンの種類(ドロップダウンから選択)
  • メール送信元のメールアドレス
  • メールの言語(English/Otherを選択。Otherの場合は言語を書く)
  • schema.whitelisting+sample@gmail.com宛にメールを送信した日
  • schema.whitelisting+sample@gmail.com宛に送信したメールの件名

以上の項目を入力し申請を終えると、あとは待つだけです。

申請から２日程度でGoogleの受け付けが完了し、その後Gmailチームによるレビューとなります。申請から３週間ほど待つとレビューが完了しクイックアクションボタンが表示されるようになります。

まとめ

クイックアクションボタンはユースケースに適合しているかに気をつければ、実装は難しくありません。

プロダクト全体からすると大きなフィーチャーではありませんが、とても便利な機能なのでぜひ取り入れてみてください。

 

Portions of this page are reproduced from work created and shared by Googleand used according to terms described in the Creative Commons 3.0 Attribution License.

より良いチームワークを生み出す

チームの創造力を高めるコラボレーションツール

製品をみる