Fallstudie zur Wake Lock API: Steigerung der Kaufabsicht um 300% auf BettyCrocker.com

Es gibt nichts Schlimmeres, als wenn das Display Ihres Mobilgeräts mitten in einem Rezeptschritt ausgeschaltet wird. Hier erfahren Sie, wie die Kochwebsite BettyCrocker.com mithilfe der Wake Lock API dieses Problem verhindert hat.

Seit fast einem Jahrhundert ist Betty Crocker in den USA die Anlaufstelle für moderne Kochanleitungen und bewährte Rezeptentwicklung. Die 1997 gestartete Website BettyCrocker.com verzeichnet heute mehr als 12 Millionen Besucher pro Monat. Nachdem das Unternehmen die Wake Lock API implementiert hatte, waren die Indikatoren für die Kaufabsicht bei Nutzern mit Wake Lock im Vergleich zu allen Nutzern um etwa 300% höher.

Die eingestellten iOS- und Android-Apps

Betty Crocker, die 2014 mit viel Tamtam eingeführt wurde, hat ihre Apps vor Kurzem aus dem Apple App Store und dem Google Play Store entfernt, nachdem sie nicht mehr priorisiert wurden. Lange Zeit hat das Betty Crocker-Team neue Funktionen lieber der mobilen Website als den iOS-/Android-Apps hinzugefügt. Die technische Plattform, auf der die iOS-/Android-Apps erstellt wurden, war veraltet und das Unternehmen hatte nicht die Ressourcen, um die Apps in Zukunft zu aktualisieren und zu verwalten. Die Web-App hatte objektiv gesehen auch viel mehr Zugriffe, war moderner und einfacher zu erweitern.

Die iOS-/Android-Apps hatten jedoch eine Killerfunktion, die bei den Nutzern sehr beliebt war:

Profi-Tipp für Millennials: Die mobile App von @BettyCrocker wird nicht gedimmt oder gesperrt, wenn Sie ein Rezept befolgen. –@AvaBeilke

80% der Nutzer kochen mit einem Gerät in der Küche, aber das Dimmen und Sperren des Displays ist ein Problem. Was hat @BettyCrocker getan? Die App wurde so aktualisiert, dass sie NICHT gedimmt wird, wenn sich Nutzer in einem Rezept befinden. –@KatieTweedy

Die Killerfunktion mit der Wake Lock API im Web

Beim Kochen mit einem Gerät ist es besonders frustrierend, wenn das Display ausgeschaltet ist und man es mit schmutzigen Händen oder sogar mit der Nase berühren muss. Betty Crocker fragte sich, wie sie die Killerfunktion ihrer iOS-/Android-Apps auf die Webanwendung übertragen könnte. Dabei erfuhr sie von Project Fugu und der Wake Lock API.

Eine Person knetet Teig auf einem mit Mehl bedeckten Küchentisch

Mit der Wake Lock API können Sie verhindern, dass das Gerät den Bildschirm dimmt oder sperrt. Diese Funktion ermöglicht neue Funktionen, für die bisher eine iOS-/Android-App erforderlich war. Mit der Wake Lock API müssen weniger komplizierte und potenziell energieintensive Umgehungen verwendet werden.

Wakelock anfordern

Wenn Sie eine Wakelock anfordern möchten, müssen Sie die navigator.wakeLock.request()-Methode aufrufen, die ein WakeLockSentinel-Objekt zurückgibt. Sie verwenden dieses Objekt als Grenzwert. Der Browser kann die Anfrage aus verschiedenen Gründen ablehnen (z. B. weil der Akkustand zu niedrig ist). Daher empfiehlt es sich, den Aufruf in eine try…catch-Anweisung einzubetten.

Wakelock freigeben

Außerdem benötigen Sie eine Möglichkeit, eine Wakelock aufzuheben. Dazu rufen Sie die release()-Methode des WakeLockSentinel-Objekts auf. Wenn Sie die Sperre nach Ablauf einer bestimmten Zeit automatisch aufheben möchten, können Sie window.setTimeout() verwenden, um release() aufzurufen, wie im folgenden Beispiel gezeigt.

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

Implementierung

Mit der neuen Webanwendung sollten Nutzer einfach durch ein Rezept navigieren, Schritte ausführen und sogar weggehen können, ohne dass der Bildschirm gesperrt wird. Um dieses Ziel zu erreichen, erstellte das Team zuerst einen schnellen Front-End-Prototyp als Proof of Concept und um UX-Feedback zu erhalten.

