ข้อมูลเบื้องต้นเกี่ยวกับการติดแท็กฝั่งเซิร์ฟเวอร์

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

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

รูปที่ 1: แผนภาพของเว็บไซต์ที่มีการติดตั้งใช้งานคอนเทนเนอร์เว็บของ Google Tag Manager

ในทางตรงกันข้าม คอนเทนเนอร์เซิร์ฟเวอร์จะไม่ทำงานในเบราว์เซอร์ของผู้ใช้หรือในโทรศัพท์ แต่จะทำงานบนเซิร์ฟเวอร์ที่คุณควบคุม

รูปที่ 2: ตัวอย่างการกำหนดค่าการติดแท็กที่ใช้คอนเทนเนอร์เซิร์ฟเวอร์

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

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

โมเดลนี้จะถามคำถามสำคัญ 2 ข้อสำหรับคอนเทนเนอร์เซิร์ฟเวอร์

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

คำตอบของทั้ง 2 คำถามเป็นเอนทิตีประเภทใหม่สำหรับใช้ในคอนเทนเนอร์เซิร์ฟเวอร์ ซึ่งก็คือไคลเอ็นต์

วิธีการทำงานของลูกค้า

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

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

รูปที่ 3: ไคลเอ็นต์คนละรายจัดการสตรีมข้อมูลแต่ละสตรีม

ไคลเอ็นต์จะได้รับข้อมูลการวัดจากอุปกรณ์ สมมติว่าคุณต้องการวัดกิจกรรมของผู้ใช้ใน 3 ที่ ได้แก่ เว็บไซต์ แอปโทรศัพท์ และเครื่องปิ้งขนมปังอัจฉริยะ เว็บไซต์ของคุณใช้ Google Analytics ส่วนแอปโทรศัพท์ใช้ Firebase Analytics และเครื่องปิ้งขนมปังใช้โปรโตคอลที่เป็นกรรมสิทธิ์เฉพาะเรียกว่า "ToastMetric"

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

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

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

เหตุการณ์คือสิ่งที่เกิดขึ้นที่คุณต้องการวัด โดยจะเป็น start_toasting, finish_toasting หรือ buy_bread เรามีคำแนะนำบางอย่างเกี่ยวกับโครงสร้างเหตุการณ์ที่ไคลเอ็นต์สร้างขึ้น แต่ข้อกำหนดอย่างเดียวคือส่วนที่เหลือที่ทำความเข้าใจคอนเทนเนอร์

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

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

โชคดีที่เครื่องจัดการแท็กจัดการเรื่องนี้ให้คุณได้ คอนเทนเนอร์เซิร์ฟเวอร์มาพร้อมกับไคลเอ็นต์ 3 ตัว ได้แก่ Google Analytics 4, Google Analytics ได้แก่ Universal Analytics และ Measurement Protocol ซึ่งไคลเอ็นต์เหล่านี้จะมีเครื่องมือที่จำเป็นในการเริ่มต้นติดตั้งโค้ดสำหรับแอปพลิเคชันทันทีที่คุณสร้างคอนเทนเนอร์แล้ว

ตัวอย่างสั้นๆ

มาดูตัวอย่างสั้นๆ เพื่อดูว่าชิ้นส่วนทั้งหมดพอดีกันอย่างไร ในตัวอย่างนี้ คุณจะได้สร้างสิ่งต่อไปนี้

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

สำหรับตัวอย่างนี้ เราจะสมมติว่าคุณได้สร้างและทำให้คอนเทนเนอร์เซิร์ฟเวอร์ใช้งานได้แล้ว

กําหนดค่า gtag.js

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

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });
</script>

แทนที่ TAG_ID ด้วยรหัสแท็ก แทนที่ https://analytics.example.com ด้วย URL ของคอนเทนเนอร์เซิร์ฟเวอร์

ถัดไป ให้เพิ่มฟังก์ชัน sendEvent() เพื่อจัดการเหตุการณ์ click ดังนี้

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());

  gtag('config', 'TAG_ID', {
    server_container_url: 'https://analytics.example.com',
  });

  function sendEvent() {
    gtag('event', 'click');
  }
</script>

<button onclick="javascript:sendEvent()">Send Event</button>

แทนที่ TAG_ID ด้วยรหัสแท็ก แทนที่ https://analytics.example.com ด้วย URL ของคอนเทนเนอร์เซิร์ฟเวอร์

ด้วยการกำหนดค่านี้ เครื่องจัดการเหตุการณ์ เช่น ฟังก์ชัน sendEvent() ที่รวมอยู่ในตัวอย่างนี้จะส่งเหตุการณ์ click ไปยังคอนเทนเนอร์เซิร์ฟเวอร์

หมายเหตุ: สําหรับการติดตั้ง Tag Manager ให้อ่าน "ส่งข้อมูลไปยัง Tag Manager ฝั่งเซิร์ฟเวอร์" เพื่อดูรายละเอียดเพิ่มเติมเกี่ยวกับวิธีกําหนดค่าคอนเทนเนอร์

ไคลเอ็นต์ Google Analytics 4

คอนเทนเนอร์ของคุณต้องให้ไคลเอ็นต์รับเหตุการณ์เมื่อมาถึงเซิร์ฟเวอร์ โชคดีที่คอนเทนเนอร์เซิร์ฟเวอร์มีไคลเอ็นต์ Google Analytics 4 ติดตั้งไว้ล่วงหน้า คุณจึงทําตามขั้นตอนนี้เรียบร้อยแล้ว

ทริกเกอร์การคลิก

ถัดไป ให้สร้างทริกเกอร์ที่เริ่มทำงานในเหตุการณ์ click สร้างทริกเกอร์ที่กำหนดเองที่เริ่มทำงานเมื่อตัวแปรบิวท์อินชื่อเหตุการณ์เท่ากับ "click"

แท็ก Google Analytics 4

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

แสดงตัวอย่างคอนเทนเนอร์

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

เมื่อพอใจกับการเปลี่ยนแปลงแล้ว ให้นำคอนเทนเนอร์เซิร์ฟเวอร์ไปใช้จริง

กำหนดค่าเซิร์ฟเวอร์สำหรับโหมดการใช้งานจริงด้วยการแสดงของบุคคลที่หนึ่ง

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