workbox-google-analytics

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

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

Workbox Google Analytics แก้ปัญหานี้ให้กับผู้ใช้ Google Analytics โดยใช้ความสามารถของ Service Worker ในการตรวจหาคําขอที่ไม่สําเร็จ

Google Analytics ได้รับข้อมูลทั้งหมดผ่านคําขอ HTTP ไปยัง Measurement Protocol ซึ่งหมายความว่าสคริปต์ Service Worker สามารถเพิ่มตัวแฮนเดิลการดึงข้อมูลเพื่อตรวจหาคําขอที่ส่งไปยัง Measurement Protocol ที่ไม่สําเร็จ โดยสามารถจัดเก็บคำขอเหล่านี้ใน IndexedDB แล้วลองอีกครั้งในภายหลังเมื่อการเชื่อมต่อได้รับการคืนค่า

ซึ่ง Google Analytics ของ Workbox ก็ทำเช่นนั้น นอกจากนี้ ยังเพิ่มตัวแฮนเดิลการดึงข้อมูลเพื่อแคชสคริปต์ analytics.js และ gtag.js เพื่อให้ทํางานแบบออฟไลน์ได้ด้วย สุดท้าย เมื่อมีการลองส่งคําขอที่ไม่สําเร็จอีกครั้ง Workbox Google Analytics จะตั้งค่า (หรืออัปเดต) qt ในเพย์โหลดคําขอโดยอัตโนมัติด้วย เพื่อให้การประทับเวลาใน Google Analytics แสดงเวลาของการโต้ตอบของผู้ใช้ครั้งแรก

การเปิดใช้ Google Analytics ของ Workbox

หากต้องการเปิดใช้ Google Analytics ของ Workbox ให้เรียกใช้เมธอด initialize() ดังนี้

import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize();

นี่เป็นโค้ดเพียงรายการเดียวที่จําเป็นต่อการจัดคิวและลองส่งคําขอที่ส่งไปยัง Google Analytics ไม่สําเร็จอีกครั้ง และเป็นวิธีที่ง่ายที่สุดในการทําให้ Google Analytics ทํางานแบบออฟไลน์

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

หากต้องการแก้ไขปัญหานี้ คุณสามารถใช้ตัวเลือกการกําหนดค่าอย่างใดอย่างหนึ่งที่อธิบายไว้ด้านล่างเพื่อแก้ไขหรือกำกับเนื้อหาข้อมูลที่ส่งในคําขอที่ลองอีกครั้ง

การแก้ไขข้อมูลที่ส่ง

หากต้องการแยกความแตกต่างระหว่างคำขอที่ลองอีกครั้งกับคำขอที่ไม่ได้ลองอีกครั้ง คุณสามารถระบุตัวเลือกการกําหนดค่า parameterOverrides หรือ hitFilter

ตัวเลือกเหล่านี้ช่วยให้คุณแก้ไขพารามิเตอร์ Measurement Protocol ที่ส่งในคําขอที่ลองอีกครั้งได้ คุณควรใช้ตัวเลือก parameterOverrides เมื่อต้องการตั้งค่าพารามิเตอร์หนึ่งๆ เป็นค่าเดียวกันสําหรับคําขอที่ลองอีกครั้งทุกครั้ง คุณควรใช้ตัวเลือก hitFilter ในกรณีที่ต้องคํานวณค่าของพารามิเตอร์หนึ่งๆ ที่รันไทม์หรือดึงมาจากค่าของพารามิเตอร์อื่น

ตัวอย่างด้านล่างแสดงวิธีใช้ทั้ง 2 ตัวเลือก

ตัวอย่าง

การใช้มิติข้อมูลที่กำหนดเองเพื่อติดตามการโต้ตอบออนไลน์เทียบกับออฟไลน์

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

