300% Erhöhung der Kaufabsichtsindikatoren auf BettyCrocker.com

Nada es peor cuando se cocina con un dispositivo móvil que su pantalla se apaga en medio de un paso de receta. Descubra cómo el sitio de cocina BettyCrocker.com utilizó la API de Wake Lock para evitar que esto suceda.

19. Mai 2020
Aktualisiert 19. Mai 2020

Betty Crocker ist seit fast einem Jahrhundert Amerikas Quelle für modernen Kochunterricht und vertrauenswürdige Rezeptentwicklung. 1997 gestartet, seine Website BettyCrocker.com
Heute werden monatlich mehr als 12 Millionen Besucher empfangen. Nach ihnen implementierte die Wake Lock API, es ist
Indikatoren von
Kaufversuch
waren ungefähr 300% höher für Wake-Lock-Benutzer im Vergleich zu allen Benutzern.

Die pensionierten iOS- und Android-Apps

Freigegeben an viel Fanfare En 2014, Betty Crocker recientemente sacó sus aplicaciones de Apple Appstore y Google Play Store después de haber sido despriorizadas. Durante mucho tiempo, el equipo de Betty Crocker ha preferido agregar nuevas funciones al sitio móvil en lugar de las aplicaciones de iOS / Android. La plataforma técnica en la que se crearon las aplicaciones de iOS / Android estaba desactualizada y la empresa no tenía los recursos para respaldar la actualización y el mantenimiento de las aplicaciones en el futuro. La aplicación Netz también era objetivamente mucho más grande en cuanto a der Verkehr, más moderna y más fácil de mejorar.

IOS / Android Apps hatten eine Killer-Feature, die seine Benutzer jedoch liebten:

Consejo profesional de cocina tausendjährig: das @BettyCrocker Die mobile App wird nicht gedimmt oder stürzt ab, wenn Sie einem Rezept folgen. - -@ AvaBeilke

El 80% de las Personen cocinan con un dispositivo en la cocina, pero la atenuación y el bloqueo de la pantalla son un problema. Que hizo @BettyCrocker machen? Ihre App wurde aktualisiert, sodass sie NICHT abgeblendet ist, wenn Benutzer ein Rezept verwenden. - -@Katie_Tweedy_

Bringen Sie die Killer-Funktion mit der Wake Lock-API ins Web

Wenn Sie mit einem Gerät kochen, gibt es nichts Frustrierenderes, als den Bildschirm mit schmutzigen Händen oder sogar der Nase berühren zu müssen, wenn sich der Bildschirm ausschaltet. Betty Crocker fragte sich, wie sie die Hauptfunktion ihrer iOS / Android-Apps auf die Web-App übertragen könnten. Dann fanden sie es heraus
Fugu-Projekt und die Wake Lock API.

Die Wake Lock-API bietet eine Möglichkeit, zu verhindern, dass das Gerät den Bildschirm dimmt oder sperrt. Diese Fähigkeit ermöglicht neue Erfahrungen, für die bisher eine iOS / Android-Anwendung erforderlich war. Die Wake Lock-API reduziert den Bedarf an Raubkopien und potenziell stromhungrigen Lösungen.

Fordern Sie eine Aktivierungssperre an

Um eine Aktivierungssperre anzufordern, müssen Sie anrufen navigator.wakeLock.request () Methode, die a zurückgibt WakeLockSentinel Objekt. Sie werden dieses Objekt als verwenden
Sentinel-Wert. El Browser puede rechazar la solicitud por varias razones (por ejemplo, porque la batería está demasiado baja), por lo que es una buena práctica envolver la llamada en un versuche ... zu fangen Aussage.

Aktivieren Sie eine Aktivierungssperre

Sie benötigen auch eine Möglichkeit, eine Aktivierungssperre aufzuheben, die durch Aufrufen erreicht wird Veröffentlichung () Methode von WakeLockSentinel Objekt. Wenn Sie die Aktivierungssperre nach Ablauf einer bestimmten Zeit automatisch aufheben möchten, können Sie sie verwenden window.setTimeout () anrufen Veröffentlichung (), wie im folgenden Beispiel gezeigt.

Lassen wakeLock = Null;

const requestWakeLock = asynchron () => {
try {
wakeLock = erwarten Navigator.wakeLock.request('Bildschirm');
wakeLock.addEventListener('release', () => {
console.Log('Wake Lock was released');
});
console.Log('Wake Lock is active');
} catch (err) {
console.Error(`${err.Süßkartoffel}, ${err.Botschaft}`);
}
};

erwarten requestWakeLock();
Fenster.setTimeout(() => {
wakeLock.release();
wakeLock = Null;
}, 5000);

Die Umsetzung

Con la nueva aplicación web, los usuarios deben poder navegar fácilmente a través de una receta, completar los pasos e incluso alejarse sin el bloqueo de la pantalla. Para lograr este Ziel, el equipo primero construyó un prototipo rápido de front-end como prueba de concepto y para recopilar información de UX.

