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

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

Phillip Kriegel

Thomas Steiner

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

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

Betty Crocker เปิดตัวแฟนๆ มากมายในปี 2014 โดยเมื่อเร็วๆ นี้ Betty Crocker นำแอปออกจาก Apple App Store และ Google Play Store หลังจากที่ลดลำดับความสำคัญลง ทีม Betty Crocker ต้องการเพิ่มฟีเจอร์ใหม่ๆ ลงในเว็บไซต์บนอุปกรณ์เคลื่อนที่แทนแอป iOS/Android มาเป็นเวลานาน แพลตฟอร์มทางเทคนิคที่ใช้สร้างแอป iOS/Android นั้นล้าสมัยและธุรกิจไม่มีทรัพยากรเพื่อรองรับการอัปเดตและการดูแลรักษาแอปในอนาคต นอกจากนี้ เว็บแอปยังมีปริมาณการเข้าชมมากขึ้น ทันสมัยขึ้น และเพิ่มประสิทธิภาพได้ง่ายขึ้น

แอป iOS/Android มีฟีเจอร์เจ๋งๆ ที่ผู้ใช้ชื่นชอบอยู่แล้ว 1 อย่าง ได้แก่

เคล็ดลับมือโปรการทำอาหารยุคมิลเลนเนียล: แอป @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 คุณจะใช้ออบเจ็กต์นี้เป็นค่าเซนติเนล เบราว์เซอร์อาจปฏิเสธคำขอด้วยเหตุผลหลายประการ (เช่น เนื่องจากแบตเตอรี่เหลือน้อยเกินไป) ดังนั้นวิธีที่ดีที่สุดคือการปิดสายด้วยคำสั่ง try…catch

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

คุณยังต้องมีวิธีปล่อย Wake Lock ด้วย ซึ่งทำได้โดยการเรียกใช้เมธอด 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);

การติดตั้งใช้งาน

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

หลังจากที่ต้นแบบมีประโยชน์แล้ว บริษัทก็ออกแบบคอมโพเนนต์ Vue.js ให้แบรนด์ต่างๆ ใช้ร่วมกันได้ (BettyCrocker, Pillsbury และ Tablespoon) แม้ว่า Betty Crocker จะมีแอป iOS และ Android เพียงแห่งเดียว แต่ทั้ง 3 เว็บไซต์มีฐานของโค้ดที่ใช้ร่วมกัน ทำให้สามารถนำคอมโพเนนต์ไปใช้เพียงครั้งเดียวและนำไปใช้ได้ทุกที่ ดังที่แสดงในภาพหน้าจอด้านล่าง

การสลับ Wake Lock ของ BettyCrocker.com

เปิด/ปิด Wake Lock ของ Pillsbury.com

เปิด/ปิด Wake Lock ของ Tablespoon.com

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

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

ทีมได้สร้างระยะหมดเวลาที่บังคับไว้เพื่อปิดใช้ 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 นานกว่าผู้ใช้ที่ไม่เปิดใช้ Wake Lock 3.1 เท่า
• อัตราตีกลับสำหรับผู้ใช้ที่เปิดใช้ Wake Lock จะต่ำกว่าผู้ใช้ที่ไม่ใช้ฟีเจอร์ Wake Lock อยู่ 50%
• ตัวบ่งชี้ความตั้งใจในการซื้อสูงขึ้นประมาณ 300% สำหรับผู้ใช้ Wake Lock เมื่อเทียบกับผู้ใช้ทั้งหมด

3.1_×

ระยะเวลาเซสชันนานขึ้น

50_%

ลดอัตราตีกลับ

300_%

ตัวบ่งชี้ความตั้งใจในการซื้อสูงขึ้น

บทสรุป

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

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

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

ข้อความแสดงการยอมรับ

รูปภาพคนกำลังนวดแป้งจาก Julian Hochgesang ใน Unsplash