ผสานรวมแท็ก 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('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

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