Nachdem sich der Prototyp als nützlich erwiesen hatte, entwarfen sie eine
Vue.js Komponente
das könnte mit all deinen Marken geteilt werden (Bettycrocker,
Pillsburyy Esslöffel). Obwohl nur Betty Crocker über iOS- und Android-Apps verfügte, verfügen alle drei Websites über eine gemeinsame Codebasis, sodass sie die Komponente einmal und dann überall bereitstellen konnten, wie in den folgenden Screenshots gezeigt.

Bei der Entwicklung der Komponente auf der Grundlage des modernisierten Rahmens des neuen Standorts lag ein starker Fokus auf dem
ViewModel MVVM-Musterschicht. Das Team programmierte auch im Hinblick auf die Interoperabilität, um Funktionen in neuen und älteren Site-Frameworks zu ermöglichen.

Um die Sichtbarkeit und Benutzerfreundlichkeit zu verfolgen, integrierte Betty Crocker die analytische Verfolgung wichtiger Ereignisse in den Aktivierungssperr-Lebenszyklus. Das Team verwendete die Rollenverwaltung, um die Aktivierungssperrkomponente für die anfängliche Produktionsbereitstellung an einem einzelnen Standort bereitzustellen, und stellte die Funktion nach Überwachung des Seitenstatus und der Verwendung für die übrigen Standorte bereit. Sie überwachen weiterhin Analysedaten basierend auf der Verwendung dieser Komponente.

Aus Sicherheitsgründen für Benutzer erstellte das Team eine erzwungene Zeitüberschreitung, um die Aktivierungssperre nach einer Stunde Inaktivität zu deaktivieren. Die endgültige Implementierung, für die sie sich entschieden hatten, war kurzfristig ein Kippschalter auf allen Rezeptseiten ihrer Websites. Auf lange Sicht sehen sie eine überarbeitete Rezeptseitenansicht.

Der Wake-Lock-Container

var wakeLockControl = () => {
Rückkehr importieren( './wakeLock');
};
Export Standard {
components: {
wakeLockControl: wakeLockControl,
},
Daten() {
Rückkehr {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: Funktion(config) {
Este.config = config || {};
wenn ('wakeLock' im Navigator && 'request' im Navigator.wakeLock) {
Este.wakeLockComponent = 'wakeLockControl';
} else {
console.Log('Browser not supported');
}
},
},
};

Die Aktivierungssperrkomponente

<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');
this.$_handleAbortTimer();
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;
this.$_handleAbortTimer();
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 (this.timerId !== 0) {
clearTimeout(this.timerId);
this.timerId = 0;
}
if (this.isChecked) {
this.timerId = setTimeout(
this.$_releaseWakeLock,
this.settingsInternal.timeoutDurationMs,
);
}
},
$_handleVisibilityChange: function() {
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 an allen drei Standorten implementiert und lieferte hervorragende Ergebnisse. Im Zeitraum vom 10. Dezember 2019 bis zum 10. Januar 2020 meldete BettyCrocker.com die folgenden Kennzahlen:

• Von allen Betty Crocker-Benutzern mit einem Wake Lock API-kompatiblen Browser hat der 3.5% die Funktion sofort aktiviert und sie zu einer der Top 5-Aktionen gemacht.
• Die Sitzungsdauer für Benutzer, die die Aktivierungssperre aktiviert haben, war 3,1-mal länger als für Benutzer, die dies nicht getan haben.
• Die Absprungrate para los usuarios que habilitaron el bloqueo de activación fue un 50% más baja que para aquellos que no utilizan la función de bloqueo de activación.
• Die Kaufabsichtsindikatoren waren für Wake-Lock-Benutzer im Vergleich zu allen Benutzern um ca. 300% höher.

Schlussfolgerungen

Betty Crocker hat mit der Wake Lock API fantastische Ergebnisse erzielt. Sie können die Funktion selbst testen, indem Sie auf einer ihrer Websites nach Ihrem Lieblingsrezept suchen (Bettycrocker,
Pillsburyoder Esslöffel) und aktivieren die Verhindern Sie, dass der Bildschirm beim Kochen dunkel wird Hebel.

Los casos de uso de los wake locks no se detienen en los sitios de recetas. Otros ejemplos son las aplicaciones de tarjetas de embarque o boletos que necesitan mantener la pantalla encendida hasta que se haya escaneado el código de Riegel, las aplicaciones de estilo quiosco que mantienen la pantalla encendida continuamente o las aplicaciones de presentación basadas en la web que evitan que la pantalla se quede inactiva durante una presentación.

In einem umfassenden Artikel auf dieser Website haben wir alles zusammengestellt, was Sie über die Wake Lock-API wissen müssen. Viel Spaß beim Lesen und viel Spaß beim Kochen!

Vielen Dank

das Person, die Teig knetet Foto mit freundlicher Genehmigung von
Julian Hochgesang
im Unsplash.