مطالعه موردی Wake Lock API: افزایش 300 درصدی شاخص‌های قصد خرید در BettyCrocker.com

Phillip Kriegel

Thomas Steiner

نزدیک به یک قرن است که بتی کراکر منبع آموزش آشپزی مدرن و توسعه دستور العمل‌های معتبر در آمریکا بوده است. سایت آنها BettyCrocker.com که در سال ۱۹۹۷ راه اندازی شد، امروزه بیش از ۱۲ میلیون بازدیدکننده در ماه دارد. پس از اجرای API قفل بیدارباش ، شاخص‌های قصد خرید آنها برای کاربران قفل بیدارباش حدود ۳۰۰٪ بیشتر از همه کاربران بود .

برنامه‌های iOS و اندرویدِ از رده خارج‌شده

بتی کراکر که در سال ۲۰۱۴ با سر و صدای زیادی منتشر شد، اخیراً برنامه‌های خود را پس از لغو اولویت، از فروشگاه اپل اپ و فروشگاه گوگل پلی خارج کرده است. مدت‌هاست که تیم بتی کراکر ترجیح می‌دهد به جای برنامه‌های iOS/Android، ویژگی‌های جدیدی را به سایت موبایل اضافه کند. پلتفرم فنی که برنامه‌های iOS/Android روی آن ایجاد شده بودند، قدیمی بود و این کسب و کار منابع لازم برای پشتیبانی از به‌روزرسانی و نگهداری برنامه‌ها را در آینده نداشت. برنامه وب نیز به طور عینی از نظر ترافیک بسیار بزرگتر، مدرن‌تر و آسان‌تر برای بهبود بود.

با این حال، برنامه‌های iOS/Android یک ویژگی فوق‌العاده داشتند که کاربرانشان آن را دوست داشتند:

نکته‌ی آشپزی حرفه‌ای نسل هزاره: اپلیکیشن موبایل @BettyCrocker وقتی در حال دنبال کردن دستور غذا هستید، صفحه کم‌نور یا قفل نمی‌شود. — @AvaBeilke

۸۰٪ مردم با یک دستگاه در آشپزخانه آشپزی می‌کنند، اما کم‌نور شدن و قفل شدن صفحه نمایش یک مشکل است. @BettyCrocker چه کار کرد؟ برنامه خود را به‌روزرسانی کرد تا وقتی کاربران در حال آماده‌سازی دستور غذا هستند، کم‌نور نشود. — @Katie Tweedy

آوردن ویژگی فوق‌العاده به وب با Wake Lock API

وقتی با یک دستگاه آشپزی می‌کنید، هیچ چیز آزاردهنده‌تر از این نیست که مجبور باشید با دست‌های کثیف یا حتی بینی‌تان صفحه را لمس کنید، وقتی صفحه خاموش می‌شود. بتی کراکر از خودش پرسید که چگونه می‌تواند ویژگی فوق‌العاده برنامه‌های iOS/Android خود را به برنامه وب منتقل کند. اینجا بود که آنها با پروژه فوگو و API قفل بیدارباش آشنا شدند.

API قفل بیداری راهی برای جلوگیری از کم نور شدن یا قفل شدن صفحه نمایش دستگاه فراهم می‌کند. این قابلیت، تجربیات جدیدی را ممکن می‌سازد که تاکنون به یک برنامه iOS/Android نیاز داشتند. API قفل بیداری، نیاز به راه‌حل‌های هک شده و بالقوه پرمصرف را کاهش می‌دهد.

درخواست قفل بیدارباش

برای درخواست قفل بیدارباش، باید متد navigator.wakeLock.request() را فراخوانی کنید که یک شیء WakeLockSentinel را برمی‌گرداند. شما از این شیء به عنوان یک مقدار نگهبان استفاده خواهید کرد. مرورگر می‌تواند به دلایل مختلف (مثلاً به دلیل کم بودن باتری) درخواست را رد کند، بنابراین بهتر است که این فراخوانی را در یک عبارت try…catch قرار دهید.

آزاد کردن قفل بیدارباش

