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

แท็ก Google คือข้อมูลโค้ดที่เพิ่มลงในเว็บไซต์ได้เพื่อวัดกิจกรรมของผู้ใช้ในผลิตภัณฑ์ต่างๆ ของ 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('set', 'developer_id.<developer ID>', true); // Replace with your Google tag Developer ID
  gtag('js', new Date());

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

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

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

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

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

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

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

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

ใช้ Consent API (หรือที่เรียกว่าโหมดความยินยอม)

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

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

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

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

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

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

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

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

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

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

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

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

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

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

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

• เหตุการณ์
• เหตุการณ์ที่แนะนําตามกรณีการใช้งาน
• วัดอีคอมเมิร์ซสําหรับพร็อพเพอร์ตี้ Google Analytics 4

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

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

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

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

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

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

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

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

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

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