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

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

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

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

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

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

แผนภาพของเว็บไซต์ที่ติดตั้งเครื่องมือโดยใช้คอนเทนเนอร์การติดแท็กฝั่งเซิร์ฟเวอร์

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

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

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

โมเดลนี้ทำให้เกิดคำถามสำคัญ 2 ข้อสำหรับคอนเทนเนอร์ของเซิร์ฟเวอร์ ได้แก่

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

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

วิธีการทำงานของไคลเอ็นต์

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

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

แผนภาพของเว็บไซต์ที่ติดตั้งเครื่องมือโดยใช้คอนเทนเนอร์การติดแท็กฝั่งเซิร์ฟเวอร์

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

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

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

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

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

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

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

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

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

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

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

  1. เว็บไซต์ง่ายๆ ที่ใช้ gtag.js เพื่อส่งเหตุการณ์ click ไปยังคอนเทนเนอร์ของเซิร์ฟเวอร์
  2. ไคลเอ็นต์ Google Analytics ที่รับเหตุการณ์
  3. ทริกเกอร์ที่เริ่มทำงานเมื่อเกิดเหตุการณ์ click
  4. แท็ก Google Analytics ที่ส่งข้อมูลเหตุการณ์ไปยัง 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 ด้วย แท็ก 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 ด้วย แท็ก ID ของคุณ แทนที่https://analytics.example.com ด้วย URL ของคอนเทนเนอร์ของเซิร์ฟเวอร์

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

ไคลเอ็นต์ Google Analytics

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

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

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

การกำหนดค่าทริกเกอร์

แท็ก Google Analytics

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

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

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

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

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

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