วิธีสร้างแท็กเซิร์ฟเวอร์

ดูภาพรวมของการติดแท็กฝั่งเซิร์ฟเวอร์ใน 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 วิธีดังนี้

1. การกำหนดค่าทั้งหมด: เพิ่มช่องการกำหนดค่าสำหรับทุกพารามิเตอร์ กำหนดให้ผู้ใช้ตั้งค่าทุกอย่างอย่างชัดเจน
2. ไม่มีการกำหนดค่า: ไม่มีตัวเลือกสำหรับการกำหนดค่าแท็ก ระบบจะนําข้อมูลทั้งหมดมาจากเหตุการณ์โดยตรง
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 อย่างต่อไปนี้

1. หาชื่อเหตุการณ์จากการกําหนดค่าแท็ก
2. รับ URL ของหน้าเว็บจากพร็อพเพอร์ตี้ page_location ของเหตุการณ์
3. คำนวณ User-ID แท็กจะค้นหารหัสผู้ใช้ในคุกกี้ที่เรียกว่า _bauid หากไม่มีคุกกี้นั้น แท็กจะคำนวณค่าใหม่และเก็บไว้สำหรับคำขอภายหลัง
4. สร้าง 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 และตั้งค่าคุกกี้ในเบราว์เซอร์
• แนวทางปฏิบัติแนะนำในการออกแบบตัวเลือกการกำหนดค่าสำหรับแท็ก
• ความแตกต่างระหว่างข้อมูลที่ระบุโดยผู้ใช้กับข้อมูลที่เก็บรวบรวมโดยอัตโนมัติ และความสำคัญของความแตกต่างดังกล่าว
• บทบาทของแท็กในคอนเทนเนอร์ สิ่งที่ควรและไม่ควรทำ
• เวลาและวิธีส่งเทมเพลตแท็กไปยัง แกลเลอรีเทมเพลตชุมชน