Пример использования Wake Lock API: увеличение показателей намерения покупки на 300 % на BettyCrocker.com

Нет ничего хуже при приготовлении пищи с помощью мобильного устройства, чем выключение его экрана в середине этапа приготовления. Узнайте, как кулинарный сайт BettyCrocker.com использовал API Wake Lock, чтобы этого не произошло.

На протяжении почти столетия Бетти Крокер была в Америке источником современных кулинарных инструкций и проверенных рецептов. Их сайт BettyCrocker.com , запущенный в 1997 году, сегодня посещают более 12 миллионов человек в месяц. После того, как они внедрили Wake Lock API , их показатели покупательского намерения были примерно на 300% выше для пользователей Wake Lock по сравнению со всеми пользователями.

Устаревшие приложения для iOS и Android

Выпущенная с большой помпой в 2014 году, Бетти Крокер недавно удалила свои приложения из Apple App Store и Google Play Store после того, как они были лишены приоритета. В течение долгого времени команда Бетти Крокер предпочитала добавлять новые функции на мобильный сайт вместо приложений для iOS/Android. Техническая платформа, на которой были созданы приложения iOS/Android, устарела, и у компании не было ресурсов для поддержки обновления и поддержки приложений в дальнейшем. Веб-приложение также было объективно более объемным с точки зрения трафика, более современным и простым в улучшении.

Однако в приложениях для iOS/Android была одна убийственная функция , которая понравилась пользователям:

Совет от кулинаров-миллениалов: мобильное приложение @BettyCrocker не тускнеет и не блокируется, когда вы следуете рецепту. — @AvaBeilke

80% людей готовят с помощью устройства на кухне, но затемнение и блокировка экрана — проблема. Что сделала @BettyCrocker ? Обновлено их приложение, чтобы оно НЕ тускнело, когда пользователи читают рецепт. — @Кэти Твиди

Внедрение потрясающей функции в Интернет с помощью Wake Lock API

При готовке на устройстве нет ничего более неприятного, чем прикасаться к экрану грязными руками или даже носом, когда экран выключается. Бетти Крокер задалась вопросом, как они могли бы перенести потрясающую функцию своих приложений для iOS/Android в веб-приложение. Именно тогда они узнали о Project Fugu и API Wake Lock .

Человек месит тесто на кухонном столе, покрытом мукой.

API Wake Lock позволяет предотвратить затемнение или блокировку экрана устройства. Эта возможность открывает новые возможности, для которых до сих пор требовалось приложение iOS/Android. API Wake Lock снижает потребность в хакерских и потенциально энергоемких обходных путях.

Запрос блокировки пробуждения

Чтобы запросить блокировку пробуждения, вам необходимо вызвать метод navigator.wakeLock.request() , который возвращает объект WakeLockSentinel . Вы будете использовать этот объект в качестве контрольного значения . Браузер может отклонить запрос по разным причинам (например, из-за слишком низкого заряда батареи), поэтому рекомендуется заключать вызов в оператор try…catch .

Снятие блокировки пробуждения

Вам также нужен способ снять блокировку пробуждения, что достигается путем вызова метода release() объекта WakeLockSentinel . Если вы хотите автоматически снять блокировку пробуждения по истечении определенного периода времени, вы можете использовать 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.

После того, как прототип оказался полезным, они разработали компонент Vue.js , который можно было использовать во всех их брендах ( BettyCrocker , Pillsbury и Tablespoon ). Несмотря на то, что только у Бетти Крокер были приложения для iOS и Android, эти три сайта имеют общую базу кода, поэтому они смогли реализовать компонент один раз и развернуть его повсюду, как показано на скриншотах ниже.

Переключатель блокировки пробуждения BettyCrocker.com
Переключатель блокировки пробуждения BettyCrocker.com.
Переключатель блокировки пробуждения Pillsbury.com
Переключатель блокировки пробуждения Pillsbury.com.
Переключатель блокировки пробуждения Tablespoon.com
Переключатель блокировки пробуждения Tablespoon.com.

При разработке компонента на основе модернизированного фреймворка нового сайта большое внимание уделялось слою ViewModel паттерна MVVM . Команда также разработала программу с учетом совместимости, чтобы обеспечить функциональность устаревших и новых платформ сайта.

Чтобы отслеживать видимость и удобство использования, Бетти Крокер интегрировала аналитическое отслеживание основных событий в жизненном цикле блокировки. Команда использовала управление функциями для развертывания компонента блокировки пробуждения на одном сайте для первоначального развертывания в рабочей среде, а затем развернула эту функцию на остальных сайтах после мониторинга использования и состояния страниц. Они продолжают отслеживать данные аналитики на основе использования этого компонента.

В целях безопасности для пользователей команда создала принудительный тайм-аут для отключения блокировки пробуждения после одного часа бездействия. Окончательная реализация, на которой они остановились, заключалась в краткосрочном переключении на всех страницах рецептов на их сайтах. В долгосрочной перспективе они планируют изменить вид страницы с рецептами.

Контейнер блокировки следа

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 был развернут на всех трех сайтах и ​​показал отличные результаты. За период с 10 декабря 2019 г. по 10 января 2020 г. BettyCrocker.com сообщил следующие показатели:

  • Из всех пользователей Betty Crocker с браузером, совместимым с Wake Lock API, 3,5% сразу включили эту функцию, что сделало ее одним из пяти самых популярных действий.
  • Продолжительность сеанса у пользователей, включивших блокировку пробуждения, была в 3,1 раза больше, чем у пользователей, которые этого не сделали.
  • Показатель отказов для пользователей, которые включили функцию блокировки пробуждения, был на 50% ниже, чем для тех, кто не использовал функцию блокировки пробуждения.
  • Показатели покупательского намерения у пользователей Wake Lock были примерно на 300% выше, чем у всех пользователей.

3,1 ×

Более длительная продолжительность сеанса

50 %

Более низкий показатель отказов

300 %

Более высокие показатели покупательского намерения

Выводы

Бетти Крокер добилась фантастических результатов, используя Wake Lock API. Вы можете протестировать эту функцию самостоятельно, найдя свой любимый рецепт на любом из их сайтов ( BettyCrocker , Pillsbury или Tablespoon ) и включив переключатель «Не гаснуть экран во время приготовления ».

Варианты использования блокировки слежения не ограничиваются сайтами с рецептами. Другими примерами являются приложения для посадочных талонов или билетов, которые должны держать экран включенным до тех пор, пока штрих-код не будет отсканирован, приложения в стиле киоска, которые поддерживают экран включенным постоянно, или веб-приложения для презентаций, которые не позволяют экрану переходить в спящий режим во время презентации.

Мы собрали все, что вам нужно знать об API Wake Lock, в подробной статье на этом самом сайте. Приятного чтения и приятной готовки!

Благодарности

Фотография человека, месящего тесто, любезно предоставлена ​​Джулианом Хохгесангом на Unsplash .