Studium przypadku dotyczące Wake Lock API: wzrost wskaźników zamiaru zakupu o 300% w witrynie BettyCrocker.com

Nie ma nic gorszego niż wyłączenie ekranu w trakcie gotowania. Dowiedz się, jak strona kulinarna BettyCrocker.com wykorzystała interfejs Wake Lock API, aby temu zapobiec.

Od prawie 100 lat firma Betty Crocker jest w Stanach Zjednoczonych źródłem nowoczesnych instrukcji gotowania i sprawdzonych przepisów. Uruchomiona w 1997 r. witryna BettyCrocker.com ma obecnie ponad 12 milionów użytkowników miesięcznie. Po wdrożeniu interfejsu Wake Lock API wskaźniki zamiarów zakupu były o około 300% wyższe w przypadku użytkowników korzystających z Wake Lock w porównaniu ze wszystkimi użytkownikami.

wycofane aplikacje na iOS i Androida;

W 2014 roku aplikacje zostały wydane z wielkim hukiem, ale niedawno firma Betty Crocker wycofała je ze sklepów Apple App Store i Google Play Store, ponieważ straciły one na znaczeniu. Przez długi czas zespół Betty Crocker wolał dodawać nowe funkcje do witryny mobilnej niż do aplikacji na iOS lub Androida. Platforma techniczna, na której zostały utworzone aplikacje na iOS i Androida, była już nieaktualna, a firma nie miała zasobów, aby w dalszym ciągu aktualizować i utrzymywać aplikacje. Aplikacja internetowa miała też obiektywnie większą liczbę wizyt, była bardziej nowoczesna i łatwiejsza do ulepszania.

Aplikacje na iOS i Androida miały jednak jedną niesamowitą funkcję, którą użytkownicy bardzo polubili:

Wskazówka dla milenialsów: aplikacja mobilna @BettyCrocker nie przyciemnia się ani nie blokuje podczas gotowania według przepisu. –@AvaBeilke

80% osób gotuje w kuchni z urządzeniem, ale przyciemnianie i blokowanie ekranu stanowi dla nich problem. Co zrobił @BettyCrocker? Zaktualizowana aplikacja, która NIE przyciemnia ekranu, gdy użytkownicy korzystają z przepisu. –@KatieTweedy

Wprowadzanie w sieci funkcji otwierającej nowe możliwości dzięki interfejsowi Wake Lock API

Podczas gotowania na urządzeniu nic nie jest tak frustrujące, jak dotykanie ekranu brudnymi rękami lub nawet nosem, gdy ekran jest wyłączony. Betty Crocker zastanawiała się, jak przenieść najlepszą funkcję swoich aplikacji na iOS/Androida do aplikacji internetowej. Wtedy dowiedziała się o projekcie Fugu i interfejsie Wake Lock API.

Osoba zagniatająca ciasto na stole pokrytym mąką

Interfejs Wake Lock API umożliwia zapobieganie przyciemnianiu lub blokowaniu ekranu urządzenia. Ta funkcja umożliwia korzystanie z nowych możliwości, które do tej pory wymagały aplikacji na iOS lub Androida. Interfejs Wake Lock API ogranicza potrzebę stosowania obejść i potencjalnie energochłonnych obejść.

Przesyłanie prośby o blokadę uśpienia

Aby zażądać blokady aktywacji, wywołaj metodę navigator.wakeLock.request(), która zwraca obiekt WakeLockSentinel. Użyjesz tego obiektu jako wartości sterującej. Przeglądarka może odrzucić żądanie z różnych powodów (np. gdy poziom naładowania baterii jest zbyt niski), dlatego zalecamy umieszczenie wywołania w instrukcji try…catch.

Zwolnienie blokady uśpienia

Musisz też mieć możliwość zwolnienia blokady aktywacji, co osiąga się przez wywołanie metody release() obiektu WakeLockSentinel. Jeśli chcesz automatycznie zwolnić blokadę po upływie określonego czasu, możesz użyć window.setTimeout(), aby wywołać release(), jak pokazano w przykładzie poniżej.

// 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);

Implementacja

Dzięki nowej aplikacji internetowej użytkownicy powinni mieć możliwość łatwego poruszania się po przepisie, wykonywania kroków, a nawet opuszczania aplikacji bez blokowania ekranu. Aby to osiągnąć, zespół najpierw utworzył szybki prototyp interfejsu jako model koncepcyjny i narzędzia do zbierania opinii na temat UX.

