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

ในบทความเรื่อง ข้อมูลเบื้องต้นเกี่ยวกับการติดแท็กฝั่งเซิร์ฟเวอร์ คุณได้ดูภาพรวมของการ ติดแท็กฝั่งเซิร์ฟเวอร์ใน Tag Manager และได้เรียนรู้ว่าไคลเอ็นต์คืออะไรและทำหน้าที่อะไร โดยไคลเอ็นต์จะรับข้อมูลเหตุการณ์จากอุปกรณ์ของผู้ใช้และปรับข้อมูลดังกล่าวเพื่อใช้กับส่วนอื่นๆ ของคอนเทนเนอร์ บทความนี้จะอธิบายวิธีประมวลผลข้อมูลดังกล่าวในแท็กฝั่งเซิร์ฟเวอร์

ในคอนเทนเนอร์ของเซิร์ฟเวอร์ แท็กจะรับข้อมูลเหตุการณ์ขาเข้าจากไคลเอ็นต์ แปลงข้อมูล และส่งข้อมูลกลับออกไปเพื่อการเก็บรวบรวมและการวิเคราะห์ แท็กสามารถส่งข้อมูลไปยังที่ใดก็ได้ที่คุณต้องการ ตราบใดที่ปลายทางยอมรับคำขอ HTTP ปลายทางก็จะยอมรับข้อมูลจากคอนเทนเนอร์ของเซิร์ฟเวอร์ได้ด้วย

คอนเทนเนอร์ของเซิร์ฟเวอร์มีแท็กในตัว 3 รายการที่พร้อมใช้งานโดยไม่ต้องกำหนดค่าที่กำหนดเอง ได้แก่

• Google Analytics
• คำขอ HTTP

หากต้องการส่งข้อมูลไปยังที่อื่นที่ไม่ใช่ Google Analytics หรือต้องการฟีเจอร์เพิ่มเติมจากที่แท็กคำขอ HTTP มีให้ คุณจะต้องใช้แท็กอื่น คุณสามารถดูแท็กเพิ่มเติมได้ใน แกลเลอรี เทมเพลตชุมชน หรือจะเขียนแท็กของคุณเองก็ได้ บทแนะนำนี้จะสอนพื้นฐานการเขียนแท็กของคุณเองสำหรับคอนเทนเนอร์ของเซิร์ฟเวอร์

วัตถุประสงค์

• ดูว่าควรใช้ API ใดในการอ่านข้อมูลเหตุการณ์ ส่งคำขอ HTTP และตั้งค่าคุกกี้ในเบราว์เซอร์
• ดูแนวทางปฏิบัติแนะนำสำหรับการออกแบบตัวเลือกการกำหนดค่าของแท็ก
• ดูความแตกต่างระหว่างข้อมูลที่ผู้ใช้ระบุกับข้อมูลที่รวบรวมโดยอัตโนมัติ และเหตุผลที่ความแตกต่างดังกล่าวมีความสำคัญ
• ดูบทบาทของแท็กในคอนเทนเนอร์ของเซิร์ฟเวอร์ ทำความเข้าใจสิ่งที่แท็กควรและไม่ควรทำ
• ดูว่าเมื่อใดที่คุณควรพิจารณาส่งเทมเพลตแท็กไปยัง แกลเลอรีเทมเพลตชุมชน

ข้อกำหนดเบื้องต้น

• คอนเทนเนอร์ของเซิร์ฟเวอร์ที่ใช้งานจริง
• ความคุ้นเคยกับ Tag Manager, คอนเทนเนอร์ ของเซิร์ฟเวอร์ และแนวคิด พื้นฐาน เช่น ไคลเอ็นต์, แท็ก, ทริกเกอร์ และ ตัวแปร
• ความคุ้นเคยกับพื้นฐานการ เขียน เทมเพลต สำหรับแท็กและตัวแปร

แท็ก Baz Analytics

ในบทแนะนำนี้ คุณจะได้สร้างแท็กที่ส่งข้อมูลการวัดผลไปยังบริการที่ชื่อว่า Baz Analytics

Baz Analytics เป็นบริการวิเคราะห์ข้อมูลสมมติแบบง่ายที่รับข้อมูลผ่านคำขอ HTTP GET ไปยัง https://example.com/baz_analytics โดยมีพารามิเตอร์ต่อไปนี้

