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

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

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

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

بعد إطلاق شركة Betty Crocker في عام 2014، بعد إطلاقها لعدد كبير من المعجبين في 2014، أزالت تطبيقاتها مؤخرًا من متجر Apple App Store و"متجر Google Play" بعد إزالة الأولوية في تطبيقاتها. فضّل فريق Betty Crocker منذ فترة طويلة إضافة ميزات جديدة إلى موقع الويب للأجهزة الجوّالة بدلاً من تطبيقات iOS/Android. كانت المنصة الفنية التي تم إنشاء تطبيقات iOS/Android عليها قديمة، ولم يكن لدى النشاط التجاري الموارد لدعم تحديث التطبيقات وصيانتها مستقبلاً. كان تطبيق الويب أيضًا بشكل موضوعي أكبر من حيث عدد الزيارات وأكثر حداثة وأسهل في التحسين.

تحتوي تطبيقات iOS/Android على ميزة قاتلة واحدة أحببتها المستخدمين:

نصيحة لمحترفي الطهي من جيل الألفية: لا يختفي تطبيق @BettyCrocker المتوافق مع الأجهزة الجوّالة أو يقفل أثناء متابعة وصفة طعام. —@AvaBeilke

يطهو 80٪ من الأشخاص باستخدام جهاز في المطبخ، ولكن يمثل تعتيم الشاشة وقفلها مشكلة. ما هي الإجراءات التي نفّذتها @BettyCrocker؟ تم تحديث التطبيق إلى "عدم" تعتيم الشاشة عندما يكون المستخدمون في وصفة طعام. —@KatieTweedy

إتاحة الميزة الرئيسية على الويب باستخدام Wake Lock API

فعند الطهي باستخدام جهاز، لن تشعر بالإحباط سوى عند لمس الشاشة بيديك متلعثتين أو حتى أنفك عندما تنطفئ الشاشة. سألت بيتي كروكر أنفسهم عن كيفية نقل هذه الميزة من تطبيقات 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). على الرغم من أن بيتي كروكر لديها تطبيقات iOS وAndroid فقط، فإن المواقع الثلاثة لديها قاعدة رموز مشتركة، لذلك تمكنت من تنفيذ المكونات مرة واحدة ونشرها في كل مكان، كما هو موضح في لقطات الشاشة أدناه.

.

عند تطوير المكوِّن استنادًا إلى إطار العمل المحدَّث للموقع الإلكتروني الجديد، تم التركيز بشكل كبير على طبقة 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٪ لمستخدمي قفل التنشيط مقارنةً بجميع المستخدمين.

الاستنتاجات

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

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

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

شكر وتقدير

صورة الشخص الذي يعطس العجين مقدَّمة من Julian Hochgesang على موقع Unسبلاش