Automate Google Analytics with Cypress 👩‍💻

หากคุณมีปัญหากับการคลิกทุกปุ่มบนเว็บไซต์เพื่อเทสว่าการแทร็คอีเวนท์เพื่อส่งไปยัง Google analytics นั้นถูกต้องหรือไม่ คุณเข้ามาถูกบล็อคแล้ว วันนี้เราจะมาเขียน Automated Script เพื่อเช็คอีเวนท์กัน 🎯

ใครที่มี Project อยู่แล้ว สามารถติดตั้ง Tools Automated Test ที่ชื่อว่า Cypress ตามลิงก์ด้านล่างได้เลยนะคะ

JavaScript End to End Testing Framework

ส่วนใครที่ยังไม่มี Project สามารถ clone จาก https://github.com/taohuh/cypress-google-analytics ไปลองเล่นกันได้เลย :)

เริ่มจากหน้าเว็บไซต์เรามีปุ่มอยู่สองอัน แต่ละปุ่มก็มีการติด Tracking Event ไว้

มีแค่นี้เลย สองปุ่มง่ายๆ

ไฟล์ script.js สำหรับ Tracking event ไปยัง GA

— Event ชื่อ click_button

— Event Label มีค่าเท่ากับ Like Button หรือ Dislike Button ขึ้นอยู่กับตัวแปรที่ส่งเข้ามา

— Event Category มีค่าเป็น button

Event Label ของแต่ละปุ่มก็จะแตกต่างกันไปตามชนิดของปุ่ม

มาเริ่มเขียน Cypress Script กัน

1. เราประกาศ BaseUrl ไว้ใน cypress.json ตาม Best Practice ของ Cypress นะคะ (https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl)

https://docs.cypress.io/guides/references/best-practices.html#Setting-a-global-baseUrl

2. สร้างไฟล์ Spec ขึ้นมาใหม่ ในที่นี้เราให้ชื่อว่า ga.spec.js และเพิ่ม Describe สำหรับเทส

beforeEach — เพื่อให้แต่ละครั้งในการรันเทสใหม่ ทำการเปิดหน้าแรกของเว็บไซต์

3. เริ่มที่เคสแรก เราจะเช็คว่ามีการแทร็ค Event Label Like Button อย่างถูกต้องหรือไม่

สคริปท์ด้านบน เราทำการหาปุ่ม Like จากนั้นทำการ Click เพื่อส่งค่าไปยัง GA

จากนั้นเราใช้สิ่งที่เรียกว่า cy.window() เพื่ออ่านค่า window object ของหน้าเพจปัจจุบัน และภายใน object นี้เราจะดูที่คีย์ dataLayer ที่ GA ใช้ในการส่งค่าต่างๆนั้นเอง

เมื่อลอง Log มาดูจะพบว่า มี event ที่เราส่งไปเข้ามาใน dataLayer แล้ว ;-)

event ทั้งหมดที่เกิดขึ้นใน Array ของ dataLayer

ซึ่งเราจะเอา Array ตัวนี้มาชำแหละเพื่อแกะค่าแล้วนำมาเทสกัน

Filter เฉพาะ data ที่มีค่าเป็น event และ click_button

จากนั้นเราจะได้ Array Object ที่มีเฉพาะ event click_button

ลอง Log ตัวแปร eventClickButton ออกมาดูกัน ข้างในมีอะไรบ้าง

สิ่งที่เราต้องนำมาเทสคือคีย์ที่ชื่อว่า event_label และ event_category

ให้ทำการเพิ่มโค้ดดังนี้

ปกติแล้ว การ tracking event; event ที่เกิดขึ้นจะถูกเพิ่มเข้าไปใน Array DataLayer เรื่อยๆ ดังนั้นเราจึงต้องเอา event ตัวสุดท้ายมาใช้ โดยการระบุ lastIndex ใน event[lastIndex] และชี้ไปที่ช่องที่ 2 ของ Array event เพื่อนำค่า event_label และ event_category มาใช้นั่นเอง

event[lastIndex][2]

จากนั้นลองรัน Cypress ด้วยnpx cypress open เพื่อดูผลกัน

เขียวสวยงาม :D

มี Event ถูกยิงเข้ามาจริงๆที่ Dashboard Realtime

4. ถ้ามีการยิง Event หลายๆครั้งละ ตัวเทสยังทำงานได้ถูกต้องอยู่ไหม ?
เรามาเพิ่มโค้ดสำหรับ Click Dislike Button กัน

ใช้คำสั่งเหมือนเดิมเลย เปลี่ยนเพียง selector ของ element

ผลลัพท์ดังที่คาดไว้

🎉 จบแล้วกับการเทส Google analytics ง่ายๆด้วย Cypress ซึ่งบาง Project ก็จะมีการส่งค่าที่แตกต่างกันไป ลองนำไปประยุกต์กันดูนะคะ

📬 หากติดปัญหาหรือมีข้อสงสัยใดๆ คอมเมนท์ได้ด้านล่างเลยนะคะ ขอบคุณค่า

References

window

Developer Guide | Google Tag Manager for Web Tracking