Accelerated Mobile Pages (AMP) เป็นแพลตฟอร์มที่ใช้สร้างหน้าเว็บสำหรับเนื้อหาแบบคงที่ที่แสดงผลอย่างรวดเร็ว AMP มีองค์ประกอบ <amp-analytics>
ที่ช่วยให้วัดการโต้ตอบของผู้ใช้ได้ และรองรับ Google Analytics ในตัว
การตั้งค่าพื้นฐานเพื่อวัดการดูหน้าเว็บ
ในการสร้างการติดตั้ง Google Analytics ขั้นพื้นฐานในหน้า AMP ให้คัดลอกข้อมูลโค้ดนี้และแทนที่ <GA_MEASUREMENT_ID>
ด้วยรหัสแท็ก Google ค้นหารหัสแท็ก Google
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
การส่งข้อมูลไปหลายปลายทาง
คุณสามารถส่งข้อมูลไปยังปลายทางหลายแห่งด้วยแท็ก <amp-analytics>
เดียวกัน เพียงเพิ่มรหัสการวัดใหม่ <GA_MEASUREMENT_ID_NEW>
ในคำสั่ง config
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars" : {
"config" : {
"<GA_MEASUREMENT_ID>": { "groups": "default" },
"<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
}
}
}
</script>
</amp-analytics>
วิธีการทำงาน
องค์ประกอบ <amp-analytics>
เป็นคอมโพเนนต์ AMP แบบขยายและเปิดใช้เป็น custom-element
อย่างชัดเจนในแท็กสคริปต์
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
บล็อกองค์ประกอบ <amp-analytics>
ได้รับการกำหนดค่าให้รองรับผลิตภัณฑ์การวัดผลของ Google ตั้งค่าแอตทริบิวต์ type
ของ <amp-analytics>
เป็น "gtag" (เพื่อเปิดใช้การรองรับ gtag.js) และแอตทริบิวต์ data-credentials
เป็น "include" (เพื่อเปิดใช้คุกกี้)
<amp-analytics type="gtag" data-credentials="include">
...
</amp-analytics>
AMP ไม่อนุญาต JavaScript นอกเหนือจากไลบรารีที่ได้รับการอนุมัติของตนเอง ดังนั้นการกำหนดค่าจะดำเนินการด้วย JSON แทน ระบบจะเพิ่มพร็อพเพอร์ตี้ gtag_id
ที่มี <GA_MEASUREMENT_ID>
ที่ถูกต้องลงในบล็อก vars
และด้านล่างมีการเพิ่มพร็อพเพอร์ตี้ config ที่มี <GA_MEASUREMENT_ID>: {}
เป็นค่า
วัดเหตุการณ์
ใช้ triggers
กับค่าที่กำหนดไว้เพื่อวัดเหตุการณ์ในหน้า AMP พร็อพเพอร์ตี้เหล่านี้ใช้ในการกำหนดค่าทริกเกอร์
selector
: ตัวเลือก CSS สำหรับระบุองค์ประกอบเป้าหมายon
: ระบุประเภทของเหตุการณ์vars
: ระบุประเภทของเหตุการณ์ในevent_name
และเพิ่มพารามิเตอร์เพิ่มเติมตามความจำเป็น
ตัวอย่างนี้แสดงวิธีสร้างเหตุการณ์ Google Analytics พื้นฐาน สร้างทริกเกอร์ชื่อ "button" ที่จะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบที่มีค่ารหัสเป็น "the-button" ทริกเกอร์นี้จะส่งค่า event_name
เป็น "login" และค่า method
ของ "Google" ไปยัง Google Analytics ดังนี้
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#the-button", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
เหตุการณ์ Google Analytics คือหมวดหมู่เหตุการณ์สําหรับ Google Analytics โดยเฉพาะ ซึ่งมักจะใช้เพื่อสร้างรายงานเกี่ยวกับแคมเปญ ระบุค่าเหล่านี้ได้ในบล็อก vars ด้วยพารามิเตอร์ event_category
, event_label
และ value
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars": { "gtag_id": "<GA_MEASUREMENT_ID>", "config": { "<GA_MEASUREMENT_ID>": { "groups": "default" } } }, "triggers": { "button": { "selector": "#login", "on": "click", "vars": { "event_name": "login", "method": "Google" } } } } </script> </amp-analytics>
ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่าทริกเกอร์ได้ในเอกสารประกอบเกี่ยวกับ amp-analytics
แก้ไขพารามิเตอร์
หากต้องการลบล้างพารามิเตอร์เริ่มต้นของ Google Analytics หรือเพิ่มพารามิเตอร์ใหม่ ให้เพิ่มค่าที่ต้องการลงในส่วน parameter
ของการบล็อก config
ตัวอย่างนี้จะลบล้างค่าการดูหน้าเว็บและเหตุการณ์เริ่มต้นสำหรับ page_title
และ page_location
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "page_title": "Beethoven symphonies", "page_location": "https://www.example.com/beethoven.html" } } } } </script> </amp-analytics>
ลิงก์โดเมน
Linker โดเมนช่วยให้วัดเว็บไซต์ที่เกี่ยวข้องตั้งแต่ 2 เว็บไซต์ขึ้นไปในโดเมนแยกกันได้ ระบุโดเมนที่ควรลิงก์กับพร็อพเพอร์ตี้ "linker": { "domains": [...] }
ดังนี้
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": { "domains": ["example.com", "example2.com"] } } } } } </script> </amp-analytics>
ในหน้า AMP ที่มีการกำหนดค่า Google Analytics ไว้ ความสามารถในการลิงก์ไปยังโดเมนตามรูปแบบบัญญัติจากแคช AMP จะเปิดใช้โดยค่าเริ่มต้น หากต้องการปิดไม่ให้ Google Analytics ลิงก์การเข้าชมโดเมน ให้เพิ่ม "linker": "false"
ลงในพารามิเตอร์ config ดังนี้
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "linker": "false" } } } } </script> </amp-analytics>
ความเร็วเว็บไซต์สำหรับ Universal Analytics
Google Analytics ได้รับการกำหนดค่าให้รวบรวมข้อมูลความเร็วเว็บไซต์โดยอัตโนมัติสำหรับการเข้าชมเว็บไซต์เพียงเล็กน้อย คุณสามารถเปลี่ยนอัตราการสุ่มตัวอย่าง เพื่อรวบรวมข้อมูลมากขึ้นหรือน้อยลงได้ หากต้องการตั้งค่าอัตราการสุ่มตัวอย่างเป็น 100% ให้เพิ่มโค้ดที่ไฮไลต์ลงในการกำหนดค่าดังนี้
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 100 } } } } </script> </amp-analytics>
หากต้องการหยุดรวบรวมข้อมูลความเร็วเว็บไซต์ ให้ใช้โค้ดที่ไฮไลต์ไว้
<amp-analytics type="gtag" data-credentials="include"> <script type="application/json"> { "vars" : { "gtag_id": "<GA_MEASUREMENT_ID>", "config" : { "<GA_MEASUREMENT_ID>": { "groups": "default", "site_speed_sample_rate": 0 } } } } </script> </amp-analytics>
การเข้าชมแบบ AMP เทียบกับการเข้าชมที่ไม่ใช่ AMP
การเข้าชม AMP จะใช้รหัสไคลเอ็นต์ที่ต่างจากรหัสไคลเอ็นต์สำหรับการเข้าชมเว็บโดยค่าเริ่มต้น หน้า AMP จะโหลดเร็วกว่าและแสดงรูปแบบการเข้าชมที่แตกต่างจากหน้าเว็บมาตรฐาน ซึ่งมักหมายความว่าคุณจะได้รับเมตริกที่ต่างกันระหว่างการเข้าชม AMP และการเข้าชมที่ไม่ใช่ AMP
การใช้พร็อพเพอร์ตี้แยกต่างหากเพื่อวัดการเข้าชม AMP จะช่วยให้วิเคราะห์เมตริกได้ดีขึ้นและเห็นภาพการเข้าชมที่แม่นยำมากขึ้น หากคุณใช้พร็อพเพอร์ตี้เดียวเพื่อแยกการเข้าชมแบบ AMP และที่ไม่ใช่ AMP ให้ทำดังนี้
- ใช้มิติข้อมูลแหล่งข้อมูลหรือมิติข้อมูลที่กําหนดเอง (Universal Analytics)
- ใช้พารามิเตอร์เหตุการณ์ที่กําหนดเอง (Google Analytics 4)
แก้ปัญหาการกำหนดค่า
โปรแกรมตรวจสอบ AMP ใช้เพื่อระบุว่าหน้าเว็บไม่เป็นไปตามข้อกำหนด AMP HTML หรือไม่ เพิ่ม #development=1
ลงใน URL ของหน้าเว็บเพื่อเปิดโปรแกรมตรวจสอบ
ส่วนขยาย amp-analytics
มีคำเตือนและข้อความแสดงข้อผิดพลาดเพื่อช่วยแก้ไขข้อบกพร่องและแก้ปัญหาการกำหนดค่า เพิ่ม #log=1
ลงใน URL ของหน้าเว็บเพื่อดูข้อความแสดงข้อผิดพลาดที่บันทึกไว้ในคอนโซลของเว็บเบราว์เซอร์
ตัวอย่างที่สมบูรณ์
ตัวอย่างนี้แสดงหน้า AMP ที่สมบูรณ์ด้วยปุ่มเดียวในหน้า การกําหนดค่านี้จะส่งข้อมูลการดูหน้าเว็บมาตรฐานและเหตุการณ์ "button-click" ไปยัง Google Analytics
<!doctype html>
<html ⚡ lang="en">
<head>
<meta charset="utf-8">
<title>AMP gtag demo</title>
<meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
<link rel="canonical" href="self.html" />
<style amp-boilerplate>body{-webkit-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-moz-animation:-amp-start 8s steps(1,end) 0s 1 normal both;-ms-animation:-amp-start 8s steps(1,end) 0s 1 normal both;animation:-amp-start 8s steps(1,end) 0s 1 normal both}@-webkit-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-moz-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-ms-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@-o-keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}@keyframes -amp-start{from{visibility:hidden}to{visibility:visible}}</style><noscript><style amp-boilerplate>body{-webkit-animation:none;-moz-animation:none;-ms-animation:none;animation:none}</style></noscript>
<!-- Load AMP -->
<script async src="https://cdn.ampproject.org/v0.js"></script>
<!-- Load amp-analytics -->
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
</head>
<body>
<!-- Configure analytics to use gtag -->
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
"vars": {
"gtag_id": "<GA_MEASUREMENT_ID>",
"config": {
"<GA_MEASUREMENT_ID>": { "groups": "default" }
}
},
"triggers": {
"button": {
"selector": "#the-button",
"on": "click",
"vars": {
"event_name": "login",
"method": "Google"
}
}
}
}
</script>
</amp-analytics>
<h1>Make it so.</h1>
<div>
<button type="button" id="the-button">Engage!</button>
</div>
</body>
</html>
แหล่งข้อมูลที่เกี่ยวข้อง
- AMP: โครงการ AMP
- AMP: AMP คืออะไร
- AMP: amp-analytics
- gtag.js: ใช้ gtag.js กับ AMP
- ศูนย์ช่วยเหลือของ Universal Analytics: Accelerated Mobile Pages (AMP)
- ศูนย์ช่วยเหลือของ Google Analytics 4: Accelerated Mobile Pages (AMP)