دراسة حالة حول Wake Lock API: زيادة بنسبة% 300 في مؤشرات الرغبة في الشراء على BettyCrocker.com

لا شيء أسوأ من أن يتم إيقاف شاشة جهازك الجوّال أثناء تحضير إحدى خطوات الوصفة. تعرَّف على الطريقة التي استخدم بها موقع الطهي BettyCrocker.com واجهة برمجة التطبيقات Wake Lock API لمنع حدوث ذلك.

على مدار قرن تقريبًا، كانت Betty Crocker هي مصدر تعليمات الطهي الحديثة وتطوير الوصفات الموثوق بها في الولايات المتحدة. تم إطلاق الموقع الإلكتروني BettyCrocker.com في عام 1997، ويتلقّى اليوم أكثر من 12 مليون زائر شهريًا. بعد تنفيذ واجهة Wake Lock API، كانت مؤشراتها إلى الرغبة في الشراء أعلى بنسبة% 300 تقريبًا لمستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.

تطبيقات iOS وAndroid التي تم إيقافها

تم إطلاق بيتي كروكر كثير من المعجبين في عام 2014، وأصدرت مؤخرًا تطبيقاتها من متجر Apple App Store ومتجر Google Play بعد إلغاء أولوياتها. لفترة طويلة، فضّل فريق 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.

إزالة قفل التنشيط

ستحتاج أيضًا إلى طريقة لإلغاء قفل التنشيط، ويتم ذلك من خلال استدعاء طريقة 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);

التنفيذ

من خلال تطبيق الويب الجديد، سيتمكّن المستخدمون من التنقّل بسهولة في الوصفة، وإكمال الخطوات، وحتى الابتعاد عن الجهاز بدون قفل الشاشة. لتحقيق هذا الهدف، قام الفريق أولاً ببناء نموذج أوّلي سريع للواجهة الأمامية كدليل على المفهوم وجمع مدخلات تجربة المستخدم.

بعد أن تبيّن أنّ النموذج الأوّلي مفيد، صمم الفريق مكوّن Vue.js يمكن مشاركته على جميع علاماتها التجارية (BettyCrocker، Pillsbury وTablespoon). على الرغم من أنّ Betty Crocker هي الشركة الوحيدة التي كانت لديها تطبيقات iOS وAndroid، تشترك المواقع الإلكترونية الثلاثة في قاعدة رموز برمجية، ما سمح لها بتنفيذ المكوّن مرة واحدة ونشره في كل مكان، كما هو موضّح في لقطات الشاشة أدناه.

زر التبديل لقفل التنشيط على BettyCrocker.com
مفتاح تفعيل/إيقاف قفل التنشيط في BettyCrocker.com
إيقاف/تفعيل قفل التنشيط على Pillsbury.com
مفتاح تفعيل قفل التنشيط في Pillsbury.com
إيقاف/تفعيل قفل التنشيط في Tablespoon.com
إيقاف/تفعيل قفل التنشيط على Tableau.

عند تطوير المكوّن استنادًا إلى إطار العمل المُعدَّل للموقع الإلكتروني الجديد، تم التركيز بشكل كبير على ViewModel طبقة نمط MVVM. فكّر الفريق أيضًا في إمكانية التشغيل التفاعلي عند البرمجة، لإيقاف الوظائف في إطارات العمل القديمة والجديدة للموقع الإلكتروني.

لتتبُّع مدى إمكانية العرض وسهولة الاستخدام، دمجت شركة 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% منهم الميزة على الفور، ما جعلها من بين أهم 5 إجراءات.
  • كانت مدة الجلسة للمستخدمين الذين فعّلوا قفل التنشيط أطول بـ 3.1 مرة مقارنةً بالمستخدمين الذين لم يفعّلوا هذا القفل.
  • كان معدّل الارتداد للمستخدمين الذين فعّلوا ميزة "قفل التنشيط" أقل بنسبة %50 مقارنةً بالمستخدمين الذين لا يستخدمون هذه الميزة.
  • كانت مؤشرات نية الشراء أعلى بنسبة %300 تقريبًا لدى مستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.

3.1×

مدّة الجلسة الأطول

‫50%

انخفاض في معدّل الارتداد

300%

مؤشّرات عالية للرغبة في الشراء

الاستنتاجات

شهدت "بيتي كروكر" نتائج رائعة من خلال استخدام واجهة برمجة تطبيقات Wake Lock API. يمكنك اختبار الميزة بنفسك من خلال البحث عن وصفتك المفضّلة على أيّ من المواقع الإلكترونية (BettyCrocker، Pillsbury أو Tablespoon) وتفعيل خيار منع إطفاء الشاشة أثناء الطهي.

لا تقتصر حالات استخدام عمليات قفل التنشيط على المواقع الإلكترونية التي تعرض وصفات طعام. ومن الأمثلة الأخرى تطبيقات بطاقة صعود الطائرة أو تطبيقات التذاكر التي تحتاج إلى إبقاء الشاشة مفعَّلة إلى أن يتم مسح الرمز الشريطي ضوئيًا، أو تطبيقات على طراز Kiosk تُبقي الشاشة تعمل باستمرار، أو تطبيقات العرض التقديمي المستندة إلى الويب التي تمنع الشاشة من النوم أثناء العرض التقديمي.

لقد جمعنا كل ما تحتاج إلى معرفته حول Wake Lock API في مقالة شاملة على هذا الموقع الإلكتروني. نتمنى لك قراءة ممتعة وطهيًا لذيذًا.

الشكر والتقدير

صورة شخص يعجن العجين من موقع Flickr، شكرًا لصاحبها Julian Hochgesang على Unsplash.