همچنین به روشی برای آزاد کردن قفل بیداری نیاز دارید که با فراخوانی متد release() از شیء WakeLockSentinel قابل دستیابی است. اگر می‌خواهید قفل بیداری پس از گذشت مدت زمان مشخصی به طور خودکار آزاد شود، می‌توانید از 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 ) به اشتراک گذاشته شود. اگرچه فقط Betty Crocker اپلیکیشن iOS و اندروید داشت، اما هر سه سایت یک کد پایه مشترک داشتند، بنابراین آنها توانستند کامپوننت را یک بار پیاده‌سازی کنند و همانطور که در تصاویر زیر نشان داده شده است، آن را در همه جا مستقر کنند.

هنگام توسعه این کامپوننت بر اساس چارچوب مدرن‌شده سایت جدید، تمرکز زیادی روی لایه ViewModel از الگوی MVVM وجود داشت. تیم همچنین با در نظر گرفتن قابلیت همکاری، برنامه‌نویسی را انجام داد تا قابلیت عملکرد در چارچوب‌های قدیمی و جدید سایت را فراهم کند.

برای پیگیری قابلیت مشاهده و کاربردپذیری، بتی کراکر ردیابی تحلیلی را برای رویدادهای اصلی در چرخه عمر قفل بیداری ادغام کرد. این تیم از مدیریت ویژگی برای استقرار مؤلفه قفل بیداری در یک سایت واحد برای راه‌اندازی اولیه محصول استفاده کرد و سپس پس از نظارت بر میزان استفاده و سلامت صفحه، این ویژگی را در بقیه سایت‌ها مستقر کرد. آنها همچنان بر اساس میزان استفاده از این مؤلفه، داده‌های تحلیلی را رصد می‌کنند.

به عنوان یک راهکار ایمن برای کاربران، تیم یک زمان‌بندی اجباری برای غیرفعال کردن قفل بیدارباش پس از یک ساعت عدم فعالیت ایجاد کرد. پیاده‌سازی نهایی که آنها روی آن توافق کردند، در کوتاه‌مدت یک دکمه‌ی تغییر وضعیت در تمام صفحات دستور پخت در سایت‌هایشان بود. در درازمدت، آنها نمای صفحه دستور پخت را به روز رسانی شده در نظر دارند.

ظرف قفل بیداری

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 معیارهای زیر را گزارش کرد:

• از بین تمام کاربران بتی کراکر که مرورگرشان با Wake Lock API سازگار است، ۳.۵٪ از آنها این ویژگی را بلافاصله فعال کردند و آن را به ۵ اقدام برتر تبدیل کردند.
• مدت زمان جلسه برای کاربرانی که قفل بیدارباش را فعال کرده بودند، ۳.۱ برابر بیشتر از کاربرانی بود که این کار را نکرده بودند.
• نرخ پرش (bounce rate) برای کاربرانی که قفل بیدارباش (wake lock) را فعال کرده بودند، ۵۰٪ کمتر از کسانی بود که از ویژگی قفل بیدارباش استفاده نمی‌کردند.
• شاخص‌های قصد خرید برای کاربران قفل بیدارباش در مقایسه با سایر کاربران حدود ۳۰۰٪ بیشتر بود.

نتیجه‌گیری

بتی کراکر با استفاده از API قفل بیداری (Wake Lock) نتایج فوق‌العاده‌ای را مشاهده کرده است. شما می‌توانید با جستجوی دستور غذای مورد علاقه خود در هر یک از سایت‌های آنها ( BettyCrocker ، Pillsbury یا Tablespoon ) و فعال کردن گزینه‌ی «از تاریک شدن صفحه نمایش هنگام آشپزی جلوگیری کنید»، این ویژگی را خودتان آزمایش کنید.

موارد استفاده از قفل بیدارباش به سایت‌های دستور پخت غذا محدود نمی‌شود. نمونه‌های دیگر شامل برنامه‌های کارت پرواز یا بلیط است که باید صفحه نمایش را تا زمان اسکن بارکد روشن نگه دارند، برنامه‌هایی به سبک کیوسک که صفحه نمایش را به طور مداوم روشن نگه می‌دارند، یا برنامه‌های ارائه مبتنی بر وب که از به خواب رفتن صفحه نمایش در طول ارائه جلوگیری می‌کنند.

ما هر آنچه را که باید در مورد API قفل بیدارباش بدانید، در یک مقاله جامع در همین سایت گردآوری کرده‌ایم. از خواندن و آشپزی لذت ببرید!