เกี่ยวกับข้อมูลโค้ด gtag.js
หากใช้ analytics.js สำหรับพร็อพเพอร์ตี้ Universal Analytics ปัจจุบัน คุณจะต้องเพิ่มข้อมูลโค้ด gtag.js สำหรับพร็อพเพอร์ตี้ Google Analytics 4 ใหม่ ข้อมูลโค้ด gtag.js มีโครงสร้างดังนี้
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>
บรรทัดที่ 7: คำสั่ง "config" ของ gtag จะทำให้เกิดการรวบรวมข้อมูลไปยังพร็อพเพอร์ตี้ที่เชื่อมโยงกับ <รหัสพร็อพเพอร์ตี้ A> ตัวอย่างเช่น การเพิ่มคำสั่งนี้พร้อมรหัสแท็กสำหรับพร็อพเพอร์ตี้ Google Analytics 4 จะเป็นการส่งเหตุการณ์ page_view ไปยังพร็อพเพอร์ตี้นั้น
รหัสพร็อพเพอร์ตี้อาจแสดงถึงผลิตภัณฑ์ที่แตกต่างกันของ Google ซึ่งรวมถึงพร็อพเพอร์ตี้ UA ("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> เท่านั้น
การรวบรวมข้อมูลพื้นฐานสําหรับพร็อพเพอร์ตี้ Google Analytics 4 เปิดใช้งานได้ผ่านคำสั่ง "config" ของ gtag และจะเปิดใช้การรวบรวมเหตุการณ์ page_view เป็นเหตุการณ์ที่รวบรวมโดยอัตโนมัติเมื่อโหลดในหน้าเว็บ
คุณสามารถแก้ไขหรือบล็อก Hit ของการดูหน้าเว็บหรือเหตุการณ์ page_view ได้โดยใช้พารามิเตอร์ที่เฉพาะเจาะจง
ตัวระบุพร็อพเพอร์ตี้
รหัสพร็อพเพอร์ตี้ Universal Analytics มีรูปแบบ "UA-XXXXXXXX" ซึ่งบางครั้งเรียกว่ารหัสติดตาม แต่ในคู่มือนี้เราจะเรียกว่ารหัสพร็อพเพอร์ตี้ UA
สตรีมข้อมูลเว็บของพร็อพเพอร์ตี้ Google Analytics 4 ใช้รหัสแท็กในรูปแบบ "G-XXXXXXXX"
ในตัวอย่างโค้ดบางรายการและเอกสารประกอบบางฉบับ ทั้ง 2 อย่างนี้อาจเรียกว่า "TAG_ID"
การรวบรวมข้อมูลพื้นฐาน
การเปิดใช้การรวบรวมข้อมูลพื้นฐานสําหรับพร็อพเพอร์ตี้ Google Analytics 4 ช่วยในการรวบรวมข้อมูลต่อไปนี้
- เหตุการณ์ page_view
- เหตุการณ์ที่รวบรวมโดยอัตโนมัติ
- เหตุการณ์การวัดที่ปรับปรุงแล้ว (หากเปิดใช้ใน UI)
หากต้องการเปิดใช้การรวบรวมข้อมูลพื้นฐานสำหรับพร็อพเพอร์ตี้ Google Analytics 4 ให้เพิ่มข้อมูลโค้ด gtag.js (แท็ก Google) ลงในส่วน <head> ของแต่ละหน้า
ข้อมูลโค้ด gtag.js เมื่อเทียบกับข้อมูลโค้ด analytics.js
ข้อมูลโค้ด gtag.js สำหรับพร็อพเพอร์ตี้ Google Analytics 4 มีจุดประสงค์การใช้งานคล้ายกับข้อมูลโค้ด analytics.js สำหรับพร็อพเพอร์ตี้ Universal Analytics
ความแตกต่างที่ชัดเจนระหว่างข้อมูลโค้ดทั้ง 2 แบบคือโค้ด analytics.js จะมีการเรียกใช้ "send pageview" แยกต่างหาก ขณะที่โค้ด gtag.js ไม่มี ใน gtag.js การดูหน้าเว็บคือเหตุการณ์ที่รวบรวมโดยอัตโนมัติที่ส่งไปพร้อมกับคําสั่ง "config"
พร็อพเพอร์ตี้ Universal Analytics (analytics.js)
<script>
(function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
(i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
ga('create', 'TAG_ID', 'auto');
ga('send', 'pageview');
</script>
พร็อพเพอร์ตี้ Google Analytics 4 (gtag.js)
<script async src="https://www.googletagmanager.com/gtag/js?id=TAG_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('js', new Date());
gtag('config', 'TAG_ID');
</script>
การตั้งการกําหนดค่าสําหรับ gtag.js
คุณสามารถกําหนดค่าข้อมูลโค้ด gtag.js พื้นฐานเพื่อควบคุมการตั้งค่าการรวบรวมข้อมูลได้ เช่น การมาสก์ IP, การกําหนดค่าคุกกี้เอง และ Google Signals ที่คล้ายกับ analytics.js การดำเนินการนี้ทำได้ผ่านคำสั่ง "config" หรือ "set" ใน gtag.js (เทียบกันผ่านคำสั่ง "set," "create" และ "require" ใน analytics.js)
พร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX") รองรับการติดตั้งใช้งานที่คล้ายกับการตั้งค่า config ผ่าน gtag.js การตั้งค่าเหล่านี้จะแตกต่างกันออกไปตามพร็อพเพอร์ตี้ Universal Analytics และ Google Analytics 4 โปรดพิจารณาข้อต่อไปนี้
- การมาสก์ IP จะได้รับการปรับมาตรฐานเป็น "true" และกำหนดค่าไม่ได้ในพร็อพเพอร์ตี้ Google Analytics 4 ด้วยเหตุนี้ ระบบจะมาสก์ที่อยู่ IP ซึ่งมีเหตุการณ์มาตรฐานสำหรับพร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX") โดยอัตโนมัติ
- เมื่อจําเป็นต้องใช้การตั้งค่าร่วมกับพร็อพเพอร์ตี้ที่กําหนดค่าทั้งหมด คุณควรใช้คําสั่ง "set" เพื่อนําไปใช้กับรหัสแท็กและ/หรือรหัสพร็อพเพอร์ตี้ทั้งหมด
- ให้ความสำคัญเป็นพิเศษกับฟีเจอร์การโฆษณาและการปรับโฆษณาตามโปรไฟล์ของผู้ใช้ ซึ่งโดยส่วนใหญ่จะใช้กับบรรทัด "config"
หากคุณใช้คําสั่ง "set", "create" และ "require" ในการติดตั้งใช้งาน analytics.js ปัจจุบัน ให้ตรวจสอบว่าคําสั่งใดที่ตั้งค่าไว้ในพร็อพเพอร์ตี้ Google Analytics 4 โดยอัตโนมัติและคำสั่งใดที่จำเป็นต้องระบุในโค้ดพร็อพเพอร์ตี้ Google Analytics 4 (การแมปพารามิเตอร์)
ต่อไปนี้เป็นตัวอย่างการกำหนดค่าด้วยตัวอย่างโค้ดใน analytics.js (สำหรับพร็อพเพอร์ตี้ UA) และ gtag.js (สำหรับพร็อพเพอร์ตี้ Google Analytics 4)
เปิดใช้การรวบรวมข้อมูลพื้นฐาน กําหนดค่า User-ID
analytics.js
ga('create', 'TAG_ID', 'auto', {
userId: USER_ID
});
ga('send', 'pageview');
gtag.js
gtag('config', 'TAG_ID', {
'user_id': 'USER_ID'
});
กำหนดการตั้งค่าคุกกี้
analytics.js
ga('create', 'TAG_ID', {
'cookieName': 'gaCookie',
'cookieDomain': 'blog.example.co.uk',
'cookieExpires': 60 * 60 * 24 * 28 // เวลาเป็นวินาที
});
gtag.js
gtag('config', 'TAG_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', 'TAG_ID', {
'user_id': 'USER_ID',
'send_page_view': false
});
ชื่อแท็ก
ระบบจะใช้ชื่อแท็ก (หรือที่เรียกว่า "เครื่องมือติดตาม") หากคุณต้องการส่งข้อมูลไปยังพร็อพเพอร์ตี้ Universal Analytics อื่นใน analytics.js ใน analytics.js เครื่องมือติดตามจะกําหนดพร็อพเพอร์ตี้ที่คุณต้องการส่งข้อมูลไปให้ Hit ที่เกิดขึ้นหลังจาก Hit "create" เริ่มต้นไม่จำเป็นต้องระบุรหัสพร็อพเพอร์ตี้ Universal Analytics อีก แต่ระบุเพียงแค่ชื่อเครื่องมือติดตาม
ใน gtag.js เครื่องมือติดตามจะใช้ไม่ได้กับพร็อพเพอร์ตี้ Google Analytics 4 หรือพร็อพเพอร์ตี้ Universal Analytics หากต้องการส่ง Hit ทั้งหมดไปยังพร็อพเพอร์ตี้หลายรายการ (สตรีมข้อมูลที่แตกต่างกันในพร็อพเพอร์ตี้ Google Analytics 4) คุณต้องระบุรหัสแท็กหรือรหัสพร็อพเพอร์ตี้ทั้งหมดในบรรทัด "config"
เหตุการณ์
โปรดดูคำแนะนำในการย้ายข้อมูลเหตุการณ์มิติข้อมูลและเมตริกที่กำหนดเอง
ระบบใช้มิติข้อมูลและเมตริกที่กําหนดเองเพื่อขยายข้อมูลที่มีการวัดในเว็บไซต์ และเพื่อนําเข้าข้อมูลออฟไลน์จากระบบต่างๆ เช่น CRM ในพร็อพเพอร์ตี้ Universal Analytics ("UA-XXXXXXXX" ) ระบบจะกำหนดรหัสให้กับมิติข้อมูลและเมตริกที่กําหนดเองซึ่งจำเป็นต้องสร้างใน UI ก่อน จากนั้นคุณจึงจะติดตั้งใช้งานหรือนำเข้าได้ มิติข้อมูลและเมตริกที่กําหนดเองสามารถสร้างได้ด้วยขอบเขตที่แตกต่างกัน 4 แบบ ได้แก่ Hit, เซสชัน, ผู้ใช้ และผลิตภัณฑ์
ในพร็อพเพอร์ตี้ Google Analytics 4 ("G-XXXXXXXX") Use Case ของมิติข้อมูลและเมตริกที่กําหนดเองจะมีการติดตั้งใช้งานด้วยวิธีที่ต่างออกไป การวัดมิติข้อมูลและเมตริกที่กําหนดเองในพร็อพเพอร์ตี้ UA ที่ติดตั้งใช้งานผ่าน analytics.js จะต้องมีการติดตั้งใช้งานใหม่เป็นพารามิเตอร์ในพร็อพเพอร์ตี้ Google Analytics 4
มิติข้อมูลที่กำหนดเองสำหรับพร็อพเพอร์ตี้ Universal Analytics อาจติดตั้งใช้งานผ่าน analytics.js ได้ดังนี้
ga('send', 'event', 'category_value', 'action_name', {'dimension5': 'custom data'
});
หรือ
ga('set', 'dimension5', 'custom data');
มิติข้อมูลที่กําหนดเองเหล่านี้ได้รับการแปลเป็นพร็อพเพอร์ตี้ Google Analytics 4 ได้ผ่าน gtag.js ดังนี้
gtag('event', 'action_name', {'eventCategory': 'category_value',
'dimension5': 'custom data'
});
หรือ
gtag('set', {'dimension5': 'custom data'});
มีข้อควรระวังอยู่ 2 ข้อ ได้แก่
- ต้องบันทึกพารามิเตอร์ในอินเทอร์เฟซผู้ใช้เพื่อให้ปรากฏในรายงาน การดำเนินการนี้เป็นกระบวนการที่เทียบได้กับการบันทึกมิติข้อมูลที่กำหนดเองใน Universal Analytics (มีข้อจำกัด) คุณไม่จําเป็นต้องบันทึกหากดูเฉพาะข้อมูลที่ส่งออก หรือใช้เฉพาะพารามิเตอร์เพื่อเปิดใช้งานกลุ่มเป้าหมาย
- ขอบเขตของพารามิเตอร์ที่กำหนดเองจะอยู่ในระดับเหตุการณ์เสมอเมื่อเทียบกับขอบเขต Hit ขอบเขตยังใช้กับมิติข้อมูลที่กำหนดเองซึ่งแปลเป็นพารามิเตอร์โดยอัตโนมัติ (สำหรับการติดตั้งใช้งาน "UA-XXXXXXXX" ของ gtag.js) โดยไม่ขึ้นอยู่กับการตั้งค่าขอบเขตมิติข้อมูลที่กำหนดเองเดิม
เมตริกที่กำหนดเองจะมีวิธีการแมปและข้อควรพิจารณาเช่นเดียวกันนี้ เพียงแต่จะนับตามขีดจำกัดพารามิเตอร์ที่เป็นตัวเลขแทนที่จะเป็นข้อความเมื่อบันทึกสำหรับการรายงาน
โดยหลักการแล้ว มิติข้อมูลและเมตริกที่กำหนดเองของขอบเขตที่แตกต่างกันในพร็อพเพอร์ตี้ Universal Analytics จะแมปกับพร็อพเพอร์ตี้ Google Analytics 4 ดังนี้
- มิติข้อมูลที่กำหนดเองในขอบเขตระดับ Hit: พารามิเตอร์ (พารามิเตอร์สูงสุดรวม 25 รายการที่บันทึกต่อเหตุการณ์ในระหว่างการรวบรวมข้อมูล มิติข้อมูลที่กำหนดเองสูงสุด 50 รายการ/เมตริกที่กำหนดเอง 50 รายการ)
โปรดทราบว่าเหตุการณ์และพารามิเตอร์ที่รวบรวมโดยอัตโนมัติอาจครอบคลุม Use Case บางส่วนที่ก่อนหน้านี้มีการใช้มิติข้อมูลที่กำหนดเองในขอบเขตระดับ Hit - มิติข้อมูลที่กําหนดเองในขอบเขตระดับผู้ใช้: พร็อพเพอร์ตี้ผู้ใช้ (บันทึกได้สูงสุด 25 รายการสําหรับการรายงานผ่าน UI) มิติข้อมูลผู้ใช้ที่รวบรวมโดยอัตโนมัติไม่นับรวมในขีดจํากัดนี้
- มิติข้อมูลที่กําหนดเองในขอบเขตระดับเซสชัน: ไม่มีค่าเทียบเท่าในพร็อพเพอร์ตี้ Google Analytics 4 ให้ดูที่พารามิเตอร์ที่กําหนดเองหรือพร็อพเพอร์ตี้ผู้ใช้แทน
แนวทางปฏิบัติแนะนำสำหรับพร็อพเพอร์ตี้ผู้ใช้
พร็อพเพอร์ตี้ผู้ใช้จะยึดตามผู้ใช้ในแพลตฟอร์มต่างๆ (เช่น ในสตรีมข้อมูลทุกประเภท) และควรใช้เฉพาะเมื่อควรนำข้อมูลมาใช้ในระดับผู้ใช้เท่านั้น ไม่ควรใช้พร็อพเพอร์ตี้ผู้ใช้กับข้อมูลระดับเซสชันหรือข้อมูลระดับอุปกรณ์ (เช่น ขนาดหน้าจอ)
ตัวอย่างพร็อพเพอร์ตี้ Google Analytics 4
gtag('set', 'user_properties', {
favorite_composer: 'Mahler',
favorite_instrument: 'double bass',
season_ticketholder: 'true'
});