ดูภาพรวมของการติดแท็กฝั่งเซิร์ฟเวอร์ใน Tag Manager ได้ในข้อมูลเบื้องต้นเกี่ยวกับการติดแท็กฝั่งเซิร์ฟเวอร์ คุณได้เรียนรู้ว่าไคลเอ็นต์คืออะไรและทำอะไร ไคลเอ็นต์จะได้รับข้อมูลเหตุการณ์จากอุปกรณ์ของผู้ใช้ แล้วนำมาปรับใช้กับส่วนอื่นๆ ของคอนเทนเนอร์ บทความนี้อธิบายวิธีประมวลผลข้อมูลนั้นในแท็กฝั่งเซิร์ฟเวอร์
ในคอนเทนเนอร์ของเซิร์ฟเวอร์ แท็กจะรับข้อมูลเหตุการณ์ขาเข้าจากไคลเอ็นต์ จากนั้นเปลี่ยนรูปแบบ แล้วส่งกลับออกไปเพื่อรวบรวมและวิเคราะห์ แท็กสามารถส่ง ข้อมูลได้ทุกที่ที่คุณต้องการ ตราบใดที่ปลายทางยอมรับคำขอ HTTP ก็อาจยอมรับข้อมูลจากคอนเทนเนอร์ของเซิร์ฟเวอร์ด้วย
คอนเทนเนอร์เซิร์ฟเวอร์มีแท็กในตัว 3 แท็กซึ่งพร้อมใช้งานโดยไม่มีการกําหนดค่าที่กําหนดเอง ดังนี้
- Google Analytics 4
- Google Analytics: Universal Analytics
- คำขอ HTTP
หากต้องการส่งข้อมูลไปที่อื่นที่ไม่ใช่ Google Analytics หรือต้องการฟีเจอร์มากกว่าที่แท็กคำขอ HTTP มีให้ คุณจะต้องใช้แท็กอื่น ดูแท็กเพิ่มเติมได้ในแกลเลอรีเทมเพลตชุมชน หรือเขียนแท็กของคุณเองก็ได้ บทแนะนำนี้จะสอนพื้นฐานการเขียนแท็กของคุณเองสำหรับคอนเทนเนอร์เซิร์ฟเวอร์
วัตถุประสงค์
- เรียนรู้ว่าจะใช้ API ใดในการอ่านข้อมูลเหตุการณ์ ส่งคำขอ HTTP และตั้งค่าคุกกี้ในเบราว์เซอร์
- ดูแนวทางปฏิบัติแนะนำสำหรับการออกแบบตัวเลือกการกำหนดค่าแท็ก
- เรียนรู้ความแตกต่างระหว่างข้อมูลที่ผู้ใช้ระบุกับข้อมูลที่รวบรวมโดยอัตโนมัติ และความสำคัญของความแตกต่างดังกล่าว
- ดูข้อมูลเกี่ยวกับบทบาทของแท็กในคอนเทนเนอร์ของเซิร์ฟเวอร์ ทำความเข้าใจว่าแท็กใดควร และไม่ควรทำ
- ดูว่าควรส่งเทมเพลตแท็กไปยังแกลเลอรีเทมเพลตชุมชนเมื่อใด
ข้อกำหนดเบื้องต้น
- คอนเทนเนอร์เซิร์ฟเวอร์ที่ทำให้ใช้งานได้
- ความคุ้นเคยกับ Tag Manager, คอนเทนเนอร์เซิร์ฟเวอร์ และแนวคิดพื้นฐานต่างๆ เช่น ไคลเอ็นต์ แท็ก ทริกเกอร์ และตัวแปร
- ความคุ้นเคยกับพื้นฐานของเทมเพลตการเขียนสำหรับแท็กและตัวแปร
แท็ก Baz Analytics
ในบทแนะนำนี้ คุณจะได้สร้างแท็กที่ส่งข้อมูลการวัดไปยังบริการที่มีชื่อว่า Baz Analytics
Baz Analytics เป็นบริการวิเคราะห์สมมติง่ายๆ ที่นำเข้าข้อมูลผ่านคำขอ HTTP GET ไปยัง https://example.com/baz_analytics
ซึ่งมีพารามิเตอร์ต่อไปนี้
พารามิเตอร์ | ตัวอย่าง | คำอธิบาย |
---|---|---|
id | BA-1234 | รหัสบัญชี Analytics ของ Baz |
en | click | ชื่อกิจกรรม |
l | https://www.google.com/search?q=sgtm
|
URL ของหน้าที่ เกิดเหตุการณ์ขึ้น |
u | 2384294892 | รหัสของผู้ใช้ที่ดำเนินการนั้นๆ ใช้เพื่อเชื่อมโยงการกระทำหลายๆ อย่าง กลับไปที่ผู้ใช้รายเดียว |
การกำหนดค่าแท็ก
สิ่งแรกที่ต้องทำคือสร้างเทมเพลตแท็ก ไปที่ส่วนเทมเพลตของคอนเทนเนอร์ แล้วคลิกใหม่ในส่วนเทมเพลตแท็ก เพิ่มชื่อและคำอธิบายให้กับแท็กของคุณ
จากนั้นไปที่ส่วนช่องของเครื่องมือแก้ไขเทมเพลตเพื่อเพิ่มตัวเลือกการกำหนดค่าต่างๆ สำหรับแท็ก คำถามถัดไปที่เห็นได้ชัดคือ คุณต้องการตัวเลือกใดบ้าง คุณเลือกสร้างแท็กได้ 3 วิธีดังนี้
- การกำหนดค่าทั้งหมด: เพิ่มช่องการกำหนดค่าสำหรับทุกพารามิเตอร์ กำหนดให้ผู้ใช้ตั้งค่าทุกอย่างอย่างชัดเจน
- ไม่มีการกำหนดค่า: ไม่มีตัวเลือกสำหรับการกำหนดค่าแท็ก ระบบจะนําข้อมูลทั้งหมดมาจากเหตุการณ์โดยตรง
- การกําหนดค่าบางรายการ: มีช่องสําหรับพารามิเตอร์บางรายการเท่านั้น
การมีช่องสำหรับพารามิเตอร์ทุกตัวมีความยืดหยุ่นมากและช่วยให้ผู้ใช้ควบคุมการกำหนดค่าแท็กได้อย่างเต็มที่ แต่ในทางปฏิบัติ ลักษณะเช่นนี้มักจะ
ส่งผลให้เกิดงานที่ซ้ำกันจำนวนมาก โดยเฉพาะอย่างยิ่งสิ่งต่างๆ เช่น พารามิเตอร์ l
ของ Baz Analytics ซึ่งมี URL ของหน้าเว็บ มีความไม่ชัดเจนและเป็นสากล
การป้อนข้อมูลชุดเดิมที่ไม่เปลี่ยนแปลงทุกครั้งที่กำหนดค่าแท็กคือสิ่งสำคัญที่สุดซึ่งเหลืออยู่ในคอมพิวเตอร์
คำตอบอาจเป็นเพราะมีแท็กที่ใช้ข้อมูลจากเหตุการณ์เท่านั้น นี่เป็นแท็กที่ง่ายที่สุดที่เป็นไปได้ที่ผู้ใช้จะกำหนดค่า เนื่องจากผู้ใช้ไม่ต้องดำเนินการใดๆ เลย ในทางกลับกัน แท็กนี้ยังเป็นตัวเลือกที่มีความเข้มงวดมากที่สุดและมีความย่อยง่ายอีกด้วย ผู้ใช้จะเปลี่ยนลักษณะการทำงานของแท็กไม่ได้แม้ว่าจำเป็นต้องแก้ไข
ตัวอย่างเช่น อาจมีการเรียกเหตุการณ์ purchase
ในเว็บไซต์และใน Google Analytics แต่ Baz Analytics เรียกเหตุการณ์นั้นว่า buy
หรือสมมติฐานที่แท็กทำให้โครงสร้างข้อมูลเหตุการณ์ที่เข้ามาไม่ตรงกับความเป็นจริง ไม่ว่าจะเป็นกรณีใด ผู้ใช้จะเกิดการค้าง
เช่นเดียวกับหลายๆ สิ่ง คำตอบจะอยู่ที่จุดใดจุดหนึ่งระหว่างปลายสุดทั้งสอง ข้อมูลบางอย่างก็น่าจะเหมาะสมกว่าในการนำข้อมูลจากเหตุการณ์มาใช้ทุกครั้ง ผู้ใช้ควรกำหนดค่าข้อมูลอื่นๆ คุณตัดสินใจอย่างไรว่ารายการใดคือรายการใด เพื่อที่จะตอบคำถามนี้ เราต้องตรวจสอบข้อมูลที่เข้ามาในคอนเทนเนอร์อย่างละเอียด
ข้อมูลมาจากไหน
ข้อมูลที่เข้ามาในคอนเทนเนอร์ของเซิร์ฟเวอร์จากแท็ก Google Analytics 4 แบ่งออกได้คร่าวๆ เป็น 2 หมวดหมู่ ได้แก่ ข้อมูลที่ผู้ใช้ระบุ และข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ
ข้อมูลที่ระบุโดยผู้ใช้คือข้อมูลทุกอย่างที่ผู้ใช้ใส่ลงในคำสั่ง event
ของ gtag.js เช่น คำสั่งในลักษณะนี้
gtag('event', 'search', {
search_term: 'beets',
});
จะทำให้มีพารามิเตอร์ต่อไปนี้ในคอนเทนเนอร์ของเซิร์ฟเวอร์
{
event_name: 'search',
search_term: 'beets',
}
ง่ายพอแล้ว แต่จากมุมมองของแท็ก มันยากมากที่จะใช้งาน เนื่องจากผู้ใช้เป็นผู้ป้อนข้อมูลนี้ จะเป็นอะไรก็ได้
บางทีเช่นเดียวกับข้างต้น ผู้ใช้ส่งเฉพาะเหตุการณ์และพารามิเตอร์ที่แนะนําเท่านั้น แต่ไม่ได้มีข้อบังคับให้ส่ง ยกเว้นตําแหน่ง (แต่ไม่ใช่ค่า) ของพารามิเตอร์ event_name
จะไม่รับประกันรูปแบบหรือโครงสร้างของข้อมูลของผู้ใช้
โชคดีที่ข้อมูลที่ผู้ใช้ป้อนไม่ใช่สิ่งเดียวที่คอนเทนเนอร์จะได้รับ นอกจากนี้ ยังจะได้รับข้อมูลจำนวนมากที่แท็ก Google Analytics 4 รวบรวมโดยอัตโนมัติในเบราว์เซอร์ด้วย ซึ่งได้แก่
ip_override
language
page_location
page_referrer
page_title
screen_resolution
user_agent
นอกจากนี้ หากคำขอของเซิร์ฟเวอร์มาจากเว็บเบราว์เซอร์ อาจมีข้อมูลคุกกี้ของเบราว์เซอร์ที่พร้อมใช้งานผ่านทาง getCookieValue
API ด้วย
ข้อมูลเหล่านี้รวมกันเป็นข้อมูลที่รวบรวมโดยอัตโนมัติที่เราพูดถึงข้างต้น โดยทั่วไป รายงานจะประกอบด้วยข้อมูลที่ครอบคลุมและไม่มีความหมาย เมื่อมีคำขอมาจากแท็ก GA4 ในเบราว์เซอร์ ข้อมูลนี้จะพร้อมใช้งานเสมอและมีรูปแบบเดิมเสมอ ดูรายละเอียดเพิ่มเติมเกี่ยวกับพารามิเตอร์เหล่านี้ได้ที่ข้อมูลอ้างอิงเหตุการณ์
การแยกประเภทนี้มีเครื่องมือที่เป็นประโยชน์ในการตัดสินใจว่าควรกำหนดค่าข้อมูลใดโดยผู้ใช้ และข้อมูลใดควรระบุในแท็ก ข้อมูลที่เก็บรวบรวมโดยอัตโนมัติจะอ่านจากเหตุการณ์ได้โดยตรงอย่างปลอดภัย นอกเหนือจากนี้ ผู้ใช้ควรกำหนดค่าทุกอย่าง
ด้วยเหตุนี้ ลองดูพารามิเตอร์ของแท็ก Baz Analytics อีกครั้ง
- รหัสการวัด
id
: เนื่องจากระบบจะไม่รวบรวมโดยอัตโนมัติ ข้อมูลนี้จึงเป็นตัวอย่างที่ชัดเจนของค่าที่ผู้ใช้ควรป้อนเมื่อกําหนดค่าแท็ก - ชื่อเหตุการณ์
en
: ดังที่กล่าวไว้ข้างต้น คุณใช้ชื่อเหตุการณ์จากพารามิเตอร์event_name
ได้โดยตรงตลอดเวลา อย่างไรก็ตาม เนื่องจากค่านี้เป็นค่าที่กำหนดโดยผู้ใช้ เราขอแนะนำให้คุณสามารถลบล้างชื่อได้หากจำเป็น - URL หน้าเว็บ
l
: คุณดึงค่านี้ได้จากพารามิเตอร์page_location
ซึ่งแท็กเบราว์เซอร์ Google Analytics GA4 จะรวบรวมโดยอัตโนมัติในทุกเหตุการณ์ ดังนั้น คุณจึงไม่ควรกำหนดให้ผู้ใช้ป้อนค่าด้วยตนเอง - รหัสผู้ใช้
u
: ในแท็กเซิร์ฟเวอร์ Baz Analytics พารามิเตอร์u
จะไม่ได้ระบุผู้ใช้หรือรวบรวมโดยอัตโนมัติในหน้าเว็บ แต่จะได้รับการจัดเก็บไว้ในคุกกี้ของเบราว์เซอร์ เพื่อให้สามารถระบุตัวผู้ใช้ในการเข้าชมเว็บไซต์หลายครั้งได้ ตามที่คุณจะเห็นในการใช้งานด้านล่าง แท็กเซิร์ฟเวอร์ Baz Analytics ที่ใช้setCookie
API เพื่อตั้งค่าคุกกี้ ซึ่งหมายความว่าแท็ก Baz Analytics เป็นเพียงสิ่งเดียวที่รู้ว่าเก็บคุกกี้ไว้ที่ไหนและอย่างไร ระบบควรรวบรวมพารามิเตอร์u
โดยอัตโนมัติเช่นเดียวกับl
เมื่อตั้งค่าแท็กเสร็จแล้ว การกำหนดค่าแท็กควรมีลักษณะดังนี้
การติดตั้งใช้งานแท็ก
เมื่อการกําหนดค่าแท็กเป็นยกกำลัง 2 แล้ว คุณก็พร้อมที่จะนำลักษณะการทำงานของแท็กไปใช้ใน JavaScript ที่แซนด์บ็อกซ์แล้ว
แท็กต้องทำ 4 อย่างต่อไปนี้
- หาชื่อเหตุการณ์จากการกําหนดค่าแท็ก
- รับ URL ของหน้าเว็บจากพร็อพเพอร์ตี้
page_location
ของเหตุการณ์ - คำนวณ User-ID แท็กจะค้นหารหัสผู้ใช้ในคุกกี้ที่เรียกว่า
_bauid
หากไม่มีคุกกี้นั้น แท็กจะคำนวณค่าใหม่และเก็บไว้สำหรับคำขอภายหลัง - สร้าง URL และส่งคำขอไปยังเซิร์ฟเวอร์คอลเล็กชัน Baz Analytics
คุณควรใช้เวลาพิจารณาความเหมาะสมของแท็กกับคอนเทนเนอร์โดยรวมด้วย คอมโพเนนต์คอนเทนเนอร์ต่างๆ มีบทบาทต่างกัน จึงมีสิ่งที่แท็กไม่จำเป็นหรือไม่ควรทำเช่นกัน แท็กของคุณมีดังนี้
- ไม่ควรตรวจสอบเหตุการณ์เพื่อพิจารณาว่าควรทํางานหรือไม่ และนั่นคือวัตถุประสงค์
- ไม่ควรเรียกใช้คอนเทนเนอร์ด้วย
runContainer
API นั่นเป็นงานของลูกค้า - ยกเว้นคุกกี้ที่สำคัญ คุณไม่ควรพยายามโต้ตอบกับคำขอหรือการตอบกลับโดยตรง ซึ่งนั่นเป็นงานของลูกค้าด้วย
การเขียนเทมเพลตแท็กที่ดำเนินการต่อไปนี้อาจทำให้เกิดความสับสนสำหรับผู้ใช้แท็ก ตัวอย่างเช่น แท็กที่ส่งการตอบกลับคำขอขาเข้าจะป้องกันไม่ให้ไคลเอ็นต์ทำแบบเดียวกัน เพราะทำให้ผู้ใช้ไม่ทราบลักษณะการทำงานเกี่ยวกับลักษณะการทำงานของคอนเทนเนอร์
จากที่กล่าวมาทั้งหมด ด้านล่างนี้เป็นการติดตั้งใช้งานแท็กใน JS ที่แซนด์บ็อกซ์ไว้ซึ่งมีคำอธิบายประกอบ
const encodeUriComponent = require('encodeUriComponent');
const generateRandom = require('generateRandom');
const getCookieValues = require('getCookieValues');
const getEventData = require('getEventData');
const logToConsole = require('logToConsole');
const makeString = require('makeString');
const sendHttpGet = require('sendHttpGet');
const setCookie = require('setCookie');
const USER_ID_COOKIE = '_bauid';
const MAX_USER_ID = 1000000000;
// The event name is taken from either the tag's configuration or from the
// event. Configuration data comes into the sandboxed code as a predefined
// variable called 'data'.
const eventName = data.eventName || getEventData('event_name');
// page_location is automatically collected by the Google Analytics 4 tag.
// Therefore, it's safe to take it directly from event data rather than require
// the user to specify it. Use the getEventData API to retrieve a single data
// point from the event. There's also a getAllEventData API that returns the
// entire event.
const pageLocation = getEventData('page_location');
const userId = getUserId();
const url = 'https://www.example.com/baz_analytics?' +
'id=' + encodeUriComponent(data.measurementId) +
'en=' + encodeUriComponent(eventName) +
(pageLocation ? 'l=' + encodeUriComponent(pageLocation) : '') +
'u=' + userId;
// The sendHttpGet API takes a URL and returns a promise that resolves with the
// result once the request completes. You must call data.gtmOnSuccess() or
// data.gtmOnFailure() so that the container knows when the tag has finished
// executing.
sendHttpGet(url).then((result) => {
if (result.statusCode >= 200 && result.statusCode < 300) {
data.gtmOnSuccess();
} else {
data.gtmOnFailure();
}
});
// The user ID is taken from a cookie, if present. If it's not present, a new ID
// is randomly generated and stored for later use.
//
// Generally speaking, tags should not interact directly with the request or
// response. This prevents different tags from conflicting with each other.
// Cookies, however, are an exception. Tags are the only container entities that
// know which cookies they need to read or write. Therefore, it's okay for tags
// to interact with them directly.
function getUserId() {
const userId = getCookieValues(USER_ID_COOKIE)[0] || generateRandom(0, MAX_USER_ID);
// The setCookie API adds a value to the 'cookie' header on the response.
setCookie(USER_ID_COOKIE, makeString(userId), {
'max-age': 3600 * 24 * 365 * 2,
domain: 'auto',
path: '/',
httpOnly: true,
secure: true,
});
return userId;
}
จากนั้นระบบจะติดตั้งแท็ก คุณต้องตั้งค่าสิทธิ์ API ของแท็กให้ถูกต้องก่อนจึงจะใช้แท็กได้ ไปที่แท็บสิทธิ์ของเครื่องมือแก้ไขเทมเพลต แล้วระบุสิทธิ์ต่อไปนี้
- อ่านค่าคุกกี้:
_bauid
- อ่านข้อมูลเหตุการณ์:
event_name
และpage_location
- ส่งคำขอ HTTP:
https://www.example.com/*
- ตั้งค่าคุกกี้:
_bauid
และคุณควรเขียนการทดสอบสำหรับแท็กด้วย หากต้องการอ่านเพิ่มเติมเกี่ยวกับการทดสอบเทมเพลต โปรดอ่านส่วนการทดสอบในคู่มือนักพัฒนาเทมเพลต
สุดท้าย อย่าลืมลองเรียกใช้แท็กด้วยปุ่มเรียกใช้โค้ดอย่างน้อย 1 ครั้ง วิธีนี้จะป้องกันไม่ให้เกิดข้อผิดพลาดง่ายๆ มากมายในเซิร์ฟเวอร์ของคุณ
ส่งแท็กไปยังแกลเลอรีเทมเพลตชุมชน
เนื่องจากคุณศึกษาการสร้าง ทดสอบ และใช้แท็กใหม่มาหมดแล้ว จึงไม่มีเหตุผลที่จะไม่เก็บไว้กับตัวเอง หากคุณคิดว่าแท็กใหม่ น่าจะเป็นประโยชน์ต่อผู้อื่น ให้ลอง ส่งแท็กไปยัง แกลเลอรีเทมเพลตชุมชน
บทสรุป
คุณได้เรียนรู้พื้นฐานการเขียนแท็กสำหรับคอนเทนเนอร์เซิร์ฟเวอร์ในบทแนะนำนี้ คุณได้เรียนรู้เกี่ยวกับ
- API ที่จะใช้ในการอ่านข้อมูลเหตุการณ์ ส่งคำขอ HTTP และตั้งค่าคุกกี้ในเบราว์เซอร์
- แนวทางปฏิบัติแนะนำในการออกแบบตัวเลือกการกำหนดค่าสำหรับแท็ก
- ความแตกต่างระหว่างข้อมูลที่ระบุโดยผู้ใช้กับข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ และความสำคัญของความแตกต่างดังกล่าว
- บทบาทของแท็กในคอนเทนเนอร์ สิ่งที่ควรและไม่ควรทำ
- เวลาและวิธีส่งเทมเพลตแท็กไปยัง แกลเลอรีเทมเพลตชุมชน