ผสานรวมแท็ก Google ลงใน CMS หรือเครื่องมือสร้างเว็บไซต์

แท็ก Google (gtag.js) เป็นข้อมูลโค้ดที่เพิ่มลงในเว็บไซต์เพื่อวัดกิจกรรมของผู้ใช้ในผลิตภัณฑ์ต่างๆ ของ Google ได้ ซึ่งรวมถึง Google Analytics 4, Google Ads และ Google Marketing Platform ดูข้อมูลเพิ่มเติมเกี่ยวกับแท็ก Google

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

ผู้ชม

คู่มือนี้มีไว้สําหรับเจ้าของระบบจัดการเนื้อหา (CMS) หรือเครื่องมือสร้างเว็บไซต์ที่ต้องการให้ผู้ใช้ได้ผสานรวมกับผลิตภัณฑ์การวัดผลของ Google คู่มือนี้ไม่ได้มีไว้สำหรับผู้ใช้ CMS หรือเครื่องมือสร้างเว็บไซต์

ก่อนเริ่มต้น

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

ภาพรวม

หากต้องการผสานรวมแพลตฟอร์มของคุณกับผลิตภัณฑ์ Google ให้ทำตามขั้นตอนต่อไปนี้

  1. สร้างการผสานรวมกับแท็ก Google
  2. อัปเดตโครงสร้างข้อมูลจากผู้ใช้
  3. ใช้ Consent API
  4. ตั้งค่าข้อมูลเหตุการณ์
  5. ยืนยันการผสานรวมที่อัปเดต
  6. อัปเดตวิธีการทำให้ผู้ใช้ใช้งานได้

สร้างการผสานรวมกับแท็ก Google

เมื่อสร้างการผสานรวมกับแท็ก Google ลูกค้าจะทําให้ผลิตภัณฑ์การวัดผลของ Google ใช้งานได้ (ผ่าน gtag.js) ในทุกหน้าของเว็บไซต์ โปรดนําการผสานรวมแท็กเดิมที่มีอยู่ออก (เช่น analytics.js) ก่อนสร้างการผสานรวมกับ gtag.js

หากต้องการสร้างการผสานรวมกับแท็ก Google ให้แทนที่ข้อมูลโค้ดที่มีอยู่ด้วยข้อมูลโค้ดต่อไปนี้ ตรวจสอบว่าผู้ใช้แทนที่ TAG_ID ด้วยรหัสแท็กของตนเองได้