หากต้องการติดตามคําขอที่ Service Worker เล่นซ้ำโดยใช้มิติข้อมูลที่กำหนดเองกับ Workbox Google Analytics ให้ทําตามขั้นตอนต่อไปนี้

  1. สร้างมิติข้อมูลใหม่ที่กำหนดเองใน Google Analytics ตั้งชื่อ เช่น "สถานะเครือข่าย" และตั้งขอบเขตเป็น "Hit" (เนื่องจากการโต้ตอบใดๆ อาจเป็นแบบออฟไลน์ได้)

  2. จดจําดัชนีที่กําหนดให้กับมิติข้อมูลที่สร้างขึ้นใหม่ แล้วส่งดัชนีนั้นเป็นชื่อพารามิเตอร์ไปยังparameterOverridesตัวเลือกการกําหนดค่าในโค้ด Google Analytics ของ Workbox

    ตัวอย่างเช่น หากนี่คือมิติข้อมูลที่กำหนดเองรายการแรก ดัชนีของมิติข้อมูลจะเป็น 1 และชื่อพารามิเตอร์จะเป็น cd1 (หากดัชนีคือ 8 จะเป็น cd8)

    import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize({
  parameterOverrides: {
    cd1: 'offline',
  },
});

  3. (ไม่บังคับ) เนื่องจากระบบจะใช้ค่าใน parameterOverrides กับคำขอที่ลองอีกครั้ง ("ออฟไลน์") เท่านั้น คุณจึงอาจต้องตั้งค่าเริ่มต้นเป็น "ออนไลน์" สำหรับคำขออื่นๆ ทั้งหมดด้วย แม้ว่าจะไม่จําเป็น แต่การระบุชื่อจะช่วยให้อ่านรายงานได้ง่ายขึ้น

    ตัวอย่างเช่น หากใช้สนิปตําแหน่งการติดตาม analytics.js เริ่มต้นเพื่อติดตั้ง Google Analytics คุณอาจเพิ่มบรรทัด ga('set', 'dimension1', 'online') เพื่อใช้ค่าเริ่มต้น 'online' สําหรับมิติข้อมูลที่กำหนดเอง "สถานะเครือข่าย" สําหรับคําขอทั้งหมดที่ Service Worker ไม่ได้เล่นซ้ำ

    <script>
  (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
  (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
  m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
  })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');

  ga('create', 'UA-XXXXX-Y', 'auto');

  // Set default value of custom dimension 1 to 'online'
  ga('set', 'dimension1', 'online');

  ga('send', 'pageview');
</script>

การใช้เมตริกที่กําหนดเองเพื่อติดตามเวลาที่คําขอใช้เวลาอยู่ในคิว

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

  1. สร้างเมตริกที่กําหนดเองใหม่ใน Google Analytics ตั้งชื่อ เช่น "เวลาคิวออฟไลน์" กำหนดขอบเขตเป็น "Hit" และกำหนดประเภทการจัดรูปแบบเป็น "เวลา" (เป็นวินาที)

  2. ใช้ตัวเลือก hitFilter เพื่อรับค่าของ qt พารามิเตอร์ แล้วหารด้วย 1,000 (เพื่อแปลงเป็นวินาที) จากนั้นตั้งค่านั้นเป็นพารามิเตอร์ที่มีดัชนีของเมตริกที่สร้างขึ้นใหม่ หากเมตริกนี้เป็นเมตริกที่กําหนดเองรายการแรก ชื่อพารามิเตอร์จะเป็น 'cm1' 

    import * as googleAnalytics from 'workbox-google-analytics';

googleAnalytics.initialize({
  hitFilter: (params) => {
    const queueTimeInSeconds = Math.round(params.get('qt') / 1000);
    params.set('cm1', queueTimeInSeconds);
  },
});

การทดสอบ Google Analytics ของ Workbox

เนื่องจาก Google Analytics ของ Workbox ใช้การซิงค์ในเบื้องหลังเพื่อเล่นเหตุการณ์ซ้ำ การทดสอบจึงอาจทําได้ยาก อ่านเพิ่มเติมได้ที่การทดสอบการซิงค์ Workbox ในเบื้องหลัง

ประเภท

GoogleAnalyticsInitializeOptions

พร็อพเพอร์ตี้

  • cacheName

    สตริง ไม่บังคับ

  • parameterOverrides

    ออบเจ็กต์ ไม่บังคับ

  • hitFilter

    void ไม่บังคับ

    ฟังก์ชัน hitFilter มีรูปแบบดังนี้ 

    (params: URLSearchParams) => {...}

    • params

      URLSearchParams

เมธอด

initialize()

workbox-google-analytics.initialize(
  options?: GoogleAnalyticsInitializeOptions,
)

พารามิเตอร์