Google I/O にご参加いただきありがとうございました。オンデマンドでコンテンツを視聴できます。

Wake Lock API の事例紹介: BettyCrocker.com での購入意向インジケーターが 300% 増加

Phillip Kriegel

Thomas Steiner

Betty Crocker は、1 世紀近くにわたり、アメリカの現代的な料理の指導と信頼できるレシピ開発の源となっています。1997 年に開設された BettyCrocker.com には、現在、毎月 1, 200 万人を超えるユーザーがアクセスしています。Wake Lock API を実装したところ、ウェイクロックユーザーの購入意向の指標が、全ユーザーと比較して約 300% 高くなりました。

サポートが終了した iOS アプリと Android アプリ

2014 年に大々的にリリースされた Betty Crocker のアプリは、優先順位が下げられた後、最近になって Apple App Store と Google Play ストアから削除されました。Betty Crocker チームは、iOS/Android アプリではなくモバイルサイトに新機能を追加することを長年好んでいました。iOS/Android アプリの作成に使用された技術プラットフォームが古く、今後アプリの更新とメンテナンスをサポートするリソースがビジネスにありませんでした。ウェブアプリは、トラフィックの面でも客観的に大きく、よりモダンで、拡張も容易でした。

ただし、iOS/Android アプリには、ユーザーが気に入っているキラー機能が 1 つありました。

ミレニアル世代の料理のプロのヒント: @BettyCrocker モバイルアプリでは、レシピを見ているときに画面が暗くなったりロックされたりしません。—@AvaBeilke

80% の人がキッチンでデバイスを使って料理をしていますが、画面の暗転やロックが問題になっています。@BettyCrocker は何をしたのですか？ユーザーがレシピを表示しているときに画面が暗くならないようにアプリを更新しました。 —@KatieTweedy

Wake Lock API でウェブにキラー機能を導入

デバイスで料理をしているときに、画面がオフになったときに汚れた手や鼻で画面をタッチしなければならないのは、非常に面倒です。Betty Crocker は、iOS/Android アプリのキラー機能をウェブアプリに移植する方法を検討しました。その結果、Project Fugu と Wake Lock API を知りました。

小麦粉で覆われたキッチンテーブルで生地をこねる人

Wake Lock API を使用すると、デバイスの画面が暗くなったり、ロックされたりすることを防ぐことができます。この機能により、これまで iOS/Android アプリが必要だった新しいエクスペリエンスが可能になります。Wake Lock API により、ハック的で電力消費の可能性がある回避策の必要性が軽減されます。

wake lock をリクエストする

ウェイクロックをリクエストするには、WakeLockSentinel オブジェクトを返す navigator.wakeLock.request() メソッドを呼び出す必要があります。このオブジェクトは番兵値として使用します。ブラウザはさまざまな理由（バッテリー残量が少ないなど）でリクエストを拒否する可能性があるため、呼び出しを try…catch ステートメントでラップすることをおすすめします。

wake lock の解放

また、ウェイクロックを解除する方法も必要です。これは、WakeLockSentinel オブジェクトの release() メソッドを呼び出すことで実現できます。一定の時間が経過した後にウェイクロックを自動的に解放する場合は、次の例に示すように、window.setTimeout() を使用して release() を呼び出すことができます。

// The wake lock sentinel.
let wakeLock = null;

// Function that attempts to request a wake lock.
const requestWakeLock = async () => {
  try {
    wakeLock = await navigator.wakeLock.request('screen');
    wakeLock.addEventListener('release', () => {
      console.log('Wake Lock was released');
    });
    console.log('Wake Lock is active');
  } catch (err) {
    console.error(`${err.name}, ${err.message}`);
  }
};

// Request a wake lock…
await requestWakeLock();
// …and release it again after 5s.
window.setTimeout(() => {
  wakeLock.release();
  wakeLock = null;
}, 5000);

実装

新しいウェブアプリでは、ユーザーはレシピを簡単に確認し、手順を完了できます。また、画面がロックされることなく、レシピから離れることもできます。この目標を達成するため、チームはまず、コンセプト実証と UX のインプット収集を目的として、迅速なフロントエンドプロトタイプを構築しました。

プロトタイプが有用であることが証明された後、同社はすべてのブランド（BettyCrocker、Pillsbury、Tablespoon）で共有できる Vue.js コンポーネントを設計しました。iOS と Android のアプリがあったのは Betty Crocker だけでしたが、3 つのサイトは共通のコードベースを持っていたため、下のスクリーンショットのように、コンポーネントを一度実装して、どこにでもデプロイすることができました。

新しいサイトの最新のフレームワークに基づいてコンポーネントを開発する際は、MVVM パターンの ViewModel レイヤに重点が置かれました。また、サイトの以前のフレームワークと新しいフレームワークで機能を有効にするために、相互運用性を考慮してプログラミングを行いました。

視認性とユーザビリティを追跡するために、Betty Crocker はウェイクロックライフサイクルのコアイベントの分析トラッキングを統合しました。チームは、機能管理を利用して、最初の本番環境ロールアウトでウェイクロックコンポーネントを単一のサイトにデプロイし、使用状況とページの健全性をモニタリングした後、残りのサイトに機能をデプロイしました。このコンポーネントの使用状況に基づいて、分析データのモニタリングを継続します。

ユーザーのフェイルセーフとして、チームは 1 時間操作がないとウェイクロックを無効にする強制タイムアウトを作成しました。最終的に、サイト全体のすべてのレシピページに切り替えスイッチを実装するという短期的な解決策に落ち着きました。長期的には、レシピページのビューを刷新することを想定しています。