<!-- Google tag (gtag.js) -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GOOGLE_TAG_ID"></script>
<script>
  window.dataLayer = window.dataLayer || [];
  function gtag(){dataLayer.push(arguments);}
  gtag('js', new Date());
  gtag('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID

  gtag('config', 'GOOGLE_TAG_ID');
</script>

โปรดทราบดังต่อไปนี้

  • ผู้ลงโฆษณาสามารถเลือกไม่ใช้ฟีเจอร์การปรับโฆษณาตามโปรไฟล์ของผู้ใช้ เช่น รีมาร์เก็ตติ้งด้วยพารามิเตอร์ allow_ad_personalization_signals (ดูปิดใช้การรวบรวมข้อมูลโฆษณาที่ปรับตามโปรไฟล์ของผู้ใช้
  • โดยหลักการแล้ว ข้อมูลโค้ดแท็ก Google ควรปรากฏเพียงครั้งเดียวต่อหน้า ข้อมูลโค้ดรองรับรหัสแท็กได้หลายรหัส หากมีอินสแตนซ์ของ gtag.js อยู่แล้ว คุณควรเพิ่มรหัสแท็กใหม่ลงในแท็กที่มีอยู่ ดูข้อมูลเพิ่มเติม

อัปเดตโครงสร้างอินพุตของผู้ใช้

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

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

รูปภาพช่องป้อนรหัสแท็ก Google

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

รูปภาพของ Analytics และ Google Ads ที่นำไปสู่อินพุตเดียว

รหัสแท็กควรยอมรับตัวแปรรหัสหลายรายการที่ใช้รูปแบบนิพจน์ทั่วไป [A-Z]{1,3}\w{5,}[\w]*

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

ผลลัพธ์ที่คาดหวังคือลูกค้าได้รับการโทรอย่างน้อย gtag('consent', 'update' {...}) รายการโดยที่ลูกค้าไม่ต้องดำเนินการใดๆ วิธีนี้ช่วยให้แท็ก Google (Google Ads, Floodlight, Google Analytics, Conversion Linker) อ่านสถานะความยินยอมล่าสุดของผู้ใช้ได้ และรวมสถานะดังกล่าวไว้ในคําขอเครือข่ายที่ส่งไปยัง Google (ผ่านพารามิเตอร์ &gcs)

ขั้นตอนการติดตั้งใช้งานเพิ่มเติมคือการติดตั้งใช้งานหรือช่วยเหลือผู้ลงโฆษณาในการทําให้สถานะ gtag('consent', default' {...}) ใช้งานได้ (เช่น ผ่าน UI) และการเลิกบล็อกแท็ก Google (กล่าวคือ ไม่มีการเริ่มทำงานตามเงื่อนไขตามความยินยอม) เพื่อเปิดใช้โหมดความยินยอมให้เริ่มทํางานในลักษณะที่อิงตามความยินยอม

ดูรายละเอียดการใช้งานได้ที่จัดการการตั้งค่าความยินยอม (เว็บ)

ตั้งค่าข้อมูลเหตุการณ์

คุณควรส่งข้อมูลเหตุการณ์ที่สมบูรณ์จากเว็บไซต์ของลูกค้าไปยังบัญชี Google ของลูกค้า โดยที่ลูกค้าไม่ต้องดำเนินการใดๆ ตัวอย่างเช่น คุณสามารถเพิ่มเหตุการณ์ในช่องทางการซื้อ (เช่น add_to_cart, begin_checkout, add_payment_info, add_shipping_info และ purchase) การสร้างความสนใจในตัวสินค้า และการลงชื่อสมัครใช้

แนวทางปฏิบัติแนะนำในการเพิ่มเหตุการณ์มีดังนี้

  • บันทึกทุกอย่างที่เป็นไปได้
  • ตั้งค่าเหตุการณ์หลักอย่างน้อย 8 รายการ
  • จัดลําดับความสําคัญของเหตุการณ์อีคอมเมิร์ซ

บันทึกทุกอย่างที่เป็นไปได้

คุณควรตั้งค่าเหตุการณ์โดยค่าเริ่มต้นหากเป็นไปได้ รวมถึงกรณีต่อไปนี้

  • เหตุการณ์ Conversion เช่น purchase หรือ sign_up
  • เหตุการณ์ก่อนเหตุการณ์ Conversion เช่น add_to_cart
  • การมีส่วนร่วมตามพฤติกรรม เช่น การโต้ตอบกับสื่อที่ช่วยให้ลูกค้า เข้าใจวิธีการมีส่วนร่วมกับผู้ใช้ปลายทาง

คุณควรเพิ่มข้อมูลโค้ดเหตุการณ์ Conversion ลงในหน้า Conversion เท่านั้น (เช่น การยืนยันการซื้อ การยืนยันการส่งแบบฟอร์ม) โปรดทราบว่าคุณยังควรเพิ่มแท็ก Google ในทุกหน้าของเว็บไซต์อยู่

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

gtag('event', 'my_event', {
  'developer_id.<developer ID>': true,
  // Additional event parameters
});

เช่น คุณใช้คําสั่ง event เพื่อส่งเหตุการณ์ login ที่มีค่า method เป็น "Google" ได้ ดังนี้

gtag('event', 'login', {
  'developer_id.<developer ID>': true,
  'method': 'Google'
});

<!-- Event snippet for sales conversion page -->
<script>
  gtag('event', 'conversion', {
      'developer_id.<developer ID>': true,
      'value': <value>,
      'currency': '<currency>',
      'transaction_id': '<transaction_id>'
  });
</script>

โปรดทราบดังต่อไปนี้

  • รหัสนักพัฒนาซอฟต์แวร์ <developer ID> ไม่ซ้ำกันและเฉพาะเจาะจงสำหรับแพลตฟอร์มของคุณ แนบรหัสกับทุกกิจกรรม
  • พารามิเตอร์ต่อไปนี้ไม่บังคับและละเว้นได้
    • 'value' คือมูลค่าที่เป็นตัวเลขของ Conversion (เช่น ราคาการซื้อ)
    • 'currency' คือรหัสสกุลเงินแบบ 3 ตัวอักษร ซึ่งมีประโยชน์สำหรับผู้ลงโฆษณา ที่ยอมรับหลายสกุลเงิน
    • 'transaction_id' คือรหัสที่ไม่ซ้ำกันสำหรับธุรกรรม (เช่น รหัสคำสั่งซื้อ) ซึ่งใช้ในการขจัดความซ้ำซ้อน
  • แม้ว่าพารามิเตอร์บางรายการจะไม่บังคับ แต่ขอแนะนําให้คุณใส่ข้อมูลให้มากที่สุดเท่าที่จะทําได้สําหรับแต่ละเหตุการณ์
    • พารามิเตอร์ให้ข้อมูลเพิ่มเติมเกี่ยวกับวิธีที่ผู้ใช้โต้ตอบกับเว็บไซต์หรือแอป เช่น เมื่อมีผู้เข้ามาดูผลิตภัณฑ์ที่คุณขาย คุณสามารถใส่พารามิเตอร์ที่อธิบายผลิตภัณฑ์ที่ผู้ใช้ดู เช่น ชื่อ หมวดหมู่ และราคา
    • พารามิเตอร์บางอย่างจะป้อนข้อมูลมิติข้อมูลและเมตริกที่กำหนดไว้ล่วงหน้าใน Google Analytics โดยอัตโนมัติ และช่วยให้ผู้ใช้เข้าใจลูกค้าได้ดียิ่งขึ้น

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

<!-- Event snippet for sales conversion page
    In your HTML page, add the snippet and call gtag_report_conversion
    when someone clicks on the chosen link or button. -->
<script>
  function gtag_report_conversion(url) {
  var callback = function () {
    if (typeof(url) != 'undefined') {
      window.location = url;
    }
  };
  gtag('event', 'conversion', {
    'developer_id.<developer ID>': true,
    'value': <value>,
    'currency': '<currency>',
    'transaction_id': '<transaction_id>',
    'event_callback': callback
  });
  return false;
}
</script>

ตั้งค่าเหตุการณ์หลักอย่างน้อย 8 รายการ

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

  • view_item_list: เมื่อผู้ใช้ดูรายการสินค้า (เช่น รายการสินค้า) ดูข้อมูลเพิ่มเติม

    gtag('event', 'view_item_list', {
  item_list_id: "related_products",
  item_list_name: "Related products",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Item",
    currency: "USD",
    discount: 2.22,
    price: 99.9,
    quantity: 1
  }]
});

  • add_to_cart: เมื่อผู้ใช้เพิ่มผลิตภัณฑ์อย่างน้อย 1 รายการลงในรถเข็นช็อปปิ้ง ดูข้อมูลเพิ่มเติม

    gtag('event', 'add_to_cart', {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • begin_checkout: เมื่อผู้ใช้เริ่มกระบวนการชำระเงินสำหรับผลิตภัณฑ์อย่างน้อย 1 รายการ ดูข้อมูลเพิ่มเติม

    gtag('event', 'begin_checkout') {
  value: 99.0,
  currency: "USD",
  items: [{
    item_id: "SKU_123",
    item_name: "Test Product",
    price: 99.0,
    currency: ‘USD’,
    quantity: 1,
    item_category: "All Products"
  }]
});

  • purchase: เมื่อผู้ใช้ซื้อผลิตภัณฑ์หรือบริการอย่างน้อย 1 รายการ ดูข้อมูลเพิ่มเติม

    gtag('event', 'purchase', {value: XX, currency: 'USD', items: [{xx},{xx}]});

  • sign_up: เมื่อผู้ใช้ลงชื่อสมัครใช้เพื่อให้ผู้ใช้ปลายทางดูวิธีลงชื่อสมัครใช้ที่ได้รับความนิยมสูงสุดได้ (เช่น บัญชี Google, อีเมล) ดูข้อมูลเพิ่มเติม

    gtag('event', 'sign_up', {method: 'web'});

  • generate_lead: เมื่อผู้ใช้ส่งแบบฟอร์ม ดูข้อมูลเพิ่มเติม

    gtag('event', 'generate_lead', {value: XX, currency: 'USD'});

  • subscribe: เมื่อผู้ใช้สมัครใช้บริการหรือสมัครรับจดหมายข่าว

    gtag('event', 'subscribe', {value: XX, currency: 'USD', coupon: 'XX'});

  • book_appointment: เมื่อผู้ใช้จองการนัดหมาย

    gtag('event', 'book_appointment', {value: XX, currency: 'USD', coupon: 'XX'});

คำแนะนำเพิ่มเติม

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

  • เหตุการณ์ความสำเร็จใดๆ ที่เกี่ยวข้องกับมูลค่าโดยตรง
  • เหตุการณ์ความสําเร็จที่ทําให้เกิด Conversion หลัก (add_to_cart, sign_up ฯลฯ)
  • การมีส่วนร่วมและการโต้ตอบของผู้ใช้ที่ช่วยให้ผู้ลงโฆษณาทราบว่า กำลังมีส่วนร่วมกับผู้ใช้ปลายทางอย่างไร

แหล่งข้อมูลเพิ่มเติมที่อธิบายเพิ่มเติมเกี่ยวกับการรวบรวมเหตุการณ์มีดังนี้

เราสนใจที่จะพูดคุยเกี่ยวกับส่วนขยายที่เป็นไปได้สำหรับสคีมานี้ โปรดแจ้งให้เราทราบหากคุณมีข้อเสนอแนะ

ยืนยันการผสานรวมที่อัปเดตแล้ว

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

  • แท็ก Google ที่มีปลายทาง Google Analytics 4
  • แท็ก Google สําหรับรีมาร์เก็ตติ้งและการวัด Conversion

นอกจากนี้ โปรดตรวจสอบว่าแท็กเริ่มทํางานอย่างถูกต้องในทุกหน้า รวมถึงหน้า Conversion โดยใช้เครื่องมือต่อไปนี้

  • ผู้ช่วยแท็กของ Google: แท็ก Assistant ช่วยให้คุณเห็นว่าแท็ก Google ใดเริ่มทำงานและในลำดับใด แท็ก โหมดแก้ไขข้อบกพร่องของ Assistant จะแสดงข้อมูลที่ส่งไปยังชั้นข้อมูลและ เหตุการณ์ที่ทำให้เกิดการแลกเปลี่ยนข้อมูลดังกล่าว
  • เครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome: ใช้แท็บเครือข่ายเพื่อกรองคำขอที่มี "google" เพื่อยืนยันวิธีส่งข้อมูล
  • (ฝั่งเซิร์ฟเวอร์) รายงานแบบเรียลไทม์ของ Google Analytics: สร้างบัญชี Google Analytics ได้ฟรีและใช้รายงานแบบเรียลไทม์เพื่อดูว่าเซิร์ฟเวอร์ของ Google ได้รับ Hit ของแท็กหรือไม่

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

หากเป็นไปได้ โปรดแชร์สิทธิ์เข้าถึงการทดสอบกับ Google เพื่อทำการยืนยันอย่างต่อเนื่อง

อัปเดตวิธีการติดตั้งใช้งานสำหรับผู้ใช้

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