Gdy okazało się, że prototyp jest przydatny, firma zaprojektowała element Vue.js, który można było udostępnić wszystkim markom (BettyCrocker, Pillsbury i Tablespoon). Chociaż tylko Betty Crocker miała aplikacje na iOS i Androida, wszystkie 3 strony korzystały z podstawy kodu, więc można było wdrożyć komponent raz i w ten sposób udostępnić go wszędzie.

Przełącznik blokady uśpienia na stronie BettyCrocker.com
Przełącznik blokady uśpienia na stronie BettyCrocker.com.
Przełącznik blokady uśpienia na stronie Pillsbury.com
Przełącznik blokady uśpienia na stronie Pillsbury.com.
Blokada uśpienia w witrynie Tablespoon.com
Przełącznik blokady uśpienia na stronie Tablespoon.com

Podczas tworzenia komponentu na podstawie zmodernizowanego frameworku nowej witryny szczególny nacisk położono na warstwę ViewModel w schemacie MVVM. Programiści zadbali też o interoperacyjność, aby umożliwić korzystanie z funkcji w starszych i nowych frameworkach witryny.

Aby śledzić widoczność i użyteczność, firma Betty Crocker zintegrowała śledzenie analityczne w przypadku kluczowych zdarzeń w cyklu życia blokady ekranu. Zespół wykorzystał funkcję zarządzania, aby wdrożyć komponent blokady wybudzania w jednej witrynie na potrzeby wstępnego wdrożenia w wersji produkcyjnej, a potem wdrożył tę funkcję w pozostałych witrynach po zweryfikowaniu wykorzystania i stanu stron. Nadal będą one monitorować dane analityczne na podstawie użycia tego komponentu.

Jako zabezpieczenie dla użytkowników zespół wprowadził wymuszony limit czasu, aby wyłączyć blokadę po upływie godziny braku aktywności. Ostatecznie zdecydowali się na zastosowanie na krótki czas przełącznika na wszystkich stronach z przepisami w ich witrynach. W długofalowej perspektywie planujemy odświeżenie strony z przepisami.

Kontener blokady wybudzania

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

Komponent blokady uśpienia

<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>

Wyniki

Komponent Vue.js został wdrożony we wszystkich 3 witrynach i przyniósł znakomite efekty. W okresie od 10 grudnia 2019 r. do 10 stycznia 2020 r. strona BettyCrocker.com odnotowała te dane:

  • Spośród wszystkich użytkowników Betty Crocker, którzy korzystają z przeglądarki zgodnej z interfejsem Wake Lock API, 3,5% z nich od razu włączyło tę funkcję, co czyni ją jedną z 5 najpopularniejszych czynności.
  • Czas trwania sesji użytkowników, którzy włączyli blokadę aktywacji, był 3,1 raza dłuższy niż w przypadku użytkowników, którzy tego nie zrobili.
  • Wskaźnik współczynnika odrzuceń w przypadku użytkowników, którzy włączyli funkcję blokady ekranu, był niższy o 50% niż w przypadku użytkowników, którzy z niej nie korzystali.
  • Wskaźniki zamiaru dokonania zakupu były o około 300% wyższe w przypadku użytkowników, którzy korzystali z blokady ekranu, niż w przypadku wszystkich użytkowników.

3.1×

dłuższy czas trwania sesji,

50%

Obniż współczynnik odrzuceń

300%

Wzrost wskaźników zamiaru zakupu

Podsumowanie

Betty Crocker uzyskała świetne wyniki dzięki interfejsowi Wake Lock API. Możesz przetestować tę funkcję, wyszukując ulubiony przepis na dowolnej stronie (BettyCrocker, Pillsbury lub Tablespoon) i włączając przełącznik Nie ściemniaj ekranu podczas gotowania.

Blokady aktywacji nie ograniczają się do witryn z przepisami. Inne przykłady to aplikacje do obsługi kart pokładowych lub biletów, które muszą utrzymywać ekran włączony do momentu zeskanowania kodu kreskowego, aplikacje w stylu kiosku, które utrzymują ekran włączony przez cały czas, a także aplikacje do prezentacji internetowych, które nie pozwalają ekranowi przejść w stan uśpienia podczas prezentacji.

W tym artykule na tej stronie znajdziesz wszystko, co musisz wiedzieć o Wake Lock API. Miłej lektury i smażenia!

Podziękowania

Zdjęcie osoby ugniatającej ciasto udostępnione przez Juliana Hochgesanga na Unsplash.