สวัสดีเพื่อนๆ โปรแกรมเมอร์ทุกคน วันนี้ผมจะมาแชร์เรื่องการทำงานของ Tracking Pixel ฟีเจอร์ยอดฮิตในวงการ Web Analytics ที่หลายคนอาจเคยได้ยินชื่อ แต่ยังสงสัยว่ามันทำงานยังไง แล้วเราจะเขียนโค้ดยังไงให้ใช้มันเก็บข้อมูลผู้ใช้ได้อย่างแนบเนียน ไปดูกันเลย!
Tracking Pixel คืออะไร?
Tracking Pixel คือรูปภาพขนาดจิ๋ว (ขนาดแค่ 1x1 px) ที่ถูกฝังอยู่ในหน้าเว็บ มีลักษณะโปร่งใส มองไม่เห็นด้วยตาเปล่า แต่มีพลังในการเก็บข้อมูลผู้ใช้อย่างละเอียดยิบ ตั้งแต่ IP Address, อุปกรณ์ที่ใช้, ไปจนถึงพฤติกรรมการคลิก, การสกอร์ลเพจ และอีกสารพัด
แต่จะให้รูปภาพเก็บข้อมูลได้ยังไง? คำตอบคือมันไม่ได้ทำคนเดียว แต่ต้องอาศัย JavaScript ที่ถูกเขียนมาเพื่อส่งข้อมูลกลับไปที่เซิร์ฟเวอร์นั่นเอง พูดง่ายๆ ก็คือ รูปภาพเป็นแค่ Front แต่ JS ต่างหากที่เป็นตัวเก็บข้อมูลจริงๆ
ตัวอย่างการเขียนโค้ด Tracking Pixel
เรามาลองเขียนโค้ด Tracking Pixel อย่างง่ายที่เก็บอีเวนต์การคลิกกันนะ
<img src="https://www.example.com/pixel.gif?event=click" style="display:none;" />
<script>
document.addEventListener("click", function() {
var img = document.createElement("img");
img.src = "https://www.example.com/pixel.gif?event=click×tamp=" + Date.now();
img.style.display = "none";
document.body.appendChild(img);
});
</script>
จากโค้ดด้านบน เราสร้างแท็ก <img>
ที่มี src เป็น URL ของรูปภาพพิกเซล และมีพารามิเตอร์ event
เพิ่มเข้าไปเพื่อระบุว่าเป็นอีเวนต์คลิก
จากนั้นเราใช้ JavaScript ตรวจจับอีเวนต์คลิกผ่าน addEventListener
เมื่อมีคลิกเกิดขึ้น เราจะสร้างแท็ก <img>
ขึ้นมาใหม่แบบไดนามิก พร้อมแนบ timestamp ปัจจุบันเข้าไปใน URL เพื่อให้เซิร์ฟเวอร์รู้ว่าคลิกเกิดขึ้นเมื่อไหร่ แล้วซ่อนรูปนี้ไว้ (ไม่งั้นหน้าเว็บจะเต็มไปด้วยรูปพิกเซลแน่ๆ)
เท่านี้เราก็มี Tracking Pixel แบบง่ายๆ ที่สามารถเก็บอีเวนต์คลิกได้แล้ว!
ยิงข้อมูลไปเซิร์ฟเวอร์ภายนอก
บางครั้งเราอยากส่งข้อมูลไปให้บริการวิเคราะห์ภายนอกอย่าง Google Analytics ด้วย ซึ่งก็ไม่ยากเลย แค่เพิ่มโค้ดนิดหน่อยตามนี้
// ตรวจสอบว่ามี global ID ของ Analytics ไหม
var globalId = getUserIdFromCookie("_ga");
// ส่งข้อมูลไปเซิร์ฟเวอร์ของ Analytics
var data = {
...userData,
global_id: globalId,
// เพิ่มข้อมูลอื่นๆ ที่อยากส่ง
};
var trackingUrl = "https://www.google-analytics.com/collect";
sendData(data, trackingUrl);
จากโค้ดข้างบน เราเช็กว่าเว็บเราเคยถูกติดตั้ง Google Analytics ผ่านการหา ID ใน Cookie ไหม ถ้ามีก็ส่ง ID นั้นไปพร้อมกับข้อมูลอื่นๆ ผ่านฟังก์ชัน sendData
ไปยัง URL ของ Analytics ซึ่งจะช่วยให้เราเชื่อมโยงข้อมูลจากเว็บเราเข้ากับข้อมูลอื่นๆ ในแพลตฟอร์มได้
ระบุตัวตนผู้ใช้ข้ามเว็บ
อีกเรื่องที่ท้าทายคือการระบุว่า ผู้ใช้ที่เข้ามาในเว็บเรา เคยเข้ามาเว็บอื่นที่เราติดตามด้วยไหม ซึ่งมีเทคนิคให้ใช้หลายอย่าง เช่น
- Third-party Cookie: ใช้คุกกี้ที่ Set โดยโดเมนอื่นเพื่อเชื่อมข้อมูลข้ามเว็บ แต่อาจโดนเบราว์เซอร์ปัจจุบันบล็อก
- ID ในลิงก์: แชร์ข้อมูลผู้ใช้ผ่าน ID บน URL ที่ลิงก์ข้ามเว็บ แต่ต้องให้เว็บอื่นร่วมมือด้วย
- Deterministic: ใช้ข้อมูลส่วนตัวอย่างอีเมลหรือเบอร์โทรในการแมทช์ข้อมูลข้ามเว็บ แต่ต้องรอให้ผู้ใช้ล็อกอินก่อน
- Probabilistic: ใช้ AI อนุมานตัวตนผู้ใช้จากข้อมูลหลายอย่าง แต่แม่นยำน้อยกว่า
ตัวอย่างการใช้ Local Storage เก็บ User ID ในเว็บเรา:
var userId = localStorage.getItem("user_id");
if (!userId) {
userId = generateRandomId();
localStorage.setItem("user_id", userId);
}
var userData = {
user_id: userId,
// ข้อมูลอื่นๆ
}
โค้ดนี้จะเช็กว่าเคยมีการเก็บ User ID ใน Storage ไหม ถ้ายังก็สุ่มสร้างใหม่และเก็บไว้ ซึ่งจะใช้ระบุตัวตนผู้ใช้ได้จนกว่าเขาจะล้างข้อมูล
เรามาลองเขียนโค้ดที่เก็บข้อมูลผู้ใช้แบบละเอียดลึกซึ้งกว่าเดิมกันดีกว่า
จะได้เห็นภาพการทำงานของ Tracking Pixel ได้ชัดเจนขึ้น เริ่มจากเก็บข้อมูลพื้นฐานไปจนถึงข้อมูลพฤติกรรมเลยนะ
<script>
// ฟังก์ชันส่งข้อมูลไปเซิร์ฟเวอร์
function sendData(data) {
var img = document.createElement("img");
img.src = "https://www.mywebsite.com/track?" + objectToQueryString(data);
img.style.display = "none";
document.body.appendChild(img);
}
// แปลง Object เป็น Query String
function objectToQueryString(obj) {
return Object.keys(obj).map(key => key + '=' + encodeURIComponent(obj[key])).join('&');
}
// เก็บข้อมูลพื้นฐานของผู้ใช้
var basicData = {
user_id: localStorage.getItem("user_id") || generateRandomId(),
session_id: sessionStorage.getItem("session_id") || generateRandomId(),
page_url: window.location.href,
referrer: document.referrer,
screen_resolution: window.screen.width + "x" + window.screen.height,
user_agent: navigator.userAgent,
timestamp: Date.now()
};
// เก็บ IDs ลง Storage
localStorage.setItem("user_id", basicData.user_id);
sessionStorage.setItem("session_id", basicData.session_id);
// ส่งข้อมูลเมื่อโหลดหน้า
window.addEventListener("load", function() {
sendData({
...basicData,
event_type: "page_view"
});
});
// ส่งข้อมูลเมื่อมีคลิก
document.addEventListener("click", function(event) {
sendData({
...basicData,
event_type: "click",
target_tag: event.target.tagName,
target_url: event.target.href || ""
});
});
// ส่งข้อมูลเมื่อสกรอลเพจ
var scrollDepth = 0;
window.addEventListener("scroll", function() {
var percentScrolled = Math.floor((window.scrollY / document.body.scrollHeight) * 100);
if (percentScrolled > scrollDepth) {
scrollDepth = percentScrolled;
sendData({
...basicData,
event_type: "scroll",
scroll_depth: scrollDepth + "%"
});
}
});
// ส่งข้อมูลเมื่อ Focus Input
document.addEventListener("focusin", function(event) {
if (event.target.tagName === "INPUT" || event.target.tagName === "TEXTAREA") {
sendData({
...basicData,
event_type: "input_focus",
input_id: event.target.id,
input_name: event.target.name
});
}
});
// ส่งข้อมูลเมื่อกรอกฟอร์มเสร็จ
document.addEventListener("submit", function(event) {
var formData = new FormData(event.target);
var entries = {};
for(var pair of formData.entries()) {
entries[pair[0]] = pair[1];
}
sendData({
...basicData,
event_type: "form_submit",
form_data: JSON.stringify(entries)
});
});
// ส่งข้อมูลทุก 30 วินาที
setInterval(function() {
sendData({
...basicData,
event_type: "heartbeat",
timestamp: Date.now()
});
}, 30000);
</script>
จากโค้ดด้านบน เราเก็บข้อมูลผู้ใช้แบบหลากหลายมากขึ้น ทั้งการ track แบบ active และ passive ดังนี้
ข้อมูลพื้นฐาน อย่าง User ID, Session ID, URL ปัจจุบัน, หน้าที่มา, ความละเอียดจอ และ Timestamp โดยเราเก็บ ID ลง Storage เพื่อใช้ครั้งถัดไป
การโหลดหน้า - เมื่อผู้ใช้โหลดหน้าเว็บ จะส่งข้อมูลประเภท "page_view" ไปที่เซิร์ฟเวอร์
การคลิก - เมื่อมีการคลิกเกิดขึ้น จะส่งข้อมูลประเภทคลิก ป้ายกำกับของเป้าหมาย และ URL ของลิงก์ (ถ้ามี) ไป
การสกรอลเพจ - เมื่อผู้ใช้เลื่อนหน้าเว็บ เราจะคำนวณเปอร์เซ็นต์ความลึกของการสกรอล และส่งข้อมูลกลับเมื่อมีการสกรอลลึกขึ้นกว่าเดิม
การโฟกัสอินพุต - เมื่อผู้ใช้คลิกลงบนช่องกรอกข้อมูล
<input>
หรือ<textarea>
จะส่งข้อมูลชื่อและ ID ของฟิลด์นั้นๆ ไปการส่งฟอร์ม - เมื่อผู้ใช้กด Submit ฟอร์ม จะเก็บข้อมูลจากฟิลด์ต่างๆ ในรูปแบบ JSON แล้วส่งไปพร้อมกับอีเวนต์ "form_submit"
Heartbeat - ทุกๆ 30 วินาที จะส่ง Timestamp ล่าสุดเข้าไป เพื่อบอกว่าผู้ใช้ยังคงใช้งานหน้าเว็บอยู่ (แบบ Passive Tracking)
นอกจากนี้เรายังแปลงข้อมูลจาก Object ให้เป็น Query String ด้วยเมื่อส่งไปที่เซิร์ฟเวอร์ เพื่อให้อ่านค่าได้ง่าย
แน่นอนว่าข้อมูลที่เก็บได้ในตัวอย่างนี้ยังไม่ครบทุกอย่าง เรายังสามารถเก็บอะไรได้อีกเยอะ เช่น:
- ตำแหน่งเมาส์ที่คลิก
- การเปิดหรือปิดวิดีโอ
- เวลาที่อยู่ในหน้าเว็บ
- การพิมพ์ลงในฟิลด์ต่างๆ
- ภาษาที่ตั้งค่าในเบราว์เซอร์
- สถานะการเข้าสู่ระบบ
- อื่นๆ อีกมากมาย
โดยรวมแล้ว Tracking Pixel เป็นเทคนิคการเก็บข้อมูลผู้ใช้แบบเบ็ดเสร็จในที่เดียว สามารถให้ข้อมูลเชิงลึกที่เป็นประโยชน์แก่ธุรกิจได้มหาศาล
อย่างไรก็ตาม มันก็มาพร้อมกับความกังวลเรื่องความเป็นส่วนตัว เพราะผู้ใช้งานหลายคนอาจไม่คาดคิดว่าทุกการกระทำของตนกำลังถูกจับตามองและบันทึกไว้ตลอด
ดังนั้น ในฐานะโปรแกรมเมอร์ เราควรคำนึงถึงแง่มุมจริยธรรมของเทคโนโลยีนี้ด้วย ใช้มันอย่างรับผิดชอบ เคารพความเป็นส่วนตัวของผู้ใช้ และเปิดเผยว่ามีการเก็บข้อมูลอะไรบ้างอย่างโปร่งใสนะครับ
สุดท้ายนี้หวังว่าทุกคนจะได้ไอเดียการเขียน Tracking Pixel แบบครอบคลุม และเข้าใจถึงศักยภาพและข้อควรระวังในการใช้งานไปบ้างนะครับ ถ้ามีอะไรสงสัยเพิ่มเติมคอมเมนต์ถามได้เลย แล้วเจอกันใหม่บทความหน้า!
Top comments (0)