workbox-google-analytics

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

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

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

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

Workbox Google Analytics จะทำหน้าที่นี้ นอกจากนี้ยังเพิ่มเครื่องจัดการการดึงข้อมูลเพื่อแคชสคริปต์ analytics.js และ gtag.js เพื่อให้เรียกใช้แบบออฟไลน์ได้ด้วย สุดท้ายนี้ เมื่อส่งคำขอที่ล้มเหลวอีกครั้ง 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 ไม่มีมิติข้อมูลในตัวสำหรับการโต้ตอบออนไลน์กับออฟไลน์ อย่างไรก็ตาม คุณสามารถสร้างมิติข้อมูลของคุณเองเพื่อวัตถุประสงค์นี้โดยเฉพาะได้โดยใช้ฟีเจอร์ที่เรียกว่ามิติข้อมูลที่กำหนดเอง

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

  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 จะใช้กับคำขอที่ลองใหม่เท่านั้น ("ออฟไลน์") คุณจึงอาจต้องกำหนดค่าเริ่มต้นเป็น "online" สำหรับคำขออื่นๆ ทั้งหมดด้วย แม้ว่าจะไม่จำเป็นอะไรก็ตาม แต่จะทำให้อ่านรายงานได้ง่ายขึ้น

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

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

การทดสอบ Workbox Google Analytics

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

ประเภท

GoogleAnalyticsInitializeOptions

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

  • cacheName

    string ไม่บังคับ

  • parameterOverrides

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

  • hitFilter

    เป็นโมฆะ ไม่บังคับ

    ฟังก์ชัน hitFilter มีลักษณะดังนี้ 

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

    • params

      URLSearchParams

วิธีการ

initialize()

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

พารามิเตอร์