Wake Lock API কেস স্টাডি: BettyCrocker.com-এ ক্রয়ের অভিপ্রায় সূচকে 300% বৃদ্ধি

একটি মোবাইল ডিভাইস দিয়ে রান্না করার সময় রেসিপি ধাপের মাঝখানে তার স্ক্রীন বন্ধ হয়ে যাওয়ার চেয়ে খারাপ আর কিছুই নেই। কীভাবে রান্নার সাইট BettyCrocker.com ওয়েক লক এপিআই ব্যবহার করে তা এড়াতে জানুন।

Phillip Kriegel

Thomas Steiner

প্রায় এক শতাব্দী ধরে, বেটি ক্রোকার আমেরিকার আধুনিক রান্নার নির্দেশনা এবং বিশ্বস্ত রেসিপি তৈরির উৎস। 1997 সালে চালু করা, তাদের সাইট BettyCrocker.com আজ প্রতি মাসে 12 মিলিয়নেরও বেশি দর্শক পায়। তারা ওয়েক লক এপিআই প্রয়োগ করার পরে, সমস্ত ব্যবহারকারীর তুলনায় ওয়েক লক ব্যবহারকারীদের জন্য তাদের ক্রয়ের অভিপ্রায়ের সূচকগুলি প্রায় 300% বেশি ছিল ।

অবসরপ্রাপ্ত iOS এবং Android অ্যাপ

2014 সালে খুব ধুমধাম করে মুক্তি পায়, বেটি ক্রোকার সম্প্রতি অ্যাপল অ্যাপ স্টোর এবং গুগল প্লে স্টোর থেকে তাদের অ্যাপগুলিকে বঞ্চিত করার পরে নিয়ে গেছে। দীর্ঘদিন ধরে, বেটি ক্রোকার টিম iOS/Android অ্যাপের পরিবর্তে মোবাইল সাইটে নতুন বৈশিষ্ট্য যোগ করতে পছন্দ করেছে। যে প্রযুক্তিগত প্ল্যাটফর্মটিতে iOS/Android অ্যাপগুলি তৈরি করা হয়েছিল তা সেকেলে হয়ে গিয়েছিল এবং অ্যাপগুলিকে আপডেট করা এবং রক্ষণাবেক্ষণের জন্য ব্যবসার কাছে সংস্থান ছিল না। ওয়েব অ্যাপটিও বস্তুনিষ্ঠভাবে বড় ট্রাফিক-ভিত্তিক, আরও আধুনিক, এবং উন্নত করা সহজ।

iOS/Android অ্যাপগুলির একটি হত্যাকারী বৈশিষ্ট্য ছিল, যদিও, তাদের ব্যবহারকারীরা পছন্দ করেন:

সহস্রাব্দের রান্নার প্রো টিপ: আপনি যখন রেসিপি অনুসরণ করছেন তখন @BettyCrocker মোবাইল অ্যাপটি ম্লান বা লক হয় না। — @AvaBeilke

80% লোক রান্নাঘরে একটি ডিভাইস দিয়ে রান্না করে, কিন্তু স্ক্রিনটি ম্লান করা এবং লক করা একটি সমস্যা। @BettyCrocker কি করেছে? ব্যবহারকারীরা যখন একটি রেসিপিতে থাকে তখন তাদের অ্যাপটি ম্লান না করে আপডেট করেছে। — @ কেটি টুইডি

ওয়েক লক এপিআই সহ ওয়েবে হত্যাকারী বৈশিষ্ট্য আনা

একটি ডিভাইস দিয়ে রান্না করার সময়, স্ক্রীন বন্ধ হয়ে গেলে অগোছালো হাত দিয়ে স্ক্রীন স্পর্শ করার বা এমনকি আপনার নাক স্পর্শ করার চেয়ে হতাশার আর কিছুই নেই। বেটি ক্রোকার নিজেদেরকে জিজ্ঞাসা করেছিলেন কিভাবে তারা তাদের iOS/Android অ্যাপের হত্যাকারী বৈশিষ্ট্যকে ওয়েব অ্যাপে পোর্ট করতে পারে। এটি যখন তারা প্রজেক্ট ফুগু এবং ওয়েক লক এপিআই সম্পর্কে শিখেছে।

ওয়েক লক এপিআই ডিভাইসটিকে আবছা বা স্ক্রীন লক করা থেকে প্রতিরোধ করার একটি উপায় প্রদান করে৷ এই ক্ষমতা নতুন অভিজ্ঞতা সক্ষম করে যেগুলি, এখন পর্যন্ত, একটি iOS/Android অ্যাপের প্রয়োজন। ওয়েক লক 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);

বাস্তবায়ন

