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

Phillip Kriegel

Thomas Steiner

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

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

साल 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 ऐप्लिकेशन थे, लेकिन तीनों साइटों का कोड बेस एक ही था. इसलिए, वे कॉम्पोनेंट को एक बार लागू करके, उसे हर जगह डिप्लॉय कर सकीं. जैसा कि यहां दिए गए स्क्रीनशॉट में दिखाया गया है.

नई साइट के मॉडर्न फ़्रेमवर्क के आधार पर कॉम्पोनेंट डेवलप करते समय, 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 कॉम्पोनेंट को तीनों साइटों पर डिप्लॉय किया गया है और इससे शानदार नतीजे मिले हैं. BettyCrocker.com ने 10 दिसंबर, 2019 से 10 जनवरी, 2020 के बीच इन मेट्रिक की रिपोर्ट दी:

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

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

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

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

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