จากบทความตอนที่ 1 ได้แนะนำสถาปัตยกรรมพื้นฐานที่จำเป็นสำหรับการพัฒนากระบวนการบันทึกข้อมูลการเข้าชมเว็บไซต์โดยใช้ Google Tag Manager (GTM) และ Azure ในต้นทุนที่ต่ำและรองรับ Pipeline แบบ Real-time
บทความนี้ เรานำท่านมาค้นพบวิธีเริ่มใช้งานในระดับเทคนิค ซึ่งครอบคุมถึงการกำหนดค่า Google Tag Manager อีกทั้งการจัดเตรียมและการกำหนดค่าทรัพยากร Azure ที่จำเป็น โดยกระบวนการนี้จะเพิ่มขีดความสามารถให้ระบบคุณดังนี้
1) ความสามารถในการเริ่มจัดเก็บข้อมูลการเข้าชมเว็บของคุณ เพื่อใช้ในการวิเคราะห์ข้อมูลเพิ่มเติมโดยสร้างและบันทึกประวัติการเข้าชมเว็บของคุณ
2) เพื่อเพิ่มขีดความสามารถของโซลูชันนี้สำหรับการจัดทำรายงานและแดชบอร์ดแบบเรียลไทม์
โดยจะมี 4 ขั้นตอนหลัก ดังนี้:
- จัดเตรียม Azure Event Hub และกำหนดค่าเป็น endpoint
- การสร้างนโยบายการเข้าถึงที่ปลอดภัย
- การสร้าง Endpoint URL ด้วย Secure Access Signature เพื่อให้ GTM ส่งข้อมูลไปยัง Event Hub
- การกำหนดค่าตัวแปร JavaScript แบบกำหนดเองบน Custom GTM
ซึ่งในสถานการณ์นี้ สมมติว่าคุณมีการสมัครใช้งาน Azure โดยดำเนินการการติดตาม Google Analytics บนเว็บไซต์ของคุณ และมีบัญชี Google Tag Manager พร้อมคอนเทนเนอร์ (Container) รวมถึงได้กำหนดค่าแท็กและตัวแปรต่างๆแล้ว เป็นต้นแล้ว
1 – จัดเตรียมและกำหนดค่าบน Event Hub
เข้าสู่ระบบการสมัครใช้งาน Azure ของคุณไปที่ Event Hub blade แล้วคลิก Create
ใส่ข้อมูลรายละเอียดที่จำเป็น ในกรณีนี้ เราเลือกรูปแบบการใช้งานเป็น standard pricing tier เพื่อกำหนดคุณลักษณะ Event Hub Capture และปริมาณงานที่เข้าสู่ระบบ (throughput) ที่ต้องการใช้งาน จากนั้นคลิกที่ Review + create (หรือคลิก ถัดไป เพื่อป้อนการติดแท็ก (Tag) ที่กำหนดเองที่จำเป็น):
หลังจากที่ทรัพยากรใหม่ผ่านการตรวจสอบแล้ว ให้คลิก Create to provision the resource (อาจใช้เวลาสองสามนาทีในบางกรณี)
หลังจากนั้นไปที่ทรัพยากรใหม่ของคุณ และภายใต้หัวข้อ Entities เลือก Event Hubs และกดสร้าง new Event Hub กำหนดชื่อสำหรับ Event Hub กำหนดค่าคุณสมบัติที่จำเป็น เปิด Capture แล้วกำหนดค่า Capture Provider ซึ่งจะเป็นบัญชีและคอนเทนเนอร์บน Azure Storage ของคุณ สำหรับข้อมูลเพิ่มเติมเกี่ยวกับคุณลักษณะ Event Hub Capture สามารถดูรายละเอียดได้ที่ ลิงก์นี้
หมายเหตุ: ตรวจสอบให้แน่ใจว่าได้กำหนดค่า partitions, retention, time window และ partition strategy ของคุณตามนโยบายองค์กรซึ่งในตัวอย่างนี้เรากำลังเลือกเพียงการตั้งค่าเริ่มต้น นอกจากนี้ต้องพิจารณารูปแบบของ Event Hub Capture files สามารถส่งออกได้ในรูปแบบ AVRO เท่านั้น
2 – การสร้างนโยบายการเข้าถึงที่ปลอดภัย
สำหรับตัวอย่างนี้ เราจะกำหนดค่านโยบายการเข้าถึงสำหรับการส่งข้อมูลไปยัง Event Hub สำหรับแอปพลิเคชัน/กระบวนการดาวน์สตรีม (downstream) เพิ่มเติม คุณจะต้องเพิ่มนโยบายสำหรับแอปพลิเคชันเหล่านั้นเพื่อรับข้อมูลจาก Event Hub
โดยขั้นตอนแรกไปยัง Event Hub entity ที่สร้างขึ้นใหม่แล้วคลิก Shared access policies เลือก +add ทำเครื่องหมายที่หัวข้อ Send และกำหนด policy name ที่เหมาะสม:
เมื่อสร้างสำเร็จแล้วให้คลิกที่นโยบาย (policy) จากที่ได้ทำการสร้างและคัดลอกค่า Primary key value และเก็บไว้ในตำแหน่งที่ปลอดภัย เช่น ใน Azure Key Vault
3. การสร้าง Endpoint URL ด้วย Shared Access Signature เพื่อให้ Google Tag Manager ส่งข้อมูลไปยัง Event Hub
ในขั้นตอนนี้ เราจะสร้าง Endpoint URL ที่มี Shared Access Signature ขั้นตอนที่สำคัญที่สุดคือการแปลงคีย์ SAS เป็น HMAC (Hash Based Message Authentication code)
โดยEndpoint URL จะอยู่ในรูปแบบต่อไปนี้:
https://<event hub namespace>.servicebus.windows.net/<event hub entity name>/<policy name>
ตัวอย่างเช่น:
Shared Access Signature จะประกอบด้วยหลายส่วน:
- Signed Resource (sr) – คือ Endpoint URL ที่เข้ารหัส
- Signature (sig) – คือ คีย์ SAS ที่เข้ารหัส HMAC
- Signature Expiry (se) – การหมดอายุในเวลา UNIX EPOCH (จำนวนวินาทีที่ผ่านไปตั้งแต่ UNIX EPOCH)
- Signature Key Name (skn) – เป็นอันเดียวกันกับนโยบายการเข้าถึงที่ปลอดภัยที่สร้างขึ้นในขั้นตอนที่ 2.
ในการทำเช่นนี้ คุณจะต้องมีทักษะการเขียนโปรแกรมขั้นพื้นฐาน (สำหรับข้อมูลเพิ่มเติมเกี่ยวกับวิธีสร้าง Shared Access Signature ให้ไปที่ลิงก์นี้) โดยเลือกภาษาที่ใช้ในการเขียนโปรแกรมตามที่คุณต้องการและระบุค่าที่จำเป็น ตรวจสอบให้แน่ใจว่าได้กำหนดวันหมดอายุที่เหมาะสม เนื่องจากสิ่งนี้จะถูกฮาร์ดโค้ดภายใต้การทำงานของ JavaScript ใน GTM custom มิฉะนั้นคุณเสี่ยงที่อาจจะสูญเสียข้อมูลได้
และในลำดับสุดท้าย Shared Access Signature ควรมีลักษณะดังนี้:
SharedAccessSignature sr=https%3a%2f%2fevhns-bizonedemo.servicebus.windows.net%2fevh-bizone-web-traffic%2fGTM&sig=<redacted>&se=1662204112&skn=GTM
4 – การกำหนดค่า GTM custom ด้วยตัวแปรบน Javascript
ขั้นตอนสุดท้ายในกระบวนการคือการสร้างตัวแปร Custom JavaScript ที่กำหนดเองใน Google Tag Manager เพื่อเปิดใช้งานการส่งข้อมูลไปยัง Event Hub
โดยมีขั้นตอนดำเนินการเริ่มจาก
เข้าสู่ระบบบัญชี GTM และเลือกคอนเทนเนอร์(container)ของคุณ คลิก Variables > New กำหนดชื่อตัวแปรแล้วแก้ไขการกำหนดค่าตัวแปรใน Variable Configuration เลือกประเภทตัวแปร Custom JavaScript
คัดลอกและวางโค้ดตัวอย่างด้านล่าง อย่าลืมใส่ Endpoint URL และ Shared Access Signature ซึ่งมีรายละเอียดตามขั้นตอนก่อนหน้านี้:
| 123456789101112131415161718192021222324252627 | function() { // Endpoint info var endpoint = '<end point URL>' var accessKey = 'SharedAccessSignature <your SAS information>' returnfunction(model) { var globalSendTaskName = '_'+ model.get('trackingId') + '_sendHitTask'; var originalSendHitTask = window[globalSendTaskName] = window[globalSendTaskName] || model.get('sendHitTask'); model.set('sendHitTask', function(sendModel) { var payload = sendModel.get('hitPayload'); var body = {}; body['payload'] = payload; originalSendHitTask(sendModel); var request = newXMLHttpRequest(); var path = endpoint; request.open('POST', path, true); request.setRequestHeader('Content-type', 'text/plain; charset=UTF-8'); request.setRequestHeader('Authorization', accessKey); request.send(JSON.stringify(body)); }); };} |
หมายเหตุ: นี่เป็นเพียงตัวอย่างการพัฒนาโดยการใช้งาน Custom JavaScript อย่างง่าย สำหรับการส่งข้อมูลไปยัง Azure ซึ่งยังไม่มีกระบวนการจัดการข้อผิดพลาด (error handling) หากต้องการทราบข้อมูลเพิ่มเติมและตัวอย่างการใช้งานที่ซับซ้อน เราแนะนำให้ไปที่ blog ของ Simo Ahava’s ซึ่งมีการแบ่งปันองค์ความรู้และตัวอย่าง Code มากมายเพื่อใช้ในการช่วยปรับโซลูชันให้เข้ากับความต้องการเฉพาะของคุณที่อาจมีการใช้งานที่แตกต่างกันขึ้นอยู่กับเทคโนโลยีปลายทางที่เลือกใช้งาน เช่น Amazon Web Services หรืออื่นๆ
ต่อไป หากคุณยังไม่มีตัวแปรประเภท Google Analytics ให้สร้างตัวแปรใหม่โดยเริ่มการตั้งค่าตัวแปรประเภท Google Analytics ในฟิลด์ที่ต้องการตั้งค่า คุณควรเพิ่มตัวแปรบิวท์อิน (built-in variables) พร้อมกำหนด Dimensions เองตามที่คุณต้องการส่งในเพย์โหลด (payload) แล้วตามด้วย customTask เมื่อเสร็จแล้วควรมีลักษณะดังนี้:
ชิ้นส่วนสุดท้ายคือการกำหนดค่าแท็ก (Tag) ด้วยประเภท Google Analytics: Universal Analytics และเพิ่มตัวแปรการตั้งค่า Google Analytics ที่คุณสร้างขึ้นในขั้นตอนก่อนหน้านี้
สุดท้ายบันทึกการเปลี่ยนแปลง จากนั้นส่งและเผยแพร่การเปลี่ยนแปลงไปยังคอนเทนเนอร์ (container) ของคุณ และตรวจสอบให้แน่ใจว่าคอนเทนเนอร์บน Azure Storage ของคุณ (โดยใช้พอร์ทัลหรือ Azure Storage Explorer) มีข้อมูลไหลผ่านและสามารถทำงานได้จริง
ด้วยสิ่งนี้ คุณจะมีข้อมูลที่จัดเก็บไว้ในบัญชี Azure Storage ซึ่งคุณสามารถวิเคราะห์หรือประมวลผลดาวน์สตรีมเพิ่มเติมโดยใช้เครื่องมืออื่นๆ เช่น Azure Databricks หรือ Azure Synapse Analytics Spark Pools
หากคุณไม่เห็นข้อมูลในที่จัดเก็บข้อมูลหลังจาก 5-10 นาที ให้ทบทวนขั้นตอนก่อนหน้านี้อีกครั้งเพื่อให้แน่ใจว่าคุณได้กำหนดค่าทรัพยากรได้อย่างถูกต้องและคุณยังสามารถดูตัวชี้วัดสำหรับ Event Hub ในหัวข้อภาพรวมเพื่อยืนยันว่ามีการส่งข้อความ
ในบทความต่อๆ ไป เราจะแนะนำวิธีการขยายและต่อยอดโซลูชันนี้เพิ่มเติมโดยใช้ Stream Analytics และสุดท้ายโดยใช้ Power BI เพื่อสร้างรายงานและแดชบอร์ดที่ใกล้เคียงแบบเรียลไทม์
