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

Phillip Kriegel

Thomas Steiner

Betty Crocker เป็นแหล่งข้อมูลคำแนะนำการทำอาหารสมัยใหม่ และการพัฒนาสูตรอาหารที่เชื่อถือได้ของอเมริกามาเกือบศตวรรษ เว็บไซต์ BettyCrocker.com เปิดตัวในปี 1997 และปัจจุบันมีผู้เข้าชมมากกว่า 12 ล้านคนต่อเดือน หลังจากติดตั้งใช้งาน Wake Lock API แล้ว ตัวบ่งชี้ความตั้งใจซื้อสูงขึ้นประมาณ 300% สำหรับผู้ใช้ Wake Lock เมื่อเทียบกับผู้ใช้ทั้งหมด

แอป 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 ไปยังเว็บแอปได้อย่างไร และนั่นคือตอนที่พวกเขาได้รู้จักโปรเจ็กต์ Fugu และ Wake Lock API

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

การขอ Wake Lock

หากต้องการขอ Wake Lock คุณต้องเรียกใช้เมธอด navigator.wakeLock.request() ที่แสดงผลออบเจ็กต์ WakeLockSentinel คุณจะใช้ออบเจ็กต์นี้เป็นค่า Sentinel เบราว์เซอร์อาจปฏิเสธคำขอด้วยเหตุผลต่างๆ (เช่น แบตเตอรี่เหลือน้อยเกินไป) ดังนั้นจึงควรเรียกใช้ฟังก์ชันในคำสั่ง 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 ต่ำกว่าผู้ที่ไม่ได้ใช้ฟีเจอร์ Wake Lock 50%
• ตัวบ่งชี้ความตั้งใจในการซื้อสูงกว่าประมาณ 300% สำหรับผู้ใช้ Wake Lock เมื่อเทียบกับผู้ใช้ทั้งหมด

บทสรุป

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

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

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