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

Phillip Kriegel

Thomas Steiner

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

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

تم إطلاق تطبيقات Betty Crocker بضجة كبيرة في عام 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 إلى تطبيق الويب، فتعرّفت على مشروع 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

زر إيقاف/تفعيل قفل التنشيط في Pillsbury.com

مفتاح إيقاف/تفعيل قفل التنشيط في Tablespoon.com

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

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

الاستنتاجات

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

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

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