wake lock コンテナ

var wakeLockControl = () => {
  return import(/* webpackChunkName: 'wakeLock' */ './wakeLock');
};

export default {
  components: {
    wakeLockControl: wakeLockControl,
  },
  data() {
    return {
      config: {},
      wakeLockComponent: '',
    };
  },
  methods: {
    init: function(config) {
      this.config = config || {};
      if ('wakeLock' in navigator && 'request' in navigator.wakeLock) {
        this.wakeLockComponent = 'wakeLockControl';
      } else {
        console.log('Browser not supported');
      }
    },
  },
};

ウェイクロックコンポーネント

<template>
  <div class="wakeLock">
    <div class="textAbove"></div>
    <label class="switch" :aria-label="settingsInternal.textAbove">
      <input type="checkbox" @change="onChange()" v-model="isChecked">
      <span class="slider round"></span>
    </label>
  </div>
</template>

<script type="text/javascript">
  import debounce from 'lodash.debounce';

  const scrollDebounceMs = 1000;

  export default {
    props: {
      settings: { type: Object },
    },
    data() {
      return {
        settingsInternal: this.settings || {},
        isChecked: false,
        wakeLock: null,
        timerId: 0,
      };
    },
    created() {
      this.$_raiseAnalyticsEvent('Wake Lock Toggle Available');
    },
    methods: {
      onChange: function() {
        if (this.isChecked) {
          this.$_requestWakeLock();
        } else {
          this.$_releaseWakeLock();
        }
      },
      $_requestWakeLock: async function() {
        try {
          this.wakeLock = await navigator.wakeLock.request('screen');
          //Start new timer
          this.$_handleAbortTimer();
          //Only add event listeners after wake lock is successfully enabled
          document.addEventListener(
            'visibilitychange',
            this.$_handleVisibilityChange,
          );
          window.addEventListener(
            'scroll',
            debounce(this.$_handleAbortTimer, scrollDebounceMs),
          );
          this.$_raiseAnalyticsEvent('Wake Lock Toggle Enabled');
        } catch (e) {
          this.isChecked = false;
        }
      },
      $_releaseWakeLock: function() {
        try {
          this.wakeLock.release();
          this.wakeLock = null;
          //Clear timer
          this.$_handleAbortTimer();
          //Clean up event listeners
          document.removeEventListener(
            'visibilitychange',
            this.$_handleVisibilityChange,
          );
          window.removeEventListener(
            'scroll',
            debounce(this.$_handleAbortTimer, scrollDebounceMs),
          );
        } catch (e) {
          console.log(`Wake Lock Release Error: ${e.name}, ${e.message}`);
        }
      },
      $_handleAbortTimer: function() {
        //If there is an existing timer then clear it and set to zero
        if (this.timerId !== 0) {
          clearTimeout(this.timerId);
          this.timerId = 0;
        }
        //Start new timer; Will be triggered from toggle enabled or scroll event
        if (this.isChecked) {
          this.timerId = setTimeout(
            this.$_releaseWakeLock,
            this.settingsInternal.timeoutDurationMs,
          );
        }
      },
      $_handleVisibilityChange: function() {
        //Handle navigating away from page/tab
        if (this.isChecked) {
          this.$_releaseWakeLock();
          this.isChecked = false;
        }
      },
      $_raiseAnalyticsEvent: function(eventType) {
        let eventParams = {
          EventType: eventType,
          Position: window.location.pathname || '',
        };
        Analytics.raiseEvent(eventParams);
      },
    },
  };
</script>

結果

Vue.js コンポーネントは 3 つのサイトすべてにデプロイされ、大きな成果を上げています。2019 年 12 月 10 日から 2020 年 1 月 10 日までの期間に、BettyCrocker.com は次の指標を報告しました。

Wake Lock API に対応したブラウザを使用している Betty Crocker ユーザーのうち、3.5% がすぐにこの機能を有効にしました。これは上位 5 位に入るアクションです。
ウェイクロックを有効にしたユーザーのセッション時間は、有効にしなかったユーザーの 3.1 倍長くなりました。
ウェイクロックを有効にしたユーザーの直帰率は、ウェイクロック機能を使用していないユーザーの直帰率よりも 50% 低くなりました。
ウェイクロックユーザーの購入意向の指標は、すべてのユーザーと比較して約 300% 高くなっています。

3.1_×

セッション継続時間が長い

50_%

直帰率の低下率

300_%

購入意向が高いことを示す指標

まとめ

Betty Crocker は、Wake Lock API を使用して素晴らしい成果を上げています。この機能を試すには、BettyCrocker、Pillsbury、Tablespoon のいずれかのサイトでお気に入りのレシピを検索し、[料理中に画面が暗くなるのを防ぐ] 切り替えを有効にします。

ウェイクロックのユースケースはレシピサイトだけではありません。他にも、バーコードがスキャンされるまで画面をオンにしておく必要がある搭乗券やチケットのアプリ、画面を継続的にオンにしておくキオスクスタイルのアプリ、プレゼンテーション中に画面がスリープ状態にならないようにするウェブベースのプレゼンテーションアプリなどがあります。

このサイトの包括的な記事で、Wake Lock API について知っておくべきことのすべてをまとめました。ぜひお役立てください。

Wake Lock API の事例紹介: BettyCrocker.com での購入意向インジケーターが 300% 増加 コレクションでコンテンツを整理 必要に応じて、コンテンツの保存と分類を行います。