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

Mobil cihazla yemek pişirirken en kötü şey, tarifin bir adımını uygularken ekranın kapanmasıdır. Yemek tarifleri sitesi BettyCrocker.com'un bu durumun yaşanmasını önlemek için Wake Lock API'yi nasıl kullandığını öğrenin.

Betty Crocker, yaklaşık bir yüzyıldır Amerika'da modern yemek pişirme talimatları ve güvenilir yemek tarifleri geliştirme konusunda kaynak olarak kullanılıyor. 1997'de kullanıma sunulan BettyCrocker.com sitesi bugün ayda 12 milyondan fazla ziyaretçi alıyor. Wake Lock API'yi uyguladıktan sonra, wake lock kullanıcılarının satın alma niyeti göstergeleri tüm kullanıcılara kıyasla yaklaşık% 300 daha yüksek oldu.

Desteği sonlandırılan iOS ve Android uygulamaları

2014'te büyük bir tanıtımla piyasaya sürülen Betty Crocker, önceliği kaldırılan uygulamalarını kısa süre önce Apple App Store ve Google Play Store'dan kaldırdı. Betty Crocker ekibi uzun süredir iOS/Android uygulamaları yerine mobil siteye yeni özellikler eklemeyi tercih ediyordu. iOS/Android uygulamalarının oluşturulduğu teknik platform eskiydi ve işletmenin, uygulamaları güncellemeyi ve sürdürmeyi destekleyecek kaynakları yoktu. Web uygulaması, trafik açısından da çok daha büyük, daha modern ve geliştirilmesi daha kolaydı.

Ancak iOS/Android uygulamalarının kullanıcıların sevdiği bir müthiş özelliği vardı:

Y kuşağı aşçılara özel ipucu: @BettyCrocker mobil uygulaması, tarifi uygularken ekranı karartmaz veya kilitlemez. —@AvaBeilke

Kullanıcıların% 80'i mutfakta bir cihazla yemek pişiriyor ancak ekranın karartılması ve kilitlenmesi bir sorun. @BettyCrocker ne yaptı? Uygulamalarını, kullanıcılar bir tarifteyken karartmayacak şekilde güncelledi. —@KatieTweedy

Wake Lock API ile web'e benzersiz bir özellik

Cihazla yemek pişirirken ekran kapandığında kirli ellerle veya hatta burnunuzla ekrana dokunmak kadar can sıkıcı bir şey yoktur. Betty Crocker, iOS/Android uygulamalarının en iyi özelliğini web uygulamasına nasıl taşıyabileceklerini merak etti. Bu sırada Project Fugu ve Wake Lock API hakkında bilgi edindiler.

Un serpilmiş bir mutfak masasında hamur yoğuran bir kişi

Wake Lock API, cihazın ekranı karartmasını veya kilitlemesini engellemenin bir yolunu sağlar. Bu özellik, şimdiye kadar iOS/Android uygulaması gerektiren yeni deneyimler sunar. Wake Lock API, hack'lenmiş ve potansiyel olarak güç tüketen geçici çözümlere olan ihtiyacı azaltır.

Uyanık kalma kilidi isteme

Uyandırma kilidi isteğinde bulunmak için WakeLockSentinel nesnesi döndüren navigator.wakeLock.request() yöntemini çağırmanız gerekir. Bu nesneyi sentinel değeri olarak kullanırsınız. Tarayıcı, isteği çeşitli nedenlerle reddedebilir (ör. pil çok düşük olduğu için). Bu nedenle, çağrıyı bir try…catch ifadesine sarmalamak iyi bir uygulamadır.

Uyanık kalma kilidini kaldırma

Ayrıca, uyanma kilidini serbest bırakmak için bir yönteme ihtiyacınız vardır. Bu yöntem, WakeLockSentinel nesnesinin release() yöntemi çağrılarak elde edilir. Belirli bir süre geçtikten sonra uyanma kilidini otomatik olarak serbest bırakmak istiyorsanız aşağıdaki örnekte gösterildiği gibi window.setTimeout() kullanarak release() işlevini çağırabilirsiniz.

// 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, tariflerde kolayca gezinebilir, adımları tamamlayabilir ve hatta ekran kilitlenmeden mutfaktan ayrılabilir. Ekip, bu hedefe ulaşmak için ilk olarak kavram kanıtı olarak ve kullanıcı deneyimi girdisi toplamak amacıyla hızlı bir kullanıcı arayüzü prototipi oluşturdu.

Prototipin yararlı olduğunu kanıtlamasının ardından, tüm markalarında (BettyCrocker, Pillsbury ve Tablespoon) paylaşılabilen bir Vue.js bileşeni tasarladılar. Yalnızca Betty Crocker'ın iOS ve Android uygulamaları olsa da üç sitenin ortak bir kod tabanı olduğundan, bileşeni bir kez uygulayıp aşağıdaki ekran görüntülerinde gösterildiği gibi her yere dağıtabildiler.

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

Bileşen, yeni sitenin modernleştirilmiş çerçevesine göre geliştirilirken MVVM modelinin ViewModel katmanına yoğunlaşıldı. Ekip, sitenin eski ve yeni çerçevelerinde işlevselliği sağlamak için birlikte çalışabilirliği de göz önünde bulundurarak programlama yaptı.

Görüntülenebilirliği ve kullanılabilirliği takip etmek için Betty Crocker, uyanma kilidi yaşam döngüsündeki temel etkinlikler için analiz izlemeyi entegre etti. Ekip, ilk üretim kullanıma sunma için uyanma kilidi bileşenini tek bir siteye dağıtmak amacıyla özellik yönetiminden yararlandı ve ardından kullanımı ve sayfa sağlığını izledikten sonra özelliği diğer sitelerin geri kalanına dağıttı. Bu bileşenin kullanımına dayalı analiz verilerini izlemeye devam ederler.

Ekip, kullanıcılar için bir güvenlik önlemi olarak, bir saat boyunca işlem yapılmadığında uyanma kilidini devre dışı bırakmak için zorunlu bir zaman aşımı oluşturdu. Son olarak, kısa vadede sitelerindeki tüm yemek tarifi sayfalarında bir açma/kapatma düğmesi kullanmaya karar verdiler. Uzun vadede, yenilenmiş bir yemek tarifi sayfası görünümü sunmayı planlıyorlar.

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 üç sitenin tamamında dağıtıldı ve mükemmel sonuçlar elde edildi. BettyCrocker.com, 10 Aralık 2019 ile 10 Ocak 2020 tarihleri arasında aşağıdaki metrikleri bildirmiştir:

  • Wake Lock API ile uyumlu bir tarayıcıya sahip olan tüm Betty Crocker kullanıcılarının% 3,5'i özelliği hemen etkinleştirdi.Bu da özelliği ilk 5 işlem arasına soktu.
  • Uyandırma kilidini etkinleştiren kullanıcıların oturum süresi, etkinleştirmeyen kullanıcılara kıyasla 3,1 kat daha uzundu.
  • Uyandırma kilidini etkinleştiren kullanıcıların hemen çıkma oranı, uyandırma kilidi özelliğini kullanmayan kullanıcılara kıyasla% 50 daha düşüktü.
  • Uyanma kilidi kullanıcılarının satın alma niyeti göstergeleri, 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 mükemmel sonuçlar elde etti. Bu özelliği, sitelerinden herhangi birinde (BettyCrocker, Pillsbury veya Tablespoon) en sevdiğiniz tarifi arayarak ve Yemek pişirirken ekranınızın kararmasını önle açma/kapatma düğmesini etkinleştirerek kendiniz test edebilirsiniz.

Uyandırma kilitlerinin kullanım alanları tarif siteleriyle sınırlı değildir. Barkod taranana kadar ekranın açık kalması gereken biniş kartı veya bilet uygulamaları, ekranı sürekli açık tutan kiosk tarzı uygulamalar ya da sunum sırasında ekranın uykuya geçmesini engelleyen web tabanlı sunu uygulamaları da bu kapsamdadır.

Wake Lock API hakkında bilmeniz gereken her şeyi bu sitedeki kapsamlı bir makalede derledik. Keyifli okumalar ve lezzetli yemekler dileriz.

Teşekkür ederiz

Hamur yoğuran kişi fotoğrafı Unsplash'taki Julian Hochgesang tarafından sağlanmıştır.