Nachdem sich der Prototyp als nützlich erwiesen hatte, entwarf das Team eine Vue.js-Komponente, die für alle Marken (BettyCrocker, Pillsbury und Tablespoon) verwendet werden konnte. Auch wenn nur Betty Crocker iOS- und Android-Apps hatte, teilen sich die drei Websites eine gemeinsame Codebasis. So konnte die Komponente einmal implementiert und überall bereitgestellt werden, wie in den folgenden Screenshots zu sehen ist.

BettyCrocker.com-Wakelock-Schalter
BettyCrocker.com-Wakelock-Schalter
Wakelock-Ein/Aus-Schaltfläche für Pillsbury.com
Wakelock-Schalter von Pillsbury.com
Tablespoon.com-Wakelock-Schalter
Wakelock-Schalter von Tablespoon.com

Bei der Entwicklung der Komponente basierend auf dem modernisierten Framework der neuen Website wurde ein starker Fokus auf die ViewModel-Ebene des MVVM-Musters gelegt. Das Team hat auch die Interoperabilität berücksichtigt, um Funktionen in alten und neuen Frameworks der Website zu ermöglichen.

Um die Sichtbarkeit und Nutzerfreundlichkeit im Blick zu behalten, hat Betty Crocker Analyse-Tracking für wichtige Ereignisse im Lebenszyklus der Sperre für die Bildschirmaktivität integriert. Das Team nutzte die Funktion zum Feature-Management, um die Wakelock-Komponente für das erste Produktions-Roll-out auf einer einzelnen Website bereitzustellen. Nachdem die Nutzung und der Seitenstatus überwacht wurden, wurde die Funktion auf den restlichen Websites bereitgestellt. Sie überwachen weiterhin Analysedaten basierend auf der Nutzung dieser Komponente.

Als Sicherheitsmaßnahme für Nutzer hat das Team ein erzwungenes Zeitlimit festgelegt, um die Sperre nach einer Stunde Inaktivität zu deaktivieren. Die endgültige Implementierung, für die sie sich entschieden haben, war kurzfristig ein Ein-/Aus-Schalter auf allen Rezeptseiten ihrer Websites. Langfristig soll es eine überarbeitete Rezeptansicht geben.

Der Wakelock-Container

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

Komponente „Wakelock“

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

Ergebnisse

Die Vue.js-Komponente wurde auf allen drei Websites bereitgestellt und hat hervorragende Ergebnisse erzielt. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 wurden für BettyCrocker.com die folgenden Messwerte erfasst:

  • Von allen Betty Crocker-Nutzern mit einem Browser, der mit der Wake Lock API kompatibel ist, haben 3,5% die Funktion sofort aktiviert.Damit gehört sie zu den Top 5-Aktionen.
  • Die Sitzungsdauer von Nutzern, die die Aktivierung des Ruhezustands aktiviert hatten, war 3,1-mal länger als die von Nutzern, die dies nicht getan hatten.
  • Die Ausstiegsrate bei Nutzern, die die Sperre aktiviert hatten, war 50% niedriger als bei Nutzern, die die Funktion nicht nutzten.
  • Die Indikatoren für die Kaufabsicht waren bei Nutzern mit aktiviertem Ruhemodus etwa 300% höher als bei allen Nutzern.

3.1×

Längere Sitzungsdauer

50 %

Niedrigere Absprungrate

300 %

Höhere Kaufabsicht

Ergebnisse

Betty Crocker konnte mit der Wake Lock API fantastische Ergebnisse erzielen. Sie können die Funktion selbst testen, indem Sie auf einer der Websites (BettyCrocker, Pillsbury oder Tablespoon) nach Ihrem Lieblingsrezept suchen und die Option Display bleibt beim Kochen an aktivieren.

Anwendungsfälle für Wakelocks sind nicht auf Rezeptwebsites beschränkt. Weitere Beispiele sind Bordkarten- oder Ticket-Apps, bei denen der Bildschirm eingeschaltet bleiben muss, bis der Barcode gescannt wurde, Kioskauflagen, bei denen der Bildschirm dauerhaft eingeschaltet bleibt, oder webbasierte Präsentations-Apps, die verhindern, dass der Bildschirm während einer Präsentation in den Ruhemodus wechselt.

In einem umfassenden Artikel auf dieser Website haben wir alles Wissenswerte zur Wake Lock API zusammengestellt. Viel Spaß beim Lesen und Kochen!

Danksagungen

Das Foto der Person, die Teig knetet, stammt von Julian Hochgesang auf Unsplash.