নতুন ওয়েব অ্যাপের মাধ্যমে, ব্যবহারকারীদের সহজে একটি রেসিপি, সম্পূর্ণ পদক্ষেপের মাধ্যমে নেভিগেট করতে এবং এমনকি স্ক্রিন লকিং ছাড়াই চলে যেতে সক্ষম করা উচিত। এই লক্ষ্য অর্জনের জন্য, দলটি প্রথমে ধারণার প্রমাণ হিসাবে এবং UX ইনপুট সংগ্রহ করার জন্য একটি দ্রুত ফ্রন্ট-এন্ড প্রোটোটাইপ তৈরি করে।

প্রোটোটাইপ উপযোগী প্রমাণিত হওয়ার পরে, তারা একটি Vue.js উপাদান ডিজাইন করেছে যা তাদের সমস্ত ব্র্যান্ডে ভাগ করা যেতে পারে ( BettyCrocker , Pillsbury , এবং Tablespoon )৷ যদিও শুধুমাত্র বেটি ক্রোকারের আইওএস এবং অ্যান্ড্রয়েড অ্যাপস ছিল, তিনটি সাইটের একটি শেয়ার্ড কোড বেস আছে, তাই তারা একবার কম্পোনেন্টটি বাস্তবায়ন করতে সক্ষম হয়েছিল এবং নীচের স্ক্রিনশটগুলিতে দেখানো হিসাবে এটি সর্বত্র স্থাপন করতে সক্ষম হয়েছিল।

BettyCrocker.com ওয়েক লক টগল।

Pillsbury.com ওয়েক লক টগল।

Tablespoon.com ওয়েক লক টগল।

নতুন সাইটের আধুনিকীকৃত কাঠামোর উপর ভিত্তি করে উপাদানটি বিকাশ করার সময়, MVVM প্যাটার্নের 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 নিম্নলিখিত মেট্রিক্স রিপোর্ট করেছে:

• ওয়েক লক এপিআই-এর সাথে সামঞ্জস্যপূর্ণ একটি ব্রাউজার সহ সমস্ত বেটি ক্রোকার ব্যবহারকারীদের মধ্যে, তাদের মধ্যে 3.5% অবিলম্বে বৈশিষ্ট্যটি সক্ষম করেছে, এটিকে শীর্ষ-5 অ্যাকশনে পরিণত করেছে।
• যে ব্যবহারকারীরা ওয়েক লক সক্ষম করেছেন তাদের সেশনের সময়কাল ছিল না এমন ব্যবহারকারীদের তুলনায় 3.1× বেশি।
• যারা ওয়েক লক সক্ষম করেছে তাদের বাউন্স রেট 50% কম যারা ওয়েক লক বৈশিষ্ট্যটি ব্যবহার করেন না তাদের তুলনায়।
• সমস্ত ব্যবহারকারীর তুলনায় ওয়েক লক ব্যবহারকারীদের জন্য ক্রয়ের অভিপ্রায়ের সূচকগুলি প্রায় 300% বেশি ছিল৷

3.1 _×

দীর্ঘ সেশনের সময়কাল

50 _%

কম বাউন্স রেট

300 _%

উচ্চ ক্রয় অভিপ্রায় সূচক

উপসংহার

বেটি ক্রোকার ওয়েক লক এপিআই ব্যবহার করে চমত্কার ফলাফল দেখেছেন। আপনি তাদের যেকোনো সাইটে ( বেটিক্রোকার , পিলসবারি , বা টেবিল চামচ ) আপনার পছন্দের রেসিপি অনুসন্ধান করে এবং টগল রান্না করার সময় আপনার স্ক্রীনকে অন্ধকার হওয়া রোধ করতে সক্ষম করে বৈশিষ্ট্যটি নিজেই পরীক্ষা করতে পারেন।

ওয়েক লকগুলির জন্য কেসগুলি ব্যবহার করুন রেসিপি সাইটগুলিতে থামবেন না। অন্যান্য উদাহরণ হল বোর্ডিং পাস বা টিকিট অ্যাপ যেগুলো বারকোড স্ক্যান না হওয়া পর্যন্ত স্ক্রীন চালু রাখতে হবে, কিয়স্ক-স্টাইলের অ্যাপ যেগুলো স্ক্রীন অনবরত চালু রাখে, অথবা ওয়েব-ভিত্তিক উপস্থাপনা অ্যাপ যেগুলো প্রেজেন্টেশনের সময় স্ক্রীনকে ঘুমাতে বাধা দেয়।

ওয়েক লক এপিআই সম্পর্কে আপনার যা জানা দরকার তা আমরা এই সাইটের একটি বিস্তৃত নিবন্ধে সংকলন করেছি। সুখী পড়া, এবং সুখী রান্না!

স্বীকৃতি

আনস্প্ল্যাশে জুলিয়ান হোচেসাং- এর সৌজন্যে ময়দা মাখানো ব্যক্তি ।