Augmentation de 300% des indicateurs d'intention d'achat sur 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
Mise à jour 19 mai 2020

Depuis près d'un siècle, Betty Crocker est la source américaine d'enseignement de la cuisine moderne et de développement de recettes fiables. Lancé en 1997, son site BettyCrocker.com
aujourd'hui, il reçoit plus de 12 millions de visiteurs par mois. Après eux implémenté l'API Wake Lock, son
indicateurs de
tentative d'achat
étaient environ 300% plus élevés pour les utilisateurs de verrouillage de réveil par rapport à tous les utilisateurs.

Les applications iOS et Android retirées

Libéré à beaucoup de fanfare En 2014, Betty Crocker recientemente sacó sus aplicaciones de Apple Magasin d'applications 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 la toile también era objetivamente mucho más grande en cuanto a circulation, más moderna y más fácil de mejorar.

Les applications IOS / Android avaient un fonctionnalité tueur, cependant, que ses utilisateurs ont adoré:

Consejo profesional de cocina millénaire: el @BettyCrocker L'application mobile ne s'assombrit pas et ne plante pas lorsque vous suivez une recette. -@AvaBeilke

El 80% de las gens cocinan con un dispositivo en la cocina, pero la atenuación y el bloqueo de la pantalla son un problema. Que hizo @BettyCrocker Fabriquer? Mise à jour de votre application pour qu'elle ne soit PAS grisée lorsque les utilisateurs sont sur une recette. -@Katie_Tweedy_

Apporter la fonctionnalité tueur sur le Web avec l'API Wake Lock

Lorsque vous cuisinez avec un appareil, il n'y a rien de plus frustrant que d'avoir à toucher l'écran avec des mains sales ou même votre nez lorsque l'écran s'éteint. Betty Crocker s'est demandé comment ils pouvaient transférer la fonctionnalité principale de leurs applications iOS / Android vers l'application Web. C'est là qu'ils ont découvert
Projet Fugu et l'API Wake Lock.

L'API Wake Lock fournit un moyen d'empêcher l'appareil de s'assombrir ou de verrouiller l'écran. Cette capacité permet de nouvelles expériences qui, jusqu'à présent, nécessitaient une application iOS / Android. L'API Wake Lock réduit le besoin de solutions piratées et potentiellement gourmandes en énergie.

Demander un verrouillage d'activation

Pour demander un verrouillage d'activation, vous devez appeler navigator.wakeLock.request () méthode qui renvoie un WakeLockSentinel objet. Vous utiliserez cet objet comme
valeur sentinelle. Il le navigateur 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 essayer… attraper déclaration.

Libérer un verrou d'activation

Vous avez également besoin d'un moyen de libérer un verrou d'activation, ce qui est accompli en appelant Libération () méthode de WakeLockSentinel objet. Si vous souhaitez libérer automatiquement le verrou d'activation après un certain laps de temps, vous pouvez utiliser window.setTimeout () appeler Libération (), comme illustré dans l'exemple suivant.

laisser wakeLock = nul;

const requestWakeLock = asynchrone () => {
try {
wakeLock = attendre navigateur.wakeLock.request('écran');
wakeLock.addEventListener('release', () => {
console.Journal('Wake Lock was released');
});
console.Journal('Wake Lock is active');
} catch (err) {
console.Erreur(`${err.patate douce}, ${err.un message}`);
}
};

attendre requestWakeLock();
la fenêtre.setTimeout(() => {
wakeLock.release();
wakeLock = nul;
}, 5000);

La mise en oeuvre

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 objectif, el equipo primero construyó un prototipo rápido de front-end como prueba de concepto y para recopilar información de UX.

Après que le prototype se soit avéré utile, ils ont conçu un
Composant Vue.js
qui pourrait être partagé avec toutes vos marques (Bettycrocker,
Pillsburyy Cuillerée à soupe). Bien que seule Betty Crocker disposait d'applications iOS et Android, les trois sites ont une base de code partagée, ils ont donc pu déployer le composant une fois, puis le déployer partout, comme le montrent les captures d'écran ci-dessous.

Lors du développement du composant basé sur le cadre modernisé du nouveau site, l'accent a été mis sur la
VoirModèle Couche de motif MVVM. L'équipe a également programmé en gardant à l'esprit l'interopérabilité pour activer la fonctionnalité dans les cadres de site nouveaux et hérités.

Pour suivre la visibilité et la convivialité, Betty Crocker a intégré le suivi analytique des événements majeurs du cycle de vie du verrou d'activation. L'équipe a utilisé la gestion des rôles pour déployer le composant Activation Lock sur un site unique pour le déploiement de production initial, puis a déployé la fonctionnalité sur le reste des sites après avoir surveillé l'état et l'utilisation de la page. Ils continuent de surveiller les données analytiques basées sur l'utilisation de ce composant.

Par mesure de sécurité pour les utilisateurs, l'équipe a créé un délai d'expiration forcé pour désactiver le verrouillage d'activation après une heure d'inactivité. La mise en œuvre finale qu'ils ont choisie était, à court terme, un interrupteur à bascule sur toutes les pages de recettes de leurs sites. À long terme, ils voient une vue de page de recette remaniée.

Le conteneur de réveil

var wakeLockControl = () => {
revenir importer( './wakeLock');
};
exportation défaut {
components: {
wakeLockControl: wakeLockControl,
},
Les données() {
revenir {
config: {},
wakeLockComponent: '',
};
},
methods: {
init: une fonction(config) {
Este.config = config || {};
si ('wakeLock' dans navigateur && 'request' dans navigateur.wakeLock) {
Este.wakeLockComponent = 'wakeLockControl';
} else {
console.Journal('Browser not supported');
}
},
},
};

Le composant de verrouillage d'activation

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

Résultats

Le composant Vue.js a été implémenté sur les trois sites et a donné d'excellents résultats. Au cours de la période du 10 décembre 2019 au 10 janvier 2020, BettyCrocker.com a signalé les métriques suivantes:

• Parmi tous les utilisateurs de Betty Crocker disposant d'un navigateur compatible avec l'API Wake Lock, le 3.5% a activé la fonctionnalité immédiatement, ce qui en fait l'une des 5 principales actions.
• La durée de session pour les utilisateurs qui ont activé le verrouillage d'activation était 3,1 fois plus longue que pour les utilisateurs qui ne l'ont pas fait.
• La taux de rebond 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.
• Les indicateurs d'intention d'achat étaient environ 300% plus élevés pour les utilisateurs de verrouillage de réveil par rapport à tous les utilisateurs.

Conclusions

Betty Crocker a obtenu des résultats fantastiques avec l'API Wake Lock. Vous pouvez tester la fonctionnalité vous-même en recherchant votre recette préférée sur l'un de leurs sites (Bettycrocker,
Pillsburyou Cuillerée à soupe) et en activant le Empêchez l'écran de s'assombrir pendant la cuisson levier.

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 barres, 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.

Nous avons rassemblé tout ce que vous devez savoir sur l'API Wake Lock dans un article complet sur ce site même. Bonne lecture et bonne cuisine!

Merci

Les personne en train de pétrir la pâte photo gracieuseté de
Julian Hochgesang
au Unsplash.