GOOGLE ANALYTICS พร้อมแอปพลิเคชันหน้าเดียว (SPA) ใน VUEJS

Google Analytics พร้อมแอปพลิเคชันหน้าเดียว (SPA) ใน VueJs

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

ใช้เครื่องมือให้น้อยที่สุด แต่ใช้ให้มากที่สุด

เมื่อฉันไปถึง ผู้ใช้ใช้เว็บแอปใหม่ล่าสุดของเราอย่างไร คำถาม คำตอบที่ชัดเจนคือการดูว่าเราจะใช้ Google Analytics ได้อย่างไร เครื่องมือและประสบการณ์ที่หลากหลายของพวกเขาในการติดตามการใช้งานเว็บทำให้ไม่สามารถเพิกเฉยได้ เหนือสิ่งอื่นใด Google นั้นยอดเยี่ยมในเรื่องความปลอดภัยและประสิทธิภาพ และค่าใช้จ่ายก็แทบจะเป็นศูนย์ (อย่างน้อยก็ในตอนนี้)

ฟังก์ชั่นการสูญเสียที่กำหนดเอง keras

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

เข้าสู่เหตุการณ์ Google Analytics

การติดตามกิจกรรม Google Analytics ค่อนข้างชัดเจนเนื่องจากการโต้ตอบกับแอปเป็นเหตุการณ์ไม่มากก็น้อย

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

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

index.html

 window.GA_TRACKING_ID = 'UA-XXXXXXXXX-XX'; window.dataLayer = window.dataLayer || []; function gtag(){dataLayer.push(arguments);} gtag('js', new Date()); gtag('config', GA_TRACKING_ID, { app_name: 'Monitive Web App', send_page_view: false }); . . . . . . .

ส่วนสำคัญข้างต้นคือ |_+_| นิดหน่อย. ซึ่งทำให้โค้ด GA ไม่ส่งการดูหน้าเว็บเมื่อโหลดแอปในหน้าต่างเบราว์เซอร์ และเราต้องการสิ่งนี้เพราะเรากำลังจะส่งมุมมองจากโค้ดการแสดงผลหน้าจอของเรา

สำหรับ VueJS เนื่องจากเราใช้ vue-router สิ่งที่เราต้องทำเพื่อส่งการดูหน้าเว็บเมื่อผู้ใช้เรียกดูแอปคือเพิ่ม an หลัง() จัดการเหตุการณ์:

router.js

send_page_view: false

ฉันบันทึกรหัสติดตามลงในแอตทริบิวต์หน้าต่างส่วนกลาง เพื่อให้เราสามารถกำหนดรหัสติดตามได้ในที่เดียวและใช้งานได้ทั่วถึง นอกจากนี้ยังช่วยตั้งค่ารหัสการติดตามที่สอดคล้องกันสำหรับการพัฒนาและสภาพแวดล้อมการผลิตในเวลาปรับใช้ ดังนั้นเมื่อใดก็ตามที่เราพยายามใช้ในการพัฒนา การทดสอบ หรือการปรับใช้การจัดเตรียม เมตริกสำหรับการผลิตจะไม่ได้รับผลกระทบ

ซื้อเหรียญ gsx ได้ที่ไหน

ที่นั่น! ตอนนี้เรามีการดูหน้าเว็บใน VueJS SPA ของเราแล้ว

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

หลังจากการระดมความคิดสองสามวัน ประเภทของเหตุการณ์ต่อไปนี้ก็ปรากฏขึ้น:

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

เนื่องจากสิ่งเหล่านี้จะถูกเพิ่มเข้ามาทั่วทุกแห่งในโค้ดของเรา เราจึงสร้างชุดวิธีมิกซ์อินผู้ช่วยเหลือสี่วิธี เพื่อใช้ได้ทุกที่อย่างง่ายดาย:

helpers.js

router.afterEach((to) => { gtag('config', window.GA_TRACKING_ID, { page_path: to.fullPath, app_name: 'Monitive Web App', send_page_view: true, }); });

เนื่องจากเหตุการณ์ส่วนใหญ่ที่การนำทางคลิกที่ลิงก์หรือปุ่มต่างๆ เราจึงมีวิธีการช่วยเหลืออย่างรวดเร็วสำหรับสิ่งเหล่านี้:

helpers-click.js

const helpers = { methods: { gaNavigation(action, label) { gtag('event', action, { event_category: 'navigation', event_label: label, }); }, gaEngagement(action, label) { gtag('event', action, { event_category: 'engagement', event_label: label, }); }, gaInteraction(action, label) { gtag('event', action, { event_category: 'interaction', event_label: label, }); }, gaExperience(action, label) { gtag('event', action, { event_category: 'experience', event_label: label, non_interaction: true, }); }, }, // §.methods };

ตอนนี้ ถ้าเราต้องการติดตามเหตุการณ์การนำทาง เราก็สามารถทำได้ในเทมเพลต Vue ใดๆ ดังนี้:

gaClickLink(label) { gtag('event', 'click_link', { event_category: 'navigation', event_label: label, }); }, gaClickCta(label) { gtag('event', 'click_cta', { event_category: 'navigation', event_label: label, }); },

หรือในวิธีการบางอย่างเช่น:

ga-interaction.js

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

เหตุการณ์ดูหน้าจอ

แม้ว่าฉันจะไม่พบเอกสารเกี่ยวกับเรื่องนี้มากนัก แต่ดูเหมือนว่า Google Analytics จะสนับสนุนการติดตาม SPA โดยส่งเหตุการณ์ประเภทพิเศษที่เรียกว่า screen_view ’ สำหรับฉัน ไม่ชัดเจนว่าฉันสามารถดูข้อมูลการดูหน้าจอได้ที่ไหน และความแตกต่างระหว่างการดูหน้าเว็บกับการดูหน้าจอคืออะไร ดังนั้นฉันจึงเพิ่มเหตุการณ์ screen_view พร้อมกับกิจกรรมการดูหน้าเว็บใน |_+_| จัดการเหตุการณ์:
router-screen.js

methods: { submit() { this.$root.gaInteraction('save_monitor'); // ...submit code } }

จุดประสงค์ของฉันในเรื่องนี้คือการดูในอีกไม่กี่สัปดาห์หรือหลายเดือนว่าข้อมูลนี้นำข้อมูลที่มีค่ามาให้หรือไม่ หรือดีกว่าเหตุการณ์การดูเพจหลอกในทางใดทางหนึ่ง

ข้อมูลเชิงลึก

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

ข้อมูลประเภทนี้ไม่เคยแทนที่การแชทที่ดีกับลูกค้า แต่ช่วยระบุคุณลักษณะหรือองค์ประกอบอินเทอร์เฟซที่พวกเขาใช้หรือไม่ได้ใช้ อุปกรณ์ใดที่พวกเขาใช้ Monitive และมีส่วนร่วมกับแอปมากน้อยเพียงใด

bcx crypto คืออะไร?

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

#vueis #javascript # vue-js

Google Analytics พร้อมแอปพลิเคชันหน้าเดียว (SPA) ใน VueJs