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

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

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

กลุ่มเป้าหมาย

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

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

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

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

ภาพรวม

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

1. สร้างการผสานรวมกับแท็ก Google
2. อัปเดตโครงสร้างข้อมูลจากผู้ใช้
3. ติดตั้งใช้งาน 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 ควรปรากฏเพียงครั้งเดียวต่อหน้า ข้อมูลโค้ดรองรับรหัสแท็กหลายรหัส หากมีอินสแตนซ์ gtag.js อยู่แล้ว คุณควรเพิ่มรหัสแท็กใหม่ลงในแท็กที่มีอยู่ ดูข้อมูลเพิ่มเติม

อัปเดตโครงสร้างข้อมูลจากผู้ใช้

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

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

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

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

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

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

ผลลัพธ์ที่คาดหวังคือ ลูกค้าจะได้รับการผสานรวมการเรียก gtag('consent', 'update' {...}) อย่างน้อย 1 รายการโดยที่ลูกค้าไม่ต้องดำเนินการใดๆ โดย ลูกค้า ซึ่งจะช่วยให้แท็ก 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

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

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

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

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

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

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

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

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

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

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