การกำหนดค่าแท็ก

สิ่งแรกที่ต้องทำคือสร้างเทมเพลตแท็ก ไปที่ส่วนเทมเพลต ของคอนเทนเนอร์ แล้วคลิกใหม่ ในส่วนเทมเพลตแท็ก จากนั้นตั้งชื่อและเขียนคำอธิบายสำหรับแท็ก

ต่อไป ให้ไปที่ส่วนช่อง ของเครื่องมือแก้ไขเทมเพลตเพื่อเพิ่มตัวเลือกการกำหนดค่าต่างๆ สำหรับแท็ก คำถามต่อไปที่ชัดเจนคือ คุณต้องการตัวเลือกใดบ้าง คุณเลือกสร้างแท็กได้ 3 วิธี ดังนี้

1. การกำหนดค่าทั้งหมด: เพิ่มฟิลด์กำหนดค่าสำหรับทุกพารามิเตอร์ กำหนดให้ผู้ใช้ตั้งค่าทุกอย่างอย่างชัดเจน
2. ไม่มีการกำหนดค่า: ไม่มีตัวเลือกสำหรับการกำหนดค่าแท็ก ระบบจะนำข้อมูลทั้งหมดมาจากเหตุการณ์โดยตรง
3. มีการกำหนดค่าบางอย่าง: มีช่องสำหรับพารามิเตอร์บางรายการ แต่ไม่มีช่องสำหรับพารามิเตอร์อื่นๆ

การมีช่องสำหรับทุกพารามิเตอร์นั้นยืดหยุ่นมากและช่วยให้ผู้ใช้ควบคุมการกำหนดค่าแท็กได้อย่างเต็มที่ อย่างไรก็ตาม ในทางปฏิบัติแล้ว วิธีนี้มักจะทำให้เกิดงานที่ซ้ำซ้อนจำนวนมาก โดยเฉพาะอย่างยิ่ง พารามิเตอร์ l ของ Baz Analytics ซึ่งมี URL ของหน้าเว็บนั้นมีความชัดเจนและเป็นสากล การป้อนข้อมูลเดียวกันที่ไม่เปลี่ยนแปลงทุกครั้งที่กำหนดค่าแท็กเป็นสิ่งที่ควรปล่อยให้คอมพิวเตอร์จัดการ

บางทีคำตอบอาจเป็นการมีแท็กที่รับข้อมูลจากเหตุการณ์เท่านั้น ซึ่งเป็นแท็กที่ง่ายที่สุดเท่าที่จะเป็นไปได้สำหรับผู้ใช้ในการกำหนดค่า เนื่องจากผู้ใช้ไม่ต้องทำอะไรเลย แต่ในทางกลับกัน ตัวเลือกนี้ก็มีข้อจำกัดมากที่สุดและเปราะบางที่สุดด้วย ผู้ใช้ไม่สามารถเปลี่ยนลักษณะการทำงานของแท็กได้แม้ว่าจำเป็นต้องทำก็ตาม เช่น ผู้ใช้อาจเรียกเหตุการณ์ว่า purchase ในเว็บไซต์และใน Google Analytics แต่ Baz Analytics เรียกเหตุการณ์นี้ว่า buy หรือสมมติฐานที่แท็กตั้งขึ้นเกี่ยวกับโครงสร้างของข้อมูลเหตุการณ์ขาเข้าอาจไม่ตรงกับความเป็นจริง ไม่ว่ากรณีใดก็ตาม ผู้ใช้จะติดขัด

เช่นเดียวกับหลายๆ สิ่ง คำตอบจะอยู่ระหว่าง 2 สุดขั้ว ข้อมูลบางอย่างควรนำมาจากเหตุการณ์เสมอ ส่วนข้อมูลอื่นๆ ผู้ใช้ควรเป็นผู้กำหนดค่า คุณจะตัดสินใจได้อย่างไรว่าข้อมูลใดควรเป็นข้อมูลใด หากต้องการตอบคำถามนี้ เราจะต้องดูข้อมูลที่เข้ามาในคอนเทนเนอร์อย่างละเอียด

ข้อมูลมาจากที่ใด

ข้อมูลที่เข้ามาในคอนเทนเนอร์ของเซิร์ฟเวอร์จากแท็ก Google Analytics สามารถแบ่งออกได้เป็น 2 หมวดหมู่ ได้แก่ ข้อมูลที่ผู้ใช้ระบุและข้อมูลที่รวบรวมโดยอัตโนมัติ

ข้อมูลที่ผู้ใช้ระบุคือทุกสิ่งที่ผู้ใช้ป้อนลงในคำสั่ง event ของ gtag.js เช่น คำสั่งต่อไปนี้

gtag('event', 'search', {
  search_term: 'beets',
});

จะส่งผลให้เกิดพารามิเตอร์ต่อไปนี้ในคอนเทนเนอร์ของเซิร์ฟเวอร์

{
  event_name: 'search',
  search_term: 'beets',
}

ซึ่งดูเรียบง่าย แต่จากมุมมองของแท็กแล้ว การทำงานกับข้อมูลนี้ทำได้ยากมาก เนื่องจากผู้ใช้เป็นผู้ป้อนข้อมูลนี้ ข้อมูลจึงเป็นอะไรก็ได้ เช่น ผู้ใช้อาจส่งเฉพาะ เหตุการณ์ ที่แนะนำ และพารามิเตอร์เท่านั้น แต่ไม่มี ข้อกำหนดว่าผู้ใช้ต้องทำเช่นนั้น ยกเว้นตำแหน่ง (แต่ ไม่ใช่ค่า!) ของพารามิเตอร์ event_name เราไม่สามารถรับประกัน รูปแบบหรือโครงสร้างของข้อมูลผู้ใช้ได้

โชคดีที่คอนเทนเนอร์จะได้รับข้อมูลอื่นๆ นอกเหนือจากข้อมูลที่ผู้ใช้ป้อน โดยจะได้รับข้อมูลจำนวนมากที่แท็ก Google Analytics ในเบราว์เซอร์รวบรวมโดยอัตโนมัติด้วย ซึ่งได้แก่

• ip_override
• language
• page_location
• page_referrer
• page_title
• screen_resolution
• user_agent

นอกจากนี้ หากคำขอของเซิร์ฟเวอร์มาจากเว็บเบราว์เซอร์ ก็อาจมีข้อมูลคุกกี้ของเบราว์เซอร์ให้ใช้งานผ่าน API getCookieValue ด้วย

ข้อมูลเหล่านี้รวมกันเป็นข้อมูลที่รวบรวมโดยอัตโนมัติที่เรากล่าวถึงข้างต้น โดยทั่วไปแล้ว ข้อมูลเหล่านี้ประกอบด้วยข้อมูลที่เป็นสากลและมีความหมายที่ชัดเจน เมื่อคำขอมาจากแท็ก Google Analytics ในเบราว์เซอร์ ข้อมูลนี้จะพร้อมใช้งานเสมอและจะมีรูปแบบเดียวกันเสมอ ดูรายละเอียดเพิ่มเติมเกี่ยวกับพาราม0}ิเตอร์เหล่านี้ได้ที่ข้อมูลอ้างอิงเหตุการณ์

การจัดประเภทนี้ช่วยให้เรามีเครื่องมือที่มีประโยชน์ในการตัดสินใจว่าข้อมูลใดควรให้ผู้ใช้กำหนดค่าและข้อมูลใดควรระบุไว้ในแท็ก ข้อมูลที่รวบรวมโดยอัตโนมัติสามารถอ่านได้จากเหตุการณ์โดยตรง ส่วนข้อมูลอื่นๆ ผู้ใช้ควรเป็นผู้กำหนดค่า

เมื่อพิจารณาถึงเรื่องนี้แล้ว ให้ดูพารามิเตอร์ของแท็ก Baz Analytics อีกครั้ง

• รหัสการวัดผล, id: เนื่องจากระบบไม่ได้รวบรวมรหัสนี้โดยอัตโนมัติ จึงเป็น ตัวอย่างที่ชัดเจนของค่าที่ผู้ใช้ควรป้อนเมื่อกำหนดค่า แท็ก
• ชื่อเหตุการณ์, en: ดังที่กล่าวไว้ข้างต้น คุณสามารถนำชื่อเหตุการณ์มาจากพารามิเตอร์ event_name ได้โดยตรงเสมอ อย่างไรก็ตาม เนื่องจากค่านี้กำหนดโดยผู้ใช้ เราจึงควรมีตัวเลือกให้ลบล้างชื่อได้หากจำเป็น
• URL ของหน้าเว็บ, l: คุณสามารถนำค่านี้มาจากpage_location พารามิเตอร์ ซึ่งแท็ก Google Analytics ในเบราว์เซอร์จะรวบรวมโดยอัตโนมัติในทุกเหตุการณ์ ดังนั้น คุณจึงไม่ควรกำหนดให้ผู้ใช้ป้อนค่าด้วยตนเอง
• รหัสผู้ใช้, u: ในแท็กเซิร์ฟเวอร์ Baz Analytics พารามิเตอร์ u ไม่ใช่ข้อมูลที่ผู้ใช้ระบุและไม่ใช่ข้อมูลที่แท็กในหน้ารวบรวมโดยอัตโนมัติ แต่ระบบจะจัดเก็บไว้ในคุกกี้ของเบราว์เซอร์เพื่อให้ระบุผู้ใช้ได้เมื่อเข้าชมเว็บไซต์หลายครั้ง ดังที่คุณจะเห็นในการติดตั้งใช้งาน ด้านล่าง แท็กเซิร์ฟเวอร์ Baz Analytics เป็นแท็กที่ใช้ API setCookie เพื่อตั้งค่าคุกกี้ ซึ่งหมายความว่าแท็ก Baz Analytics เป็นแท็กเดียวที่ทราบตำแหน่งและวิธีจัดเก็บคุกกี้ พารามิเตอร์ ควรได้รับการรวบรวมโดยอัตโนมัติเช่นเดียวกับ lu

เมื่อตั้งค่าการกำหนดค่าแท็กเสร็จแล้ว แท็กควรมีลักษณะดังนี้

การติดตั้งใช้งานแท็ก

เมื่อกำหนดค่าแท็กเรียบร้อยแล้ว คุณก็พร้อมที่จะติดตั้งใช้งานลักษณะการทำงานของแท็กใน JavaScript ที่อยู่ในแซนด์บ็อกซ์

แท็กต้องทำ 4 สิ่งต่อไปนี้

1. รับชื่อเหตุการณ์จากการกำหนดค่าของแท็ก
2. รับ URL ของหน้าเว็บจากพร็อพเพอร์ตี้ page_location ของเหตุการณ์
3. คำนวณรหัสผู้ใช้ แท็กจะค้นหารหัสผู้ใช้ในคุกกี้ที่ชื่อว่า _bauid หากไม่มีคุกกี้ดังกล่าว แท็กจะคำนวณค่าใหม่และจัดเก็บไว้สำหรับคำขอในภายหลัง
4. สร้าง URL และส่งคำขอไปยังเซิร์ฟเวอร์เก็บรวบรวมของ Baz Analytics

นอกจากนี้ คุณควรใช้เวลาสักครู่เพื่อพิจารณาว่าแท็กเข้ากับคอนเทนเนอร์โดยรวมได้อย่างไร คอมโพเนนต์ต่างๆ ของคอนเทนเนอร์มีบทบาทที่แตกต่างกัน ดังนั้นจึงมีสิ่งที่แท็กไม่ทำหรือไม่ควรทำด้วย โดยแท็กของคุณ

• ไม่ควรตรวจสอบเหตุการณ์เพื่อดูว่าควรทำงานหรือไม่ เนื่องจากเป็นหน้าที่ของทริกเกอร์
• ไม่ควรเรียกใช้คอนเทนเนอร์ด้วย API runContainer เนื่องจากเป็นหน้าที่ของไคลเอ็นต์
• ไม่ควรพยายามโต้ตอบกับคำขอหรือการตอบกลับโดยตรง ยกเว้นคุกกี้ เนื่องจากเป็นหน้าที่ของไคลเอ็นต์เช่นกัน

การเขียนเทมเพลตแท็กที่ทำสิ่งเหล่านี้จะทำให้ผู้ใช้แท็กของคุณเกิดความสับสนเกี่ยวกับลักษณะการทำงานของแท็ก เช่น แท็กที่ส่งการตอบกลับไปยังคำขอขาเข้าจะป้องกันไม่ให้ไคลเอ็นต์ทำเช่นเดียวกัน ซึ่งจะทำให้ผู้ใช้ผิดหวังเกี่ยวกับลักษณะการทำงานที่คอนเทนเนอร์ควรจะเป็น

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