[UA→GA4] วิธีการแมป gtag.js สําหรับ UA กับ GA4

คู่มือการติดตั้งนี้มีไว้สําหรับเจ้าของเว็บไซต์ที่ใช้ไลบรารี gtag.js และต้องการทราบวิธีการแมป gtag.js สําหรับ Universal Analytics (UA) กับ Google Analytics 4 และจะถือว่าคุณสร้างพร็อพเพอร์ตี้ Google Analytics 4 ไว้แล้ว หากคุณต้องการเพียงแค่เพิ่มโค้ดการวัดพื้นฐานลงในเว็บไซต์ โปรดอ่านบทความนี้แทน

บทความนี้ประกอบด้วย

• เกี่ยวกับข้อมูลโค้ด gtag.js
• การรวบรวมข้อมูลพื้นฐาน
• การกำหนดค่าสำหรับ gtag.js
• เหตุการณ์
• มิติข้อมูลและเมตริกที่กำหนดเอง

เกี่ยวกับข้อมูลโค้ด gtag.js และรหัสพร็อพเพอร์ตี้

ข้อมูลโค้ด gtag.js สําหรับพร็อพเพอร์ตี้ Universal Analytics และพร็อพเพอร์ตี้ Google Analytics 4 มีลักษณะเหมือนกันโดยพื้นฐาน ข้อมูลโค้ดทั้ง 2 แบบมีโครงสร้างดังนี้

01: <script async src="https://www.googletagmanager.com/gtag/js?id=<รหัสพร็อพเพอร์ตี้ A>"></script>

02: <script>

03: window.dataLayer = window.dataLayer || [];

04: function gtag(){dataLayer.push(arguments);}

05: gtag('js', new Date());

06:

07: gtag('config', '<รหัสพร็อพเพอร์ตี้ A>');

08:

09: gtag('config', '<รหัสพร็อพเพอร์ตี้ B>');

10:

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

12:

13: gtag('event', 'view_video', { 'send_to': '<รหัสพร็อพเพอร์ตี้ B>' });

14:

15: </script>

บรรทัดที่ 1: หากคุณติดตั้งใช้งานพร็อพเพอร์ตี้ Universal Analytics ผ่าน gtag.js ก็น่าจะมีโค้ดบรรทัดนี้ในเว็บไซต์อยู่แล้ว คุณจะเห็น "UA-" ตามด้วยชุดตัวเลขแทน <รหัสพร็อพเพอร์ตี้ A> หากคุณติดตั้งใช้งาน gtag.js สำหรับ Google Ads หรือผลิตภัณฑ์อื่นของ Google Marketing Platform ก็อาจมีโค้ดบรรทัดนี้ในเว็บไซต์ด้วย แต่ <รหัสพร็อพเพอร์ตี้ A> จะขึ้นต้นด้วย "AW-" หรือ "DC-"

รหัสพร็อพเพอร์ตี้ (หรือรหัสแท็กของพร็อพเพอร์ตี้ Google Analytics 4) ที่ระบุด้วย <รหัสพร็อพเพอร์ตี้ A> จะ "ควบคุม" ข้อมูลโค้ด gtag.js นี้ ซึ่งเป็นสิ่งสำคัญเนื่องจากเหตุผลต่อไปนี้

1. หากมีบรรทัดนี้อยู่แล้วก็ไม่จำเป็นต้องติดตั้งใช้งานอีกเป็นครั้งที่ 2 คุณแค่ต้องเพิ่มบรรทัด "config" เพื่อระบุรหัสแท็กเท่านั้น
2. รหัสพร็อพเพอร์ตี้ในบรรทัดนี้คือ "ตัวควบคุม" ของข้อมูลโค้ด gtag.js หากรหัสพร็อพเพอร์ตี้ Universal Analytics ("UA-XXXXXXXX") ควบคุมแท็ก คุณจะใช้แท็กเว็บไซต์ที่เชื่อมต่อเพื่อส่งข้อมูลการวัดไปยังพร็อพเพอร์ตี้ Google Analytics 4 ได้โดยไม่ต้องเพิ่มโค้ดใหม่ใดๆ ลงในหน้าเว็บ

บรรทัดที่ 7: คำสั่ง "config" ของ gtag จะทำให้เกิดการรวบรวมข้อมูลไปยังพร็อพเพอร์ตี้ที่เชื่อมโยงกับ <รหัสพร็อพเพอร์ตี้ A> ตัวอย่างเช่น ในพร็อพเพอร์ตี้ Google Analytics 4 การเพิ่มคำสั่งนี้พร้อมรหัสแท็กจะเป็นการส่งเหตุการณ์ page_view ไปยังพร็อพเพอร์ตี้นั้น

รหัสพร็อพเพอร์ตี้อาจแสดงถึงการวัดสำหรับผลิตภัณฑ์ Google อื่นๆ รวมถึงพร็อพเพอร์ตี้ Universal Analytics ("UA-XXXXXXXX"), พร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX"), Google Ads ("AW-XXXXXXXX") หรือ Floodlight ("DC-XXXXXXXX")

บรรทัดที่ 11: คําสั่ง "event" ของ gtag จะส่งเหตุการณ์ ในข้อมูลโค้ดที่มีคำสั่ง "config" หลายคำสั่งสำหรับพร็อพเพอร์ตี้หลายรายการ ระบบจะส่งเหตุการณ์ไปยังพร็อพเพอร์ตี้ทั้งหมด

ในตัวอย่างนี้ พารามิเตอร์ "sign_up" คือชื่อเหตุการณ์ พารามิเตอร์สุดท้ายคือออบเจ็กต์ซึ่งประกอบด้วยชุดพารามิเตอร์เหตุการณ์ ซึ่ง "method" คือพารามิเตอร์ที่มีค่าเป็น "email"

บรรทัดที่ 13: เหตุการณ์ในบรรทัดนี้มี "send_to" เป็นพารามิเตอร์ ซึ่งเป็นพารามิเตอร์พิเศษที่ส่งเหตุการณ์ที่เกี่ยวข้องไปยังพร็อพเพอร์ตี้หนึ่งๆ กล่าวคือ ระบบจะส่งเหตุการณ์นี้ไปยังพร็อพเพอร์ตี้ที่ระบุโดย <รหัสพร็อพเพอร์ตี้ B> เท่านั้น

คําสั่ง config ของ gtag จะทำให้เกิดการวัดพื้นฐาน

• สำหรับพร็อพเพอร์ตี้ Universal Analytics คำสั่ง "config" ที่มีรหัสพร็อพเพอร์ตี้ Universal Analytics จะส่ง Hit การดูหน้าเว็บ
• สําหรับพร็อพเพอร์ตี้ Google Analytics 4 คำสั่ง "config" ที่มีรหัสแท็กจะทำให้ระบบรวบรวมเหตุการณ์ page_view (เป็นเหตุการณ์ที่รวบรวมโดยอัตโนมัติ) เมื่อโหลดในหน้าเว็บ

ตัวระบุพร็อพเพอร์ตี้

รหัสพร็อพเพอร์ตี้ Universal Analytics มีรูปแบบ "UA-XXXXXXXX" ซึ่งบางครั้งเรียกว่ารหัสติดตาม แต่ในคู่มือนี้เราจะเรียกว่ารหัสพร็อพเพอร์ตี้ UA

สตรีมข้อมูลเว็บของพร็อพเพอร์ตี้ Google Analytics 4 ใช้รหัสแท็กที่มีรูปแบบ "G-XXXXXXXX"

ในตัวอย่างโค้ดบางรายการและเอกสารประกอบบางฉบับ ทั้ง 2 อย่างนี้อาจเรียกว่า "TAG_ID"

การรวบรวมข้อมูลพื้นฐาน

การเปิดใช้การรวบรวมข้อมูลพื้นฐานสำหรับพร็อพเพอร์ตี้ Google Analytics 4 ช่วยในการรวบรวมข้อมูลต่อไปนี้

• เหตุการณ์ page_view
• เหตุการณ์ที่รวบรวมโดยอัตโนมัติ
• เหตุการณ์การวัดที่ปรับปรุงแล้ว (หากเปิดใช้ใน UI)

หากพร็อพเพอร์ตี้ Universal Analytics ที่มีอยู่ใช้การติดตั้งใช้งาน gtag.js คุณจะเปิดใช้การรวบรวมข้อมูลพื้นฐานสําหรับพร็อพเพอร์ตี้ Google Analytics 4 ได้โดยดําเนินการดังนี้

• ตัวเลือกที่ 1: เพิ่มคําสั่ง "config" ใหม่พร้อมรหัสแท็กที่เกี่ยวข้อง
  หรือ
• ตัวเลือกที่ 2: เปิดแท็กเว็บไซต์ที่เชื่อมต่อ (หากการติดตั้งใช้งาน gtag.js ที่มีอยู่เข้าเกณฑ์)

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

ตัวเลือกที่ 1: เพิ่มคำสั่ง "config" ใหม่

หากหน้าเว็บมี gtag.js อยู่แล้ว คุณเพียงแค่ป้อนคําสั่ง "config" เพิ่มเติมพร้อมรหัสการวัดของพร็อพเพอร์ตี้ Google Analytics 4 ที่เกี่ยวข้อง ในตัวอย่างด้านล่าง มีการเพิ่มบรรทัดที่ 8 ลงในการติดตั้งใช้งาน gtag.js ที่มีอยู่ ซึ่งอ้างอิงถึงรหัสการวัดของพร็อพเพอร์ตี้ Google Analytics 4 การดําเนินการนี้จะส่งเหตุการณ์ page_view ไปยังพร็อพเพอร์ตี้ Google Analytics 4 ดังกล่าว และยังทำให้เกิดเหตุการณ์ที่รวบรวมโดยอัตโนมัติและเหตุการณ์การวัดที่ปรับปรุงแล้ว (หากคุณเปิดใช้การวัดที่ปรับปรุงแล้ว) ในพร็อพเพอร์ตี้ Google Analytics 4 ดังกล่าวอีกด้วย

1: <script async src="https://www.googletagmanager.com/gtag/js?id=<รหัสพร็อพเพอร์ตี้ A>"></script>

2: <script>

3: window.dataLayer = window.dataLayer || [];

4: function gtag(){dataLayer.push(arguments);}

5: gtag('js', new Date());

6:

7: gtag('config', '<รหัสพร็อพเพอร์ตี้ A>');

8: gtag('config', 'G-XXXXXXXX');

9: </script>

ตัวเลือกที่ 2: เปิดแท็กเว็บไซต์ที่เชื่อมต่อ

คุณสามารถใช้แท็กเว็บไซต์ที่เชื่อมต่อได้ในกรณีต่อไปนี้

• ข้อมูลโค้ด gtag.js ที่มีอยู่ในหน้าเว็บที่ต้องการวัดการโต้ตอบของผู้ใช้มีการ "ควบคุม" โดยพร็อพเพอร์ตี้ Universal Analytics (เช่น รหัสที่อ้างอิงในบรรทัดนี้ของข้อมูลโค้ด gtag.js จะขึ้นต้นด้วย "UA-")

<script async src="https://www.googletagmanager.com/gtag/js?id=<รหัสพร็อพเพอร์ตี้ A>"></script>

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

• และคุณมีสิทธิ์เข้าถึงระดับผู้ดูแลระบบในพร็อพเพอร์ตี้ Universal Analytics ที่มีการอ้างอิงด้วยรหัสในข้อมูลโค้ด

หากคุณใช้ทั้งแท็ก gtag.js และคอนเทนเนอร์ GTM ในหน้าเว็บ คุณจะต้องวางแท็ก gtag.js ไว้เหนือคอนเทนเนอร์ GTM เพื่อให้แท็กเว็บไซต์ที่เชื่อมต่อทำงานได้

การกำหนดค่าสำหรับ gtag.js

คุณสามารถกําหนดค่าข้อมูลโค้ด gtag.js พื้นฐานเพื่อควบคุมการตั้งค่าการรวบรวมข้อมูล เช่น การลบข้อมูลระบุ IP, การกําหนดค่าคุกกี้เอง และ Google Signals โดยใช้คําสั่ง "config" หรือ "set" ใน gtag.js

ทั้งพร็อพเพอร์ตี้ Universal Analytics ("UA-XXXXXXXX") และพร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX") รองรับการติดตั้งใช้งานการกำหนดค่าเหล่านี้ผ่าน gtag.js อย่างไรก็ตาม การตั้งค่าเหล่านี้จะแตกต่างกันออกไปตามพร็อพเพอร์ตี้ Universal Analytics และ Google Analytics 4 

• การลบข้อมูลระบุ IP จะได้รับการปรับมาตรฐานเป็น "true" และกำหนดค่าไม่ได้ในพร็อพเพอร์ตี้ Google Analytics 4 ด้วยเหตุนี้ ระบบจะพรางที่อยู่ IP ที่มีเหตุการณ์มาตรฐานสำหรับพร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX") โดยอัตโนมัติ

• เมื่อจําเป็นต้องใช้การตั้งค่าร่วมกับพร็อพเพอร์ตี้ที่กําหนดค่าทั้งหมด คุณควรใช้คําสั่ง "set" เพื่อนําไปใช้กับรหัสการวัดและ/หรือรหัสพร็อพเพอร์ตี้ทั้งหมด รวมถึงรหัสที่ติดตั้งใช้งานผ่านแท็กเว็บไซต์ที่เชื่อมต่อ
• ให้ความสำคัญเป็นพิเศษกับฟีเจอร์ปิดใช้การปรับโฆษณาตามโปรไฟล์ของผู้ใช้ ซึ่งโดยส่วนใหญ่จะใช้กับบรรทัด "config"
• เมื่อใช้แท็กเว็บไซต์ที่เชื่อมต่อ: การกำหนดค่าใดๆ ที่ดำเนินการในโค้ด gtag.js โดยใช้คำสั่ง "config" จะใช้ได้กับพร็อพเพอร์ตี้ที่เชื่อมโยงกับรหัสการวัดในบรรทัดโค้ดดังกล่าวเท่านั้น และระบบจะไม่ส่งการกำหนดค่าเหล่านี้ไปยังพร็อพเพอร์ตี้ Google Analytics 4 ที่เชื่อมต่อโดยอัตโนมัติ หากคุณต้องการใช้การกําหนดค่ากับพร็อพเพอร์ตี้ Google Analytics 4 ที่เชื่อมต่อ ให้ทำดังนี้
  • สร้างคําสั่ง "config" แยกต่างหากและใช้กับพร็อพเพอร์ตี้ Google Analytics 4 ที่เกี่ยวข้องโดยอ้างอิงรหัสการวัด
    หรือ
  • กำหนดการตั้งค่าโดยใช้คำสั่ง "set" ซึ่งในกรณีนี้ ระบบจะใช้การกำหนดค่ากับพร็อพเพอร์ตี้ที่กำหนดค่าไว้ทั้งหมด

ตัวอย่างการกำหนดค่า

เปิดใช้การรวบรวมข้อมูลพื้นฐาน กําหนดค่ารหัสผู้ใช้

gtag('config', 'GA_MEASUREMENT_ID', {

'user_id': 'USER_ID'

});

กำหนดการตั้งค่าคุกกี้

gtag('config', 'GA_MEASUREMENT_ID', {

'cookie_prefix': 'MyCookie',

'cookie_domain': 'blog.example.com',

'cookie_expires': 28 * 24 * 60 * 60 // 28 วันในหน่วยวินาที

});

บล็อกเหตุการณ์ page_view

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

gtag('config', 'MEASUREMENT_ID', {

'user_id': 'USER_ID',

'send_page_view': false

});

เหตุการณ์

โปรดดูคำแนะนำในการย้ายข้อมูลเหตุการณ์

มิติข้อมูลและเมตริกที่กำหนดเอง

คุณสามารถใช้มิติข้อมูลและเมตริกที่กำหนดเองได้เพื่อขยายข้อมูล และเพื่อนำเข้าข้อมูลออฟไลน์จากระบบต่างๆ เช่น CRM

เมื่อใช้แท็ก Google (gtag.js) ระบบจะแปลงการวัดมิติข้อมูลและเมตริกที่กำหนดเองเป็นพารามิเตอร์โดยอัตโนมัติ หากมีการใช้แท็กเว็บไซต์ที่เชื่อมต่อหรือพร็อพเพอร์ตี้ Google Analytics 4 (เช่น "G-XXXXXXXX")

ดูข้อมูลเพิ่มเติมเกี่ยวกับมิติข้อมูลและเมตริกที่กำหนดเอง