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

मोबाइल डिवाइस पर खाना बनाते समय, रेसिपी की प्रोसेस के बीच में इसकी स्क्रीन बंद कर देने से ज़्यादा खराब कुछ नहीं होता. जानें कि कुकिंग साइट BettyCrocker.com ने ऐसा होने से रोकने के लिए, वेक लॉक एपीआई का इस्तेमाल कैसे किया है.

Phillip Kriegel

Thomas Steiner

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

बंद हो चुके iOS और Android ऐप्लिकेशन

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

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

मिलेनियल कुकिंग पेशेवर टिप: जब आप किसी रेसिपी को फ़ॉलो करते हैं, तो @BettyCrocker मोबाइल ऐप्लिकेशन की स्क्रीन की रोशनी कम या लॉक नहीं होती है. —@AvaBeilke

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

वेक लॉक एपीआई की मदद से, हत्यारे की सुविधा को वेब पर लाया जा रहा है

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

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

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

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

वेक लॉक को हटाना

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

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

लागू करने की प्रक्रिया

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

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

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

Pillsbu.com वेक लॉक टॉगल.

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

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

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

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

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

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 उपयोगकर्ताओं में से, 3.5% लोगों ने इस सुविधा को तुरंत चालू कर दिया है. इस वजह से, यह टॉप-5 कार्रवाई में शामिल है.
• वेक लॉक को चालू करने वाले उपयोगकर्ताओं के सेशन की अवधि, उन उपयोगकर्ताओं की तुलना में 3.1× ज़्यादा थी जिन्होंने चालू नहीं किया था.
• वेक लॉक को चालू करने वाले उपयोगकर्ताओं की बाउंस दर, वेक लॉक की सुविधा का इस्तेमाल न करने वाले उपयोगकर्ताओं की तुलना में 50% कम थी.
• खरीदारी की इच्छा के इंडिकेटर सभी उपयोगकर्ताओं की तुलना में, वेक लॉक का इस्तेमाल करने वाले लोगों के लिए करीब 300% ज़्यादा थे.

3.1_×

सेशन की अवधि ज़्यादा है

50_%

कम बाउंस रेट

300_%

ज़्यादा खरीदारी की इच्छा दिखाने वाले इंडिकेटर

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

बेट्टी क्रोकर ने वेक लॉक एपीआई का इस्तेमाल करके, शानदार नतीजे देखे हैं. आपके पास इस सुविधा की जांच करने का विकल्प है. इसके लिए, (BettyCrocker, Pillsबरी या टेबलस्पून) में अपनी पसंदीदा रेसिपी खोजें और खाना बनाते समय स्क्रीन को डार्क होने से बचाएं टॉगल को चालू करें.

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

हमने इस साइट पर ही, वेक लॉक एपीआई के बारे में ज़रूरी जानकारी पूरी जानकारी दी है. पढ़ने का आनंद लें और कुकिंग का आनंद लें!

स्वीकार हैं

Unsplash पर, जूलियन होचेसांग के सौजन्य से आटा गूँथते व्यक्ति की फ़ोटो.