กรณีศึกษา Wake Lock API: ตัวชี้วัดความตั้งใจในการซื้อเพิ่มขึ้น 300% บน BettyCrocker.com

การทำอาหารด้วยอุปกรณ์เคลื่อนที่ไม่มีอะไรจะแย่ไปกว่าการปิดหน้าจอ ระหว่างขั้นตอนของสูตรอาหาร ดูวิธีที่เว็บไซต์การทำอาหารอย่าง BettyCrocker.com ใช้ Wake Lock API เพื่อป้องกันไม่ให้เกิดเหตุการณ์เช่นนี้ขึ้น

Phillip Kriegel

Thomas Steiner

แอป iOS และ Android ที่เลิกใช้งานแล้ว

เปิดตัวสู่การแฟนพันธุ์แท้จำนวนมากในปี 2014 Betty Crocker เพิ่งนำแอปของตนออกจาก Apple App Store และ Google Play Store หลังจากถูกลดลำดับความสำคัญ ทีมงาน 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 ช่วยลดความจำเป็นในการแฮ็กและวิธีแก้ปัญหาที่อาจกินพลังงาน

กำลังขอ Wake Lock

หากต้องการขอ Wake Lock คุณต้องเรียกใช้เมธอด navigator.wakeLock.request() ที่แสดงออบเจ็กต์ WakeLockSentinel คุณจะใช้ออบเจ็กต์นี้เป็น sentinel value เบราว์เซอร์สามารถปฏิเสธคำขอด้วยเหตุผลหลายประการ (เช่น เนื่องจากแบตเตอรี่ต่ำเกินไป) ดังนั้นจึงควรรวมการโทรไว้ในคำสั่ง try…catch

กำลังปล่อย Wake Lock

คุณต้องมีวิธีปลดล็อก Wake Lock ด้วย ซึ่งทำได้โดยการเรียกเมธอด release() ของออบเจ็กต์ WakeLockSentinel หากต้องการปล่อย Wake Lock โดยอัตโนมัติ หลังจากผ่านระยะเวลาช่วงหนึ่งไปแล้ว คุณสามารถใช้ 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 และ Android ทั้ง 3 เว็บไซต์มีฐานของโค้ดร่วมกัน ทำให้สามารถใช้คอมโพเนนต์เพียงครั้งเดียว และนำไปใช้ได้ทุกที่ ตามที่แสดงในภาพหน้าจอด้านล่าง

วันที่

เมื่อพัฒนาคอมโพเนนต์ ตามเฟรมเวิร์กที่ปรับให้ทันสมัยของเว็บไซต์ใหม่ เราให้ความสำคัญอย่างยิ่งกับ ViewModel ของรูปแบบ MVVM ทีมยังตั้งโปรแกรมโดยคำนึงถึงความสามารถในการทำงานร่วมกัน เพื่อเปิดใช้ฟังก์ชันการทำงานในกรอบงานเดิมและแบบใหม่ของเว็บไซต์

Betty Crocker ผสานรวมการติดตามข้อมูลวิเคราะห์เพื่อติดตามความสามารถในการแสดงตัวโฆษณาและความสามารถในการใช้งาน สำหรับกิจกรรมหลักในวงจรการทำงานขณะล็อก ทีมใช้การจัดการฟีเจอร์เพื่อทำให้คอมโพเนนต์ Wake Lock ใช้งานได้ ไปยังเว็บไซต์เดียวสำหรับการเปิดตัวเวอร์ชันที่ใช้งานจริง จากนั้นจึงติดตั้งใช้งานฟีเจอร์นี้กับเว็บไซต์ที่เหลือหลังจากตรวจสอบการใช้งานและประสิทธิภาพของหน้าเว็บ โดยตรวจสอบข้อมูลวิเคราะห์ตามการใช้งานคอมโพเนนต์นี้ต่อไป

ทีมจึงบังคับให้หมดเวลา เพื่อความปลอดภัยของผู้ใช้ เพื่อปิดการทำงานขณะล็อกหลังจากไม่มีการใช้งานเป็นเวลา 1 ชั่วโมง การติดตั้งใช้งานขั้นสุดท้ายที่ได้ตกลงกันไว้ อยู่ในช่วงเวลาสั้นๆ คือเปิดสวิตช์หน้าสูตรอาหารทั้งหมดทั่วทั้งเว็บไซต์ ในระยะยาว พวกเขาคิดถึงยอดดูหน้าสูตรอาหารที่ปรับปรุงใหม่

คอนเทนเนอร์ Wake Lock

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');
      }
    },
  },
};

คอมโพเนนต์ Wake Lock

<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 ใช้งานได้ในเว็บไซต์ทั้ง 3 แห่งแล้วและให้ผลลัพธ์ที่ยอดเยี่ยม ในช่วงระยะเวลาตั้งแต่วันที่ 10 ธันวาคม 2019 ถึง 10 มกราคม 2020 BettyCrocker.com รายงานเมตริกต่อไปนี้

• ในบรรดาผู้ใช้ Betty Crocker ทั้งหมดที่มีเบราว์เซอร์ ที่ทำงานร่วมกับ Wake Lock API ได้ ครีเอเตอร์จำนวน 3.5% เปิดใช้ฟีเจอร์นี้ทันที ทำให้เป็นการดำเนินการยอดนิยม 5 อันดับแรก
• ระยะเวลาเซสชันสำหรับผู้ใช้ที่เปิดใช้ Wake Lock คือนานขึ้น 3.1 เท่า เมื่อเทียบกับผู้ใช้ที่ไม่มี
• อัตราตีกลับของผู้ใช้ที่เปิดใช้ Wake Lock ลดลง 50% เมื่อเทียบกับผู้ที่ไม่ได้ใช้ฟีเจอร์ Wake Lock
• ตัวบ่งชี้ความตั้งใจในการซื้อสูงขึ้นประมาณ 300% สำหรับผู้ใช้ Wake Lock เมื่อเทียบกับผู้ใช้ทั้งหมด

บทสรุป

Betty Crocker พบผลลัพธ์ที่ยอดเยี่ยมเมื่อใช้ Wake Lock API คุณสามารถทดสอบฟีเจอร์นี้ได้ด้วยตนเองโดยการค้นหาสูตรอาหารที่คุณชื่นชอบในเว็บไซต์ของพวกเขา (BettyCrocker, Pillsbury หรือ Tablespoon) และเปิดใช้ปุ่มสลับป้องกันไม่ให้หน้าจอมืดขณะที่คุณทำอาหาร

กรณีการใช้งานสำหรับ Wake Lock จะไม่หยุดทำงานในเว็บไซต์สูตรอาหาร ตัวอย่างอื่นๆ ได้แก่ แอปบอร์ดดิ้งพาสหรือแอปตั๋วที่ต้องเปิดหน้าจอไว้ จนกว่าจะมีการสแกนบาร์โค้ด แอปรูปแบบคีออสก์ที่เปิดหน้าจอไว้ตลอดเวลา หรือแอปการนำเสนอบนเว็บที่ป้องกันไม่ให้หน้าจอเข้าสู่โหมดสลีประหว่างการนำเสนอ

เราได้รวบรวมทุกอย่างที่คุณจำเป็นต้องทราบเกี่ยวกับ Wake Lock API ในบทความที่ครอบคลุมในเว็บไซต์นี้ ขอให้มีความสุขกับการอ่านและการทำอาหาร

กิตติกรรมประกาศ

รูปภาพจากคนกำลังนวดแป้ง จูเลียน โฮชเกซัง บน UnSplash