หน้า AMP จะแสดงจากโดเมนแคช AMP ซึ่งต่างจากโดเมนเว็บไซต์ คุณสามารถใช้ AMP Linker ซึ่งเป็นฟีเจอร์การวิเคราะห์ AMP ที่รวมเซสชันของผู้ใช้ได้ โดยใช้รหัสไคลเอ็นต์ AMP เป็นตัวระบุผู้ใช้ เพื่อติดตามเส้นทางของผู้ใช้ในแคช AMP และหน้าเว็บไซต์
AMP Linker เติมรหัสไคลเอ็นต์ AMP ลงในลิงก์ขาออกจากหน้าแคช AMP ติดแท็กหน้าเว็บด้วย Google Analytics จากนั้นดึงรหัสลูกค้า AMP จากพารามิเตอร์การค้นหา URL แล้วรวมเซสชันผู้ใช้โดยใช้รหัสไคลเอ็นต์ AMP เป็นตัวระบุผู้ใช้
บทความนี้จะอธิบายขั้นตอนที่จำเป็นในการตั้งค่า AMP Linker ด้วย Google Analytics
รหัสไคลเอ็นต์ AMP ส่งผลต่อข้อมูลของคุณอย่างไร
การซิงค์รหัสไคลเอ็นต์ AMP ระหว่างแคช AMP กับโดเมนเว็บไซต์เดิมจะส่งผลให้เมตริกผู้ใช้แม่นยำยิ่งขึ้น เช่น ระยะเวลาเซสชัน อัตราตีกลับ และจำนวนหน้าเว็บต่อเซสชัน โปรดทราบว่าถ้าต้องการใช้ API รหัสไคลเอ็นต์ให้เป็นประโยชน์ คุณควรรวบรวมข้อมูลภายในพร็อพเพอร์ตี้ Google Analytics เดียวกัน
ตั้งค่า AMP Linker
คุณจะตั้งค่า AMP Linker ด้วย Google Analytics ได้ภายใน 3 ขั้นตอนดังนี้
ขั้นตอนที่ 1 ติดแท็กหน้าเว็บ AMP เพื่อส่งพารามิเตอร์ AMP Linker
ติดตั้งแท็ก Google Analytics ผ่านแท็ก Google (gtag.js) หรือผ่าน Google Tag Manager ก็ได้ ทำตามคำแนะนำด้านล่างตามวิธีการติดตั้งที่เลือก
ตัวเลือกที่ 1 แท็ก Google
เพิ่มแท็ก Google สําหรับ AMP เริ่มต้นในหน้า Landing Page แบบ AMP ดูตัวอย่างข้อมูลโค้ดด้านล่างและทำการเปลี่ยนแปลงต่อไปนี้
ใส่รหัสติดตามของพร็อพเพอร์ตี้ Google Analytics ที่ต้องการส่งข้อมูลแทน MEASUREMENT_ID
หรือถ้าหน้า AMP โฮสต์อยู่ในโดเมนระดับบนสุดที่แตกต่างจากลิงก์ขาออกไปยังเว็บไซต์ของคุณ หรือหากหน้า AMP ไม่ได้อยู่ในโดเมนย่อยซึ่งเป็นที่รู้จักกันดี (เช่น ไม่ใช่ใน www., amp., m.) ให้ใส่การกําหนดค่า Linker ดังที่แสดงด้านล่าง เพิ่มโดเมนที่โฮสต์หน้า AMP และโดเมนสำหรับลิงก์ขาออก
<script type="application/json">
{
"vars": {
"gtag_id": "MEASUREMENT_ID",
"linker": {
"domains": ["example.com", "example2.com"]
}
,
"config": {
"MEASUREMENT_ID": {
"groups": "default"
}
}
}
}
</script>
</amp-analytics>
gtag_id
คุณจะระบุ ID จากผลิตภัณฑ์ Google ใดๆ (เช่น Google Ads หรือ Search Ads 360) ที่ใช้ใน AMP ได้ แต่จะใช้ ID จากผลิตภัณฑ์ Google ได้แค่ 1 รายการในช่อง gtag_id
ตัวเลือกที่ 2: Google Tag Manager
สร้างคอนเทนเนอร์ AMP ใน Google Tag Manager
เพิ่มแท็ก Google Analytics ให้กับคอนเทนเนอร์ AMP
เพิ่มแท็ก Conversion Linker ในคอนเทนเนอร์ AMP แล้วเลือก "เปิดใช้การลิงก์ข้ามโดเมน" และ "เปิดใช้การลิงก์กับรหัสไคลเอ็นต์ของ Google Analytics" หากหน้า Landing Page แบบ AMP โฮสต์อยู่ในโดเมนระดับบนสุดเดียวกันกับลิงก์ขาออกไปยังเว็บไซต์ คุณสามารถเว้นช่องโดเมนว่างไว้ได้
หรือถ้าหน้า AMP โฮสต์อยู่ในโดเมนระดับบนสุดที่แตกต่างจากลิงก์ขาออกไปยังเว็บไซต์ของคุณ หรือหากหน้า AMP ไม่ได้อยู่ในโดเมนย่อยซึ่งเป็นที่รู้จัก (เช่น ไม่ใช่ใน www., amp., m.) ให้เพิ่มโดเมนระดับบนสุดที่โฮสต์หน้า AMP ของคุณและโดเมนสําหรับลิงก์ขาออกเป็นรายการที่คั่นด้วยคอมมา
ใช้ข้อมูลโค้ด Tag Manager เริ่มต้นในหน้า AMP โดยดูตัวอย่างด้านล่างและใส่รหัสคอนเทนเนอร์ Tag Manager แทน GTM_CONTAINER_ID
<!-- Google Tag Manager →
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=< GTM_CONTAINER_ID>>m.url=SOURCE_URL" data-credentials="include">
</amp-analytics>
ขั้นตอนที่ 2 ติดแท็กหน้าเว็บที่ไม่ใช่ AMP เพื่ออ่านพารามิเตอร์ AMP Linker
การติดแท็กหน้าเว็บที่ไม่ใช่ AMP เพื่ออ่านพารามิเตอร์ AMP Linker มีหลายวิธี ดังนั้นให้เลือกใช้วิธีการที่เหมาะสมกับการกำหนดค่าของคุณมากที่สุด
ตัวเลือกที่ 1 แท็ก Google
ใส่ข้อมูลโค้ดที่ติดทั่วเว็บไซต์ gtag.js ในหน้าเว็บที่ไม่ใช่ AMP ดูตัวอย่างข้อมูลโค้ดด้านล่าง
- ใส่รหัสติดตามของพร็อพเพอร์ตี้ Google Analytics ที่ต้องการส่งข้อมูลแทน
MEASUREMENT_ID
- หรือถ้าหน้า AMP โฮสต์อยู่ในโดเมนระดับบนสุดที่แตกต่างกันจากลิงก์ขาออกไปยังเว็บไซต์ของคุณ หรือหากหน้า AMP ไม่ได้อยู่ในโดเมนย่อยที่รู้จัก (เช่น ไม่ใช่ใน www., amp., m.) ให้ใส่การกําหนดค่า Linker ดังที่แสดงด้านล่าง ใส่โดเมนที่โฮสต์หน้า AMP และโดเมนสำหรับลิงก์ขาออก
<script async src="https://www.googletagmanager.com/gtag/js?id=MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];
function gtag(){dataLayer.push(arguments);}
gtag('set', 'linker', {
'domains': ['example.com', 'example2.com']
});
gtag('js', new Date());
gtag('config', 'MEASUREMENT_ID');
</script>
ตัวเลือกที่ 2: Google Tag Manager
สำหรับคอนเทนเนอร์เว็บ GTM โปรดตรวจสอบว่าได้เพิ่มแท็ก Google Analytics แล้ว
หากหน้า AMP โฮสต์อยู่ในโดเมนระดับบนสุดที่แตกต่างกันจากลิงก์ขาออกไปยังเว็บไซต์ของคุณ หรือหากหน้า AMP ไม่ได้อยู่ในโดเมนย่อยซึ่งเป็นที่รู้จัก (เช่น ไม่ใช่ใน www., amp., m.) ให้เพิ่มการกําหนดค่าโดยเพิ่มช่อง "allowLinker" ในแท็ก Google Analytics แล้วค่า true ลงไป ตามใช้ขั้นตอนด้านล่าง
- เปิดตัวแปรการตั้งค่า Google Analytics ที่ต้องการแก้ไข แล้วคลิกการ์ดการกำหนดค่าตัวแปร
- ไปที่การตั้งค่าเพิ่มเติม > ช่องที่จะตั้งค่า
- คลิก + เพิ่มช่อง
- ตั้งชื่อช่องเป็น allowLinker และตั้งค่าเป็น true
- บันทึกการกำหนดค่าตัวแปรใหม่
- ทำขั้นตอนก่อนหน้าซ้ำอีกครั้งสำหรับตัวแปรการตั้งค่า Google Analytics ที่เกี่ยวข้องทั้งหมด (ถ้าคุณใช้ตัวแปรมากกว่า 1 รายการในคอนเทนเนอร์)
- นำคอนเทนเนอร์ไปใช้จริง
ใช้โค้ด Tag Manager เริ่มต้นในหน้าเว็บที่ไม่ใช่ AMP
ตัวเลือกที่ 3: analytics.js
สำหรับหน้าเว็บที่ไม่ใช่ AMP คุณจะใช้ข้อมูลโค้ด Analytics js เริ่มต้นเพื่ออ่านพารามิเตอร์ AMP Linker ได้
<!-- Google Analytics -->
<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', 'GA_TRACKING_ID', 'auto');
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
หรือถ้าหน้า AMP โฮสต์อยู่ในโดเมนระดับบนสุดที่แตกต่างจากลิงก์ขาออกไปยังเว็บไซต์ของคุณ หรือหากหน้า AMP ไม่ได้อยู่ในโดเมนย่อยที่รู้จักกันดี (เช่น ไม่ใช่ใน www., amp., m.) ให้เพิ่มการกําหนดค่าที่ไฮไลต์ด้านล่างตามที่อธิบายไว้ในการกําหนดค่าข้ามโดเมนสําหรับ analytics.js
<!-- Google Analytics -->
<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', 'GA_TRACKING_ID', 'auto', {'allowLinker': true});
ga('require', 'linker');
ga('linker:autoLink', ['subdomain1.example.com', 'subdomain2.example.com','www.example2.com'] );
ga('send', 'pageview');
</script>
<!-- End Google Analytics -->
ขั้นตอนที่ 3 เพิ่มการยกเว้นการอ้างอิงให้กับคอนโซลผู้ดูแลระบบ Google Analytics
Google จะใช้แคช Google AMP เมื่อแสดงเนื้อหา AMP ต่อผู้ใช้ คุณต้องเพิ่มการยกเว้นการอ้างอิงสำหรับโดเมน cdn.ampproject.org
เพื่อป้องกันไม่ให้โดเมนย่อย AMP ที่แคชไว้แบ่งเซสชัน
subdomain.example.com
ให้เพิ่มการยกเว้นการอ้างอิงสำหรับ subdomain-example-com.cdn.ampproject.org
ดูรายละเอียดรูปแบบ URL แคชของ AMP ได้เพิ่มเติมการยืนยันการตั้งค่า
ยืนยันว่ารหัสไคลเอ็นต์ AMP ของ Google ตรงกันระหว่างหน้าเว็บ AMP และหน้าเว็บที่ไม่ใช่ AMP
ตัวเลือกที่ 1 ยืนยันผ่านเครื่องมือทดสอบแท็ก AMP
ใช้เครื่องมือทดสอบแท็ก AMP แล้วกรอก URL ของ AMP เพื่อทดสอบ
หมายเหตุ: เครื่องมือทดสอบแท็ก AMP เป็นเครื่องมือทดสอบอัตโนมัติที่จะจําลองขั้นตอนจากหน้า AMP ที่แสดงผ่านโปรแกรมเปิดไปยังหน้าถัดไป เครื่องมือนี้ควรใช้เป็นแนวทางและอาจไม่ได้ทำสถานการณ์การทดสอบทั้งหมด (เช่น หากหน้า AMP มีลิงก์ไปยังโดเมนหรือโดเมนย่อยอื่น) โปรดใช้ตัวเลือกด้านล่างเป็นตัวเลือกการทดสอบด้วยตนเอง
ตัวเลือกที่ 2 ยืนยันผ่านส่วนขยายของ Chrome ที่ชื่อผู้ช่วยแท็กของ Google
- ดาวน์โหลดและติดตั้ง Google ผู้ช่วยแท็กซึ่งเป็นส่วนขยายของ Chrome
- ป้อนคำค้นหาใน google.com ที่จะแสดงผลหน้า AMP ของเว็บไซต์คุณ
- เริ่มบันทึกผู้ช่วยแท็ก
- รีเฟรชผลการค้นหาในเบราว์เซอร์หลังจากเริ่มบันทึกแล้ว
- คลิกผลการค้นหาที่นำทางไปสู่หน้าเว็บ AMP
- คลิกลิงก์ในหน้าเว็บ AMP ที่นำไปยังหน้าเว็บที่ไม่ใช่ AMP
- หยุด "บันทึกผู้ช่วยแท็ก"
- ตรวจสอบว่ามีเซสชันเดียวที่มีรหัสที่สอดคล้องกันดังที่แสดงด้านล่าง (การโหลดหน้าเว็บ 2 ไม่แสดงการเริ่มต้นเซสชัน)
ตัวเลือกที่ 3 ยืนยันผ่านเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
- เปิดเบราว์เซอร์ Google Chrome ในโหมดไม่ระบุตัวตน เปิดใช้โปรแกรมจำลองอุปกรณ์เคลื่อนที่ในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome
- ป้อนคำค้นหาใน google.com ที่จะแสดงผลหน้า AMP ของเว็บไซต์และคลิกผลการค้นหาหน้าเว็บ AMP ซึ่งควรแสดงผ่านแคช AMP ของ Google และแสดงภายในโปรแกรมเปิด AMP ของ Google Search
- หมายเหตุ: หากหน้าเว็บไม่แสดงในผลการค้นหาของ Google คุณยังทดสอบการรวมเซสชันได้โดยใช้เครื่องมือทดสอบ AMP เพื่อดูตัวอย่างผลการค้นหาและทำตามขั้นตอนที่ระบุไว้ด้านล่าง ตราบใดที่ Google จัดทำดัชนีหน้าเว็บนั้นได้
- ค้นหาคำขอเครือข่าย Google Analytics เพื่อดูการดูหน้าเว็บ AMP โดยไปที่แท็บเครือข่ายในเครื่องมือสำหรับนักพัฒนาซอฟต์แวร์ Chrome และกรอกคำว่า "collect" ในช่องตัวกรอง
- ค้นหาและเลือกคําขอเครือข่ายซึ่งไปที่
www.google-analytics.com
ค้นหารหัสไคลเอ็นต์ในแท็บส่วนหัวของคําขอโดยเลื่อนหน้าจอลงไปที่พารามิเตอร์สตริงคําค้นหา จดพารามิเตอร์ cid ไว้ - เมื่อโปรแกรมเปิด AMP แสดงหน้าเว็บ AMP รูปแบบ
cid
ควรเป็นสตริง base64 ความยาว 64 อักขระดังนี้ - คลิกล้างเพื่อล้างคำขอเครือข่าย
- หากต้องการยืนยันว่าได้เลือกใช้หน้าเว็บที่ไม่ใช่ AMP แล้ว ให้ยืนยันว่าพารามิเตอร์ cid เดียวกันยังคงอยู่เมื่อไปที่หน้าเว็บที่ไม่ใช่ AMP โดยคลิกลิงก์ใดก็ได้ในหน้าเว็บ AMP ซึ่งไปที่หน้าเว็บที่ไม่ใช่ AMP ที่แสดงจากโดเมน กรองหาสตริง "collect" อีกครั้งเพื่อดูรหัสไคลเอ็นต์ เลือกคําขอเครือข่ายใดก็ได้ที่ไปที่
www.google-analytics.com
ตรวจสอบว่าค่าของพารามิเตอร์การค้นหา cid ตรงกับค่าที่คุณจดไว้ในขั้นตอนที่ 5
ข้อจำกัด
- การรวมเซสชันผ่าน AMP Linker จะไม่เกิดขึ้นถ้าผู้ใช้ครั้งแรกปิดหน้า AMP โดยไม่ไปที่หน้าถัดไป เนื่องจากการรวมเซสชันนั้นดำเนินการโดยใช้การเติมแต่งลิงก์