Wake Lock API örnek olayı: BettyCrocker.com'daki satın alma amacı göstergelerinde% 300 artış

Mobil cihazla yemek yaparken ekranının kapatılmasından daha kötü bir şey olamaz. yemeği hazırlayabilirsiniz. Yemek pişirme sitesi BettyCrocker.com'un bunu önlemek için Wake Lock API'yi nasıl kullandığını öğrenin.

Betty Crocker yaklaşık yüz yıldır Amerika'da modern yemek pişirme dersi oldu yemek tarifini geliştirmeye yardımcı olur. 1997'de kurulan web siteleri BettyCrocker.com bugün ayda 12 milyondan fazla ziyaretçi alıyor. Uyanık kalma Kilidi API'sini uyguladıktan sonra göstergeleri satın alma amacı tüm kullanıcılara kıyasla uyanık kalma kilidi kullanıcıları için yaklaşık% 300 daha yüksekti.

Kullanımdan kaldırılan iOS ve Android uygulamaları

2014'te çok büyük ilgiyle yayınlandı, Betty Crocker kısa süre önce uygulamalarını Apple App Store ve Google Play Store'dan kaldırdı nasıl değer kattığından bahsetmiştik. Betty Crocker ekibi, uzun süredir mobil siteye yeni özellikler eklemeyi tercih ediyor. tercih edebilirsiniz. iOS/Android uygulamalarının oluşturulduğu teknik platform eskiydi. ve işletmenin gerekli kaynakları ve sürekli olarak güncelleme yapılmasını sağlıyor. Web uygulaması, trafik açısından nesnel olarak çok daha büyüktü. ve geliştirilmesi daha kolay olur.

Bununla birlikte, iOS/Android uygulamalarının kullanıcılarının beğendiği bir katil özelliği de vardı:

Y kuşağı için yemek pişirme uzmanı ipucu: @BettyCrocker mobil uygulaması bir yemek tarifini uygularken kararmaz veya kilitlenmez. - @AvaBeilke

İnsanların% 80'i mutfaktaki bir cihazla yemek pişiriyor, ancak ekran karartma ve kilitleme sorun yaratıyor. @BettyCrocker ne yaptı? Uygulama, kullanıcılar yemek tarifindeyken Karart SAĞLANMAYACAK şekilde güncellendi. - @KatieTweedy

Wake Lock API ile muhteşem özelliği web'e taşıma

Cihazla yemek yaparken daha da sinir bozucu bir şey olamaz Ekran kapandığında dağınık ellerle, hatta burnunuzla dokunmak zorunda kalmaktan daha iyidir. Betty Crocker, iOS/Android uygulamalarının en iyi özelliğini nasıl aktarabileceklerini kendilerine sordu. web uygulamasına gönderebilirsiniz. Bu, ekip arkadaşlarının Project Fugu ve Wake Lock API.

Mutfak masasında unlu hamur yoğuran bir kişi

Wake Lock API, cihazın önlenmesi için bir yol sağlar veya kilitlenmesini engeller. Bu özellik, şu ana kadar iOS/Android uygulaması gerektiren yeni deneyimlere olanak tanır. Uyandırma Kilidi API'si, bilgisayar korsanlığı yaratan ve potansiyel olarak güç harcayan çözümlere olan ihtiyacı azaltır.

Uyanık kalma kilidi isteme

Uyanık kalma kilidi istemek için navigator.wakeLock.request() yöntemini çağırmanız gerekir WakeLockSentinel nesnesini döndürür. Bu nesneyi koruyucu değeri. Tarayıcı, isteği çeşitli nedenlerle reddedebilir (örneğin, pil seviyesi çok düşük olduğu için) Bu nedenle, görüşmeyi bir try…catch ifadesinde birleştirmek iyi bir uygulamadır.

Uyanık kalma kilidini açma

Uyanık kalma kilidini açmak için bir yönteme de ihtiyacınız var. Bu işlem, WakeLockSentinel nesnesinin release() yöntemi çağrılarak gerçekleştirilir. Uyanık kalma kilidini belirli bir süre geçtikten sonra otomatik olarak serbest bırakmak isterseniz release() öğesini çağırmak için aşağıdaki örnekte gösterildiği gibi window.setTimeout() kullanabilirsiniz.

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

Uygulama

Yeni web uygulamasıyla kullanıcıların yemek tarifinde kolayca gezinebilmelerine, bile olsa ekranı kilitlemeden yürüyebilirsiniz. Bu hedefe ulaşmak için ekip önce hızlı bir kullanıcı arabirimi prototipi oluşturdu bir kavram kanıtlamak ve kullanıcı deneyimiyle ilgili görüş toplamaktır.

Prototipin kullanışlı olduğunu fark ettikten sonra, test kullanıcısı Vue.js bileşeni tüm markalarına sunulabilen (BettyCrocker, Pillsbury ve Tablespoon). Sadece Betty Crocker'ın iOS ve Android uygulamaları olsa da üç sitenin de ortak bir kod tabanı olduğunu ve Böylece bileşeni bir kez uygulayıp her yerde dağıtabildiler aşağıdaki ekran görüntülerinde gösterildiği gibi.

BettyCrocker.com uyanık kalma kilidi açma/kapatma düğmesi
BettyCrocker.com uyanık kalma kilidi açma/kapatma düğmesi.
ziyaret edin.
Pillsbury.com uyanık kalma kilidi açma/kapatma düğmesi
Pillsbury.com uyanık kalma kilidi açma/kapatma düğmesi.
ziyaret edin.
Tablespoon.com uyanık kalma kilidi açma/kapatma düğmesi
Tablespoon.com uyanık kalma kilidi açma/kapatma düğmesi.

Bileşeni yeni sitenin modernleştirilmiş çerçevesine dayalı olarak geliştirirken tedarikçilerin kullanımına MVVM kalıbının ViewModel katmanı. Ekip ayrıca birlikte çalışabilirliği göz önünde bulundurarak program yaptı ve sitenin eski ve yeni çerçevelerinde işlevselliği etkinleştirin.

Betty Crocker, görüntülenebilirlik ve kullanılabilirliği takip etmek için Analytics izleme, temel olaylar için geçerlidir. Ekip, uyanık kalma kilidi bileşenini dağıtmak için özellik yönetiminden yararlandı üretim lansmanı için tek bir siteye, Ardından, kullanımı ve sayfa sağlığını izledikten sonra özelliği diğer sitelere dağıttı. Bu bileşenin kullanımına göre analiz verilerini izlemeye devam ederler.

Ekip, kullanıcılar için hata güvenliği sağlamak amacıyla zorunlu bir zaman aşımı oluşturdu tuşuna basarak uyanık kalma kilidini devre dışı bırakabilirsiniz. Anlaştıkları nihai uygulama kısa süreli olarak sitelerindeki tüm yemek tarifi sayfalarında açma/kapatma düğmesi vardı. Uzun vadede, yemek tarifleri sayfasının görünümünü yeniledi.

Uyanık kalma kilidi kapsayıcısı

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

Uyanık kalma kilidi bileşeni

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

Sonuçlar

Vue.js bileşeni üç siteye de dağıtıldı ve mükemmel sonuçlar sağladı. 10 Aralık 2019 ile 10 Ocak 2020 tarihleri arasındaki dönemde BettyCrocker.com aşağıdaki metrikleri bildirdi:

  • Wake Lock API ile uyumlu bir tarayıcıya sahip tüm Betty Crocker kullanıcılarının Kullanıcıların% 3, 5'i bu özelliği hemen etkinleştirerek en iyi 5 işlem arasına girdi.
  • Uyanık kalma kilidini etkinleştiren kullanıcıların oturum süresi 3,1 kat daha uzundu kullanıcılara kıyasla daha değerlidir.
  • Uyanık kalma kilidini etkinleştiren kullanıcıların hemen çıkma oranı% 50 daha düşüktü (uyanık kalma kilidi özelliğini kullanmayanlara göre daha yüksektir.
  • Satın alma amacı göstergeleri, uyanık kalma kilidi kullanıcıları için tüm kullanıcılara kıyasla yaklaşık% 300 daha yüksekti.

3,1×

Daha uzun oturum süresi

%50

Daha düşük hemen çıkma oranı

%300

Daha yüksek satın alma amacı göstergeleri

Sonuçlar

Betty Crocker, Wake Lock API'yi kullanarak muhteşem sonuçlar elde etti. Bu özelliği, kendi sitelerinde en sevdiğiniz tarifi arayarak kendiniz test edebilirsiniz. (BettyCrocker, Pillsbury veya Tablespoon) Yemek pişirme sırasında ekranınızın kararmasını önleyin seçeneğini etkinleştirin.

Uyanık kalma kilitlerinin kullanım alanları tarif alanlarında bitmez. Ekranı açık tutması gereken biniş kartı veya bilet uygulamaları da buna örnek gösterilebilir. Barkod taranana kadar ekranı sürekli açık tutan kiosk tarzı uygulamalar, veya web tabanlı sunu uygulamaları ya da sunu sırasında ekranın uyku moduna geçmesini engelleyen web tabanlı sunu uygulamaları.

Wake Lock API hakkında bilmeniz gereken her şeyi derledik ayrıntılı bir şekilde inceleyebilirsiniz. Keyifli okumalar, mutlu yemek pişirmeler!

Teşekkür

Hamur yoğuran kişi adlı kullanıcının fotoğrafı: Julian Hochgesang Unsplash'i açın.