वेक लॉक एपीआई की केस स्टडी: BettyCrocker.com पर खरीदारी की इच्छा के इंडिकेटर में 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 की मदद से, वेब पर बेहतर सुविधाएं उपलब्ध कराना

किसी डिवाइस पर खाना पकाते समय, स्क्रीन बंद होने पर स्क्रीन के अजीब हाथों या नाक को छूने से ज़्यादा परेशानियां नहीं होती. बेटी क्रोकर ने खुद से पूछा कि वे अपने iOS/Android ऐप्लिकेशन के किलर फ़ीचर को वेब ऐप्लिकेशन पर कैसे पोर्ट कर सकते हैं. इसी समय उन्हें Project Fugu और वेक लॉक एपीआई के बारे में पता चला.

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

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

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

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

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

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

धन्यवाद

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