Étude de cas sur l'API Wake Lock: augmentation de 300% des indicateurs d'intention d'achat sur BettyCrocker.com

Rien n'est pire quand on cuisine sur son appareil mobile que si son écran s'éteint au milieu d'une étape de recette. Découvrez comment le site de cuisine BettyCrocker.com a utilisé l'API Wake Lock pour éviter que cela ne se produise.

Depuis près d'un siècle, Betty Crocker est la source américaine d'enseignement de la cuisine moderne et un développement de recettes fiable. Créé en 1997, le site BettyCrocker.com qui reçoit aujourd'hui plus de 12 millions de visiteurs par mois. Après avoir implémenté l'API Wake Lock, ses indicateurs de intention d'achat étaient environ 300% plus élevées pour les utilisateurs de wakelocks que pour tous les utilisateurs.

Applications iOS et Android supprimées

Sorti en fanfare en 2014, Betty Crocker a récemment retiré ses applications de l'App Store d'Apple et du Google Play Store après avoir abaissé leur priorité. L'équipe de Betty Crocker préfère ajouter de nouvelles fonctionnalités sur son site mobile depuis longtemps au lieu des applications iOS/Android. La plate-forme technique sur laquelle les applications iOS/Android ont été créées était obsolète, et que l'entreprise ne disposait pas des ressources nécessaires pour prendre en charge la mise à jour et la maintenance des applications à l'avenir. L'application Web était aussi objectivement beaucoup plus importante en termes de trafic, plus modernes et plus faciles à améliorer.

Cependant, les applications iOS/Android avaient une fonctionnalité principale que les utilisateurs appréciaient particulièrement:

Conseil de pro de la cuisine pour les millenials: l'application mobile @BettyCrocker ne s’assombrit pas ou ne se verrouille pas lorsque vous suivez une recette. – @AvaBeilke

80% des personnes cuisinent avec un appareil en cuisine, mais la diminution de la luminosité et le verrouillage de l’écran sont un problème. Qu'a fait @BettyCrocker ? L'application a été mise à jour pour ne pas s'assombrir lorsque les utilisateurs sont dans une recette. – @KatieTweedy

La fonctionnalité essentielle sur le Web avec l'API Wake Lock

Quand on cuisine avec son appareil, il n'y a rien de plus frustrant que de toucher l'écran avec les mains en désordre ou même avec le nez lorsqu'il s'éteint. Betty Crocker s'est demandé comment elle pouvait transférer la fonctionnalité tueuse de ses applications iOS/Android à l'application Web. C’est à ce moment-là qu’ils ont appris Project Fugu et API Wake Lock

Personne en train de pétrir de la pâte sur une table de cuisine recouverte de farine

L'API Wake Lock permet d'empêcher l'appareil de la diminution de la luminosité ou du verrouillage de l'écran. Cette fonctionnalité offre de nouvelles expériences qui, jusqu'à présent, nécessitaient une application iOS/Android. L'API Wake Lock réduit le besoin de solutions de contournement hackantes et potentiellement gourmandes en énergie.

Demander un wakelock

Pour demander un wakelock, vous devez appeler la méthode navigator.wakeLock.request(). qui renvoie un objet WakeLockSentinel. Vous utiliserez cet objet en tant que sentinel. Le navigateur peut refuser la requête pour diverses raisons. (par exemple, parce que la batterie est trop faible), Il est donc recommandé d'encapsuler l'appel dans une instruction try…catch.

Libérer un wakelock

Vous avez aussi besoin d'un moyen de déverrouiller un wakelock, ce qui est obtenu en appelant la méthode release() de l'objet WakeLockSentinel. Si vous souhaitez déverrouiller automatiquement le wakelock au bout d'un certain temps, vous pouvez utiliser window.setTimeout() pour appeler release(), comme illustré dans l'exemple ci-dessous.

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

L'implémentation

Avec la nouvelle application Web, les utilisateurs devraient pouvoir naviguer facilement dans une recette, effectuer des étapes, et même s'en aller sans le verrouillage de l'écran. Pour atteindre cet objectif, l'équipe a d'abord construit un prototype rapide de front-end comme preuve de concept et pour recueillir des commentaires sur l'UX.

Après que le prototype s'est avéré utile, ils ont conçu un Composant Vue.js qu'elle peut partager entre toutes ses marques (BettyCrocker, Pillsbury et Tablespoon). Même si seule Betty Crocker avait des applications iOS et Android, les trois sites ont un code base partagé, Ils ont donc pu implémenter le composant une fois et le déployer partout, comme illustré dans les captures d'écran ci-dessous.

<ph type="x-smartling-placeholder">
</ph> Activation/Désactivation du wakelock de BettyCrocker.com
Activation/désactivation du wakelock de BettyCrocker.com.
<ph type="x-smartling-placeholder">
</ph> Activer/Désactiver le wakelock sur Pillsbury.com
Activation/désactivation du wakelock de Pillsbury.com.
<ph type="x-smartling-placeholder">
</ph> Activation/Désactivation du wakelock sur Tablespoon.com
Activation/désactivation du wakelock sur Tablespoon.com.

Pour développer le composant en s'appuyant sur la structure modernisée du nouveau site, nous avons mis l'accent sur Couche ViewModel du modèle MVVM L'équipe a aussi programmé un programme dans un souci d'interopérabilité pour activer des fonctionnalités sur les cadres anciens et nouveaux du site.

Pour suivre la visibilité et la facilité d'utilisation, Betty Crocker a intégré le suivi analytique pour les événements de base dans le cycle de vie des wakelocks. L'équipe a utilisé la gestion des caractéristiques pour déployer le composant wakelock sur un seul site pour le déploiement initial en production, puis déployé la fonctionnalité sur le reste des sites après avoir surveillé l'utilisation et l'état de la page. Il continue de surveiller les données d'analyse en fonction de l'utilisation de ce composant.

Pour assurer la sécurité des utilisateurs, l'équipe a créé un délai d'inactivité forcé. pour désactiver le wakelock après une heure d'inactivité. La dernière implémentation qu'ils ont choisie a été à court terme d'activer un interrupteur sur toutes les pages de recettes de ses sites. À long terme, ils envisagent une vue de page de recette repensée.

Conteneur du wakelock

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

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

Résultats

Le composant Vue.js a été déployé sur les trois sites et a donné d'excellents résultats. Entre le 10 décembre 2019 et le 10 janvier 2020, BettyCrocker.com a enregistré les métriques suivantes:

  • De tous les utilisateurs de Betty Crocker dont le navigateur est compatible avec l'API Wake Lock, 3,5% d'entre eux l'ont activée immédiatement, ce qui en fait l'une des cinq actions les plus populaires.
  • La durée de session pour les utilisateurs ayant activé le wakelock était 3,1 fois plus longue que pour les autres.
  • Le taux de rebond pour les utilisateurs ayant activé le wakelock a diminué de 50 % que pour ceux qui n'utilisent pas la fonction wakelock.
  • Les indicateurs d'intention d'achat étaient environ 300% plus élevés pour les utilisateurs de wakelocks que pour l'ensemble des utilisateurs.

3,1×

Durée de session plus longue

50 %

Réduction du taux de rebond

300%

Indicateurs d'intention d'achat plus élevés

Conclusions

Betty Crocker a obtenu des résultats impressionnants avec l'API Wake Lock. Vous pouvez tester vous-même cette fonctionnalité en recherchant votre recette préférée sur l'un de leurs sites. (BettyCrocker, Pillsbury ou Tablespoon) et activez le bouton Empêcher l'écran de s'assombrir pendant que vous cuisinez.

Les cas d'utilisation des wakelocks ne s'arrêtent pas aux sites de recettes. Autres exemples : cartes d'embarquement ou applications de billetterie qui doivent laisser l'écran allumé tant que le code-barres n'a pas été scanné, des applications de type kiosque qui maintiennent l'écran allumé en permanence, ou des applications de présentation Web qui empêchent l'écran de passer en veille pendant une présentation.

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

Remerciements

Photo d'une personne en train de pétrir de la pâte, avec l'aimable autorisation de Julian Hochgesang dans Unsplash.