Wake Lock API 우수사례: BettyCrocker.com에서 구매 의도 지표 300% 증가

휴대기기로 요리할 때 화면이 꺼지는 것보다 나쁜 것은 없습니다 추가할 수 있습니다. 요리 사이트 BettyCrocker.com이 Wake Lock API를 사용하여 이러한 현상을 예방한 방법을 알아보세요.

베티 크로커는 거의 한 세기 동안 미국의 현대 요리 강습 신뢰할 수 있는 레시피 개발을 기반으로 할 수 있습니다 1997년에 설립된 이 회사의 사이트인 BettyCrocker.com은 의 월간 방문자 수는 1,200만 명에 달합니다. Wake Lock API를 구현한 후 지표 구매 의도 300% 더 높았습니다.

지원 중단된 iOS 및 Android 앱

2014년에 상당히 커다란 팡파르를 선보였습니다. 베티 크로커는 최근 Apple App Store와 Google Play 스토어에서 앱을 삭제했습니다. 우선순위를 낮춘 후에 게재할 수 있습니다 오랫동안 Betty Crocker팀은 모바일 사이트에 새로운 기능을 추가하는 것을 선호했습니다. 를 사용하는 것이 좋습니다. iOS/Android 앱을 만들 때 사용한 기술 플랫폼은 구식이었으나 이 비즈니스에는 하여 앱 업데이트 및 유지 관리를 지원합니다. 웹 앱은 객관적으로 트래픽이 훨씬 크지만 더 현대적이고 쉽게 개선할 수 있습니다.

하지만 iOS/Android 앱에는 사용자가 만족스러워하는 킬러 기능이 한 가지 있었습니다.

밀레니얼 세대 요리 전문가 팁: @BettyCrocker 모바일 앱 레시피를 따라도 어둡거나 잠기지 않습니다. —@AvaBeilke

80% 의 사람들이 주방에서 기기로 요리를 하고 있지만 화면이 어두워지거나 잠깁니다. @BettyCrocker는 무엇을 했나요? 사용자가 레시피를 볼 때 어두워지지 않도록 앱을 업데이트했습니다. —@케이티트위디

Wake Lock API로 유용한 기능을 웹에서 구현

기기로 요리할 때 짜증나는 일도 없고요 화면이 꺼졌을 때 지저분한 손이나 코로 화면을 터치하는 것보다 더 수월합니다. Betty Crocker는 iOS/Android 앱의 강력한 기능을 포팅할 방법을 자문했습니다. 웹 앱으로 전달됩니다. 이 과정에서 Project FuguWake Lock API

밀가루로 덮인 식탁에서 반죽을 반죽하고 있는 사람

Wake Lock API는 기기가 잠기지 않도록 화면을 어둡게 하거나 잠그지 않습니다. 이 기능은 지금까지 iOS/Android 앱이 필요했던 새로운 환경을 지원합니다. Wake Lock API는 해킹과 전력 소모가 많은 임시 해결 방법의 필요성을 줄여줍니다.

wake lock 요청

wake lock을 요청하려면 navigator.wakeLock.request() 메서드를 호출해야 합니다. 이 메서드는 WakeLockSentinel 객체를 반환합니다. 이 객체는 센티널 값입니다. 브라우저는 다양한 이유로 요청을 거부할 수 있습니다. (예: 배터리 잔량이 너무 낮은 경우) 따라서 try…catch 문으로 호출을 래핑하는 것이 좋습니다.

wake lock 해제

또한 wake lock을 해제할 방법도 필요합니다. 이는 WakeLockSentinel 객체의 release() 메서드를 호출하여 실행됩니다. 일정 시간이 지난 후 자동으로 wake lock을 해제하려면 아래 예와 같이 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 앱을 가지고 있었지만 세 사이트에 공유 코드베이스가 있고 그래서 구성요소를 한 번만 구현하면 모든 곳에 배포할 수 있었습니다. 사용할 수 있습니다.

<ph type="x-smartling-placeholder">
</ph> BettyCrocker.com의 wake lock 전환
BettyCrocker.com의 wake lock 전환
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">Pillsbury.com wake lock 전환</ph>
Pillsbury.com의 wake lock 전환
를 통해 개인정보처리방침을 정의할 수 있습니다. <ph type="x-smartling-placeholder">
</ph> <ph type="x-smartling-placeholder">Tablespoon.com wake lock 전환</ph>
Tablespoon.com wake lock 전환

새 사이트의 현대화된 프레임워크를 기반으로 구성요소를 개발할 때 인간 편견과 MVVM 패턴의 ViewModel 레이어. 또한 팀은 상호 운용성을 염두에 두고 편성되었습니다. 사이트의 기존 프레임워크 및 새 프레임워크에서 기능을 사용할 수 있도록 지원합니다.

조회가능성과 사용성을 추적하기 위해 Betty Crocker는 애널리틱스 추적을 통합했습니다. 중요한 이벤트에 대해 이 설정을 사용합니다. 팀은 기능 관리를 활용하여 wake lock 구성요소를 배포했습니다. 단일 사이트에 배포하거나 사용량 및 페이지 상태를 모니터링한 후 나머지 사이트에 이 기능을 배포했습니다. 계속해서 이 구성요소의 사용을 기반으로 분석 데이터를 모니터링합니다.

사용자의 안전을 위해 팀은 강제 제한 시간을 만들었습니다. 을 설정하여, 1시간 동안 활동이 없으면 wake lock을 사용 중지합니다. 이들이 정착한 최종 구현은 는 단기적으로 사이트의 모든 레시피 페이지에 전환 스위치가 되었습니다. 향후에는 개편된 레시피 페이지 뷰를 구상할 것입니다.

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');
      }
    },
  },
};

wake lock 구성요소

<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와 호환되는 브라우저를 사용하는 모든 베티 크로커 사용자 중에서 3.5% 가 이 기능을 즉시 사용 설정하여 상위 5위 액션이 되었습니다.
  • wake lock을 사용 설정한 사용자의 세션 시간이 3.1배 더 깁니다. 그렇지 않은 사용자보다 30% 더 높습니다
  • wake lock을 사용하는 사용자의 이탈률은 50% 감소했습니다. 더 클 수 있습니다.
  • wake lock 사용자의 구매 의도 지표는 전체 사용자에 비해 약 300% 더 높았습니다.

3.1×

더 긴 세션 시간

50%

이탈률 감소

300%

높은 구매 의도 지표

결론

Betty Crocker는 Wake Lock API를 사용한 놀라운 결과를 확인했습니다. 사이트에서 좋아하는 레시피를 검색하여 기능을 직접 테스트할 수 있습니다. (BettyCrocker, Pillsbury 또는 Tablespoon) 요리하는 동안 화면이 어두워지지 않도록 방지 전환 버튼을 사용 설정합니다.

wake lock의 사용 사례는 레시피 사이트에서 멈추지 않습니다. 다른 예로는 화면을 켜진 상태로 유지해야 하는 탑승권 또는 티켓 앱이 있습니다. 코드를 스캔할 때까지, 화면을 계속 켜두는 키오스크 스타일 앱으로 또는 웹 기반 프레젠테이션 앱에서 사용할 수 없습니다.

Wake Lock API에 관해 알아야 할 모든 것을 정리했습니다. 이 사이트의 종합 문서에서 확인할 수 있습니다 즐겁게 독서하시고 즐거운 요리 시간 보내세요.

감사의 말씀

반죽을 반죽하는 사람 사진 제공: 줄리안 호게상 Unsplash를 참고하세요.