वेक लॉक एपीआई की केस स्टडी: BettyCrocker.com पर खरीदारी की इच्छा के इंडिकेटर में 300% की बढ़ोतरी

मोबाइल डिवाइस से खाना बनाते समय, रेसिपी के किसी चरण के बीच में स्क्रीन बंद होना सबसे बुरा अनुभव होता है. जानें कि खाना बनाने की साइट BettyCrocker.com ने ऐसा होने से रोकने के लिए, Wake Lock API का इस्तेमाल कैसे किया.

Phillip Kriegel

Thomas Steiner

करीब एक सदी से, Betty Crocker अमेरिका में आधुनिक तरीके से खाना बनाने के निर्देश और भरोसेमंद रेसिपी बनाने का सोर्स रहा है. साल 1997 में लॉन्च की गई उनकी साइट BettyCrocker.com पर, आज हर महीने 12 करोड़ से ज़्यादा लोग आते हैं. Wake Lock API लागू करने के बाद, सभी उपयोगकर्ताओं की तुलना में, Wake Lock का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, खरीदारी के इंटेंट के इंडिकेटर करीब 300% ज़्यादा थे.

बंद किए गए iOS और Android ऐप्लिकेशन

Betty Crocker ने 2014 में बहुत धूमधाम से अपने ऐप्लिकेशन लॉन्च किए थे. हालांकि, हाल ही में इन ऐप्लिकेशन को प्राथमिकता नहीं दी गई, जिसके बाद Betty Crocker ने इन्हें Apple App Store और Google Play Store से हटा दिया. Betty Crocker की टीम ने लंबे समय से, iOS/Android ऐप्लिकेशन के बजाय मोबाइल साइट में नई सुविधाएं जोड़ने को प्राथमिकता दी है. iOS/Android ऐप्लिकेशन जिस तकनीकी प्लैटफ़ॉर्म पर बनाए गए थे वह पुराना हो गया था. साथ ही, कारोबार के पास ऐप्लिकेशन को अपडेट करने और उन्हें मैनेज करने के लिए संसाधन नहीं थे. वेब ऐप्लिकेशन, ट्रैफ़िक के हिसाब से ज़्यादा बेहतर था. साथ ही, यह ज़्यादा आधुनिक और बेहतर बनाने में आसान था.

हालांकि, iOS/Android ऐप्लिकेशन में एक शानदार सुविधा थी, जो लोगों को पसंद आई:

मिलिनियल के लिए कुकिंग से जुड़ी अहम जानकारी: @BettyCrocker मोबाइल ऐप्लिकेशन का इस्तेमाल करके, रेसिपी बनाते समय स्क्रीन पर रोशनी कम नहीं होती और स्क्रीन लॉक नहीं होती. —@AvaBeilke

80% लोग रसोई में डिवाइस का इस्तेमाल करके खाना बनाते हैं. हालांकि, स्क्रीन की रोशनी कम होने और लॉक होने की समस्या आती है. @BettyCrocker ने क्या किया? उन्होंने अपने ऐप्लिकेशन को अपडेट किया है, ताकि जब उपयोगकर्ता किसी रेसिपी में हों, तब ऐप्लिकेशन की स्क्रीन मंद न हो. —@KatieTweedy

Wake Lock API की मदद से, वेब पर बेहतर सुविधाएं उपलब्ध कराना

डिवाइस से खाना बनाते समय, स्क्रीन बंद होने पर, स्क्रीन को गंदे हाथों या नाक से छूना सबसे ज़्यादा परेशान करने वाला होता है. इसलिए, Betty Crocker ने अपने iOS/Android ऐप्लिकेशन की मुख्य सुविधा को वेब ऐप्लिकेशन पर पोर्ट करने का तरीका ढूंढा. इस दौरान, उन्हें Project Fugu और Wake Lock API के बारे में पता चला.

Wake Lock API की मदद से, डिवाइस की स्क्रीन की रोशनी कम होने या उसे लॉक होने से रोका जा सकता है. इस सुविधा की मदद से, ऐसे नए अनुभव मिलते हैं जिनके लिए अब तक iOS/Android ऐप्लिकेशन की ज़रूरत होती थी. Wake Lock API की मदद से, हैक और ज़्यादा बैटरी खर्च करने वाले तरीकों की ज़रूरत कम हो जाती है.

वेक लॉक का अनुरोध करना

वेक लॉक का अनुरोध करने के लिए, आपको navigator.wakeLock.request() तरीके को कॉल करना होगा, जो WakeLockSentinel ऑब्जेक्ट दिखाता है. इस ऑब्जेक्ट का इस्तेमाल, सेंटिनल वैल्यू के तौर पर किया जाएगा. ब्राउज़र कई वजहों से अनुरोध को अस्वीकार कर सकता है. उदाहरण के लिए, बैटरी बहुत कम होने की वजह से. इसलिए, कॉल को try…catch स्टेटमेंट में रैप करना एक अच्छा तरीका है.

वेक लॉक को रिलीज़ करना

आपको वेक लॉक को रिलीज़ करने का तरीका भी चाहिए. इसे WakeLockSentinel ऑब्जेक्ट के release() तरीके को कॉल करके किया जाता है. अगर आपको तय समय के बाद, वॉकी-अप लॉक को अपने-आप हटाना है, तो window.setTimeout() का इस्तेमाल करके release() को कॉल करें. इसका उदाहरण यहां दिया गया है.

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

लागू करने का तरीका

नए वेब ऐप्लिकेशन की मदद से, उपयोगकर्ता आसानी से किसी रेसिपी पर नेविगेट कर सकते हैं, इसके चरणों को पूरा कर सकते हैं, और स्क्रीन लॉक किए बिना भी उससे बाहर निकल सकते हैं. इस लक्ष्य को हासिल करने के लिए, टीम ने सबसे पहले कॉन्सेप्ट के सबूत के तौर पर और यूज़र एक्सपीरियंस (यूएक्स) से जुड़े सुझाव या राय पाने के लिए, एक फ़्रंट-एंड प्रोटोटाइप बनाया.

प्रोटोटाइप के काम के साबित होने के बाद, उन्होंने एक ऐसा Vue.js कॉम्पोनेंट डिज़ाइन किया जिसे उनके सभी ब्रैंड (BettyCrocker, Pillsbury, और Tablespoon) के साथ शेयर किया जा सकता था. हालांकि, सिर्फ़ Betty Crocker के पास iOS और Android ऐप्लिकेशन थे, लेकिन तीनों साइटों का कोड बेस एक ही था. इसलिए, वे कॉम्पोनेंट को एक बार लागू करके, उसे हर जगह डिप्लॉय कर पाए. इस बारे में नीचे दिए गए स्क्रीनशॉट में बताया गया है.

BettyCrocker.com का वेक लॉक टॉगल.

Pillsbury.com का वेक लॉक टॉगल.

Tablespoon.com का वेक लॉक टॉगल.

नई साइट के आधुनिक फ़्रेमवर्क के आधार पर कॉम्पोनेंट को डेवलप करते समय, MVVM पैटर्न की ViewModel लेयर पर ज़्यादा ध्यान दिया गया. टीम ने साइट के लेगसी और नए फ़्रेमवर्क पर फ़ंक्शन को चालू करने के लिए, इंटरऑपरेबिलिटी को ध्यान में रखकर भी प्रोग्राम किया है.

विज्ञापन दिखने और इस्तेमाल किए जाने की जानकारी ट्रैक करने के लिए, Betty Crocker ने वॉकी लॉक के लाइफ़साइकल में मुख्य इवेंट के लिए आंकड़ों की ट्रैकिंग को इंटिग्रेट किया. टीम ने शुरुआती प्रोडक्शन रोल आउट के लिए, वेक लॉक कॉम्पोनेंट को एक साइट पर डिप्लॉय करने के लिए, सुविधा मैनेजमेंट का इस्तेमाल किया. इसके बाद, इस्तेमाल और पेज की परफ़ॉर्मेंस पर नज़र रखने के बाद, बाकी साइटों पर इस सुविधा को डिप्लॉय किया. वे इस कॉम्पोनेंट के इस्तेमाल के आधार पर, एनालिटिक्स डेटा की निगरानी करते रहते हैं.

उपयोगकर्ताओं को सुरक्षित रखने के लिए, टीम ने एक घंटे तक कोई गतिविधि न होने पर, वॉकी-अप लॉक को बंद करने के लिए ज़बरदस्ती टाइम आउट बनाया है. उन्होंने अपनी साइटों के सभी रेसिपी पेजों पर, टॉगल स्विच को कुछ समय के लिए लागू करने का फ़ैसला लिया. आने वाले समय में, वे रेसिपी पेज के व्यू को बेहतर बनाने की सोच रहे हैं.

वेक लॉक कंटेनर

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

वेक लॉक कॉम्पोनेंट

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

नतीजे

Vue.js कॉम्पोनेंट को तीनों साइटों पर डिप्लॉय किया गया है और इससे बेहतर नतीजे मिले हैं. 10 दिसंबर, 2019 से 10 जनवरी, 2020 के बीच, BettyCrocker.com ने ये मेट्रिक रिपोर्ट की:

• Betty Crocker के जिन उपयोगकर्ताओं के पास Wake Lock API के साथ काम करने वाला ब्राउज़र है उनमें से 3.5% लोगों ने इस सुविधा को तुरंत चालू कर दिया. इस वजह से, यह सुविधा सबसे ज़्यादा इस्तेमाल की गई पांच कार्रवाइयों में शामिल हो गई.
• वेक लॉक की सुविधा चालू करने वाले उपयोगकर्ताओं के सेशन की अवधि, उन उपयोगकर्ताओं के मुकाबले 3.1 गुना ज़्यादा थी जिन्होंने यह सुविधा चालू नहीं की थी.
• वेक लॉक की सुविधा चालू करने वाले उपयोगकर्ताओं का बाउंस रेट, वेक लॉक की सुविधा का इस्तेमाल न करने वाले उपयोगकर्ताओं के मुकाबले 50% कम था.
• सभी उपयोगकर्ताओं की तुलना में, वेक लॉक का इस्तेमाल करने वाले उपयोगकर्ताओं के लिए, खरीदारी के इंटेंट के इंडिकेटर करीब 300% ज़्यादा थे.

3.1_×

सेशन ज़्यादा देर तक चलना

50_%

बाउंस रेट कम करना

300_%

खरीदारी के इंटेंट के ज़्यादा इंडिकेटर

मीटिंग में सामने आए नतीजे

Betty Crocker को Wake Lock API का इस्तेमाल करके बेहतरीन नतीजे मिले हैं. इस सुविधा को खुद आज़माने के लिए, इनमें से किसी भी साइट पर अपनी पसंदीदा रेसिपी खोजें (BettyCrocker, Pillsbury या Tablespoon) और खाना बनाते समय स्क्रीन के बंद होने से रोकें टॉगल को चालू करें.

वेक लॉक के इस्तेमाल के उदाहरण, रेसिपी साइटों तक ही सीमित नहीं हैं. अन्य उदाहरणों में, बोर्डिंग पास या टिकट वाले ऐसे ऐप्लिकेशन शामिल हैं जिन्हें बारकोड स्कैन होने तक स्क्रीन चालू रखनी होती है. इसके अलावा, ऐसे कीऑस्क-स्टाइल ऐप्लिकेशन भी शामिल हैं जो स्क्रीन को लगातार चालू रखते हैं. इसके अलावा, वेब-आधारित प्रज़ेंटेशन ऐप्लिकेशन भी शामिल हैं जो प्रज़ेंटेशन के दौरान स्क्रीन को स्लीप मोड में जाने से रोकते हैं.

हमने इस साइट पर एक लेख में, Wake Lock API के बारे में आपको ज़रूरी जानकारी दी है. पढ़ने और खाना बनाने का आनंद लें!

आभार

आटा गूंथते हुए व्यक्ति की फ़ोटो, Unsplash पर Julian Hochgesang की ओर से दी गई है.