Augmentation de 300% des indicateurs d'intention d'achat sur BettyCrocker.com

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'applicationsConcepto de App Store¿Qué es la App Store?La App Store es la tienda de apps digitales de Apple. Disponible para usuarios de iOS y de Mac OS, consiste en una parcela de Internet donde pueden ingresar para explorar un enorme catálogo de software que solo puede funcionar en los dispositivos de la marca o con su sistema operativo.Las apps disponibles en esta tienda digital pueden ser tanto gratuitas como de Suite y Google Play StoreConcepto de Google Play Store¿Qué es Google Play Store?Google Play Store es la tienda de apps móviles para dispositivos con sistema operativo Android. Todo programa que se desarrolle con la finalidad de ser utilizado en smartphones o tablets que cuenten con el S.O. de Google ha de aparecer listado en el catálogo de esta tienda para garantizar su seguridad y la aprobación por parte de la compañía.Aún cuando nació con Suite 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 web también era objetivamente mucho más grande en cuanto a tráfico, 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¿Qué es un millennial?Generación inmediatamente posterior a la Generación X en la que se suele comprender a los nacidos entre 1982 y 2000 —aún cuando no existen un consenso sobre las fechas—. Esta generación se caracteriza por el uso intensivo de redes sociales, smartphones y un gran apego por la tecnología. Suite: el @BettyCrocker L'application mobile ne s'assombrit pas et ne plante pas lorsque vous suivez une recette. -@AvaBeilke

El 80% de las gensLas personas son personalidades imaginarias que representan a un determinado grupo objetivo. En el marketing online, las personas ayudan a entender mejor a los usuarios de un portal web o a los clientes de una tienda online. Concepto de personas Para que las personas puedan ejercer su efecto positivo, deben ser lo más detalladas viable. Esto conlleva un término exhaustiva de los grupos destinatarios para conseguir datos empíricos. La próxima Suite 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 navigateurUn navegador (además: browser) es una herramienta informática que te permite ver documentos y datos y navegar por la red. Los navegadores pueden mostrar distintos tipos de recursos de información; principalmente documentos HTML, a pesar de todo, además son posibles otros tipos de archivos y contenido multimedia, como PDF, JPEG, MPEG, GIF o el lenguaje de meta marcado. A través el uso de complementos especiales y la configuración respectivo, los Suite 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¿Qué es un objetivo?En marketing, un objetivo es el resultado que se pretende alcanzar en un periodo de tiempo, a través el uso de los recursos disponibles. Por tanto, se debe formular de una forma clara y hace falta que sea accesible y medible. Suite, 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 &ampConcepto de AMP¿Qué es el AMP o Accelerated Mobile Pages?El AMP, abreviatura de Accelerated Mobile Pages, es una propuesta que empezó a tomar forma en el año 2016 con la finalidad de mejorar la usabilidad, lectura y, en general, la experiencia de los usuarios de teléfono celular dentro de cualquier página web. Emprendida por Google con un aperturismo total (es de código abierto), lleva en activo desde entonces para facilitar Suite;& '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 rebondLa tasa de rebote, conocida en inglés como Bounce Rate, es el ratio entre las visitas que recibe un portal web y el número de visitantes que han abandonado el portal web en la primera página. Además se puede establecer el Tiempo de Permanencia de las visitas. La Tasa de Rebote y la Analítica Web La tasa de rebote es un indicador muy útil a la hora de establecer el Suite 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 barresLas trailing slashes son las barras que aparecen al final de una URL ( "https://es.ryte.com/" ) y representan un directorio. Si la URL no finaliza con una barra representa un archivo. No obstante, esto son solo guías, no un requerimiento. No obstante, usar una barra como representación de un directorio ha sido aceptado como estándar con el tiempo. Uso de las barras "https://es.ryte.com/" y SEO A pesar de que dichas Suite, 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.