โครงการ Accelerated Mobile Pages (AMP) เป็นแพลตฟอร์มเว็บแบบโอเพนซอร์สซึ่งช่วยปรับปรุงประสิทธิภาพเนื้อหาเว็บ AMP มีการสนับสนุน Google Tag Manager ในตัว เอกสารนี้อธิบายถึงวิธีที่แนะนำในการตั้งค่า Google Tag Manager ในหน้า AMP
วิธีติดตั้งเครื่องจัดการแท็กสำหรับ AMP
- สร้างคอนเทนเนอร์ AMP ในเครื่องจัดการแท็ก
- เพิ่มข้อมูลโค้ดเครื่องจัดการแท็กลงในหน้า AMP
- กำหนดค่าแท็กในคอนเทนเนอร์เครื่องจัดการแท็กและนำไปใช้
สร้างคอนเทนเนอร์ AMP
เครื่องจัดการแท็กมีคอนเทนเนอร์ AMP สร้างคอนเทนเนอร์ AMP ใหม่สำหรับโครงการของคุณด้วยวิธีต่อไปนี้
- ในหน้าจอบัญชี คลิกการกระทำเพิ่มเติม (
) สำหรับบัญชีที่คุณต้องการใช้ เลือกสร้างคอนเทนเนอร์
- ตั้งชื่อคอนเทนเนอร์ ใช้ชื่อที่สื่อความหมาย เช่น "example.com - news - AMP"
- ภายใต้ใช้คอนเทนเนอร์ที่ใด ให้เลือก AMP
- คลิกสร้าง
) สำหรับบัญชีที่คุณต้องการใช้ เลือกสร้างคอนเทนเนอร์แล้วตอนนี้ คอนเทนเนอร์ก็พร้อมแล้ว ขั้นตอนต่อไปคือการติดตั้งโค้ดเครื่องจัดการแท็กในหน้า AMP
เครื่องจัดการแท็กจะให้ข้อมูลเกี่ยวกับวิธีติดตั้งข้อมูลโค้ดที่ดีที่สุด และคุณดูคำแนะนำเพิ่มเติมได้ในส่วนถัดไป
เพิ่มข้อมูลโค้ดของเครื่องจัดการแท็ก
หลังจากที่คุณสร้างคอนเทนเนอร์ AMP ใหม่ หน้าจอติดตั้ง Google Tag Manager จะปรากฏขึ้น เครื่องจัดการแท็กให้ข้อมูลโค้ดสองชุด คัดลอกข้อมูลโค้ดเหล่านี้เพื่อให้ปรากฏในหน้า AMP
ข้อมูลโค้ดชุดแรกจะเพิ่มส่วนประกอบ AMP Analytics ในหน้า AMP รหัสนี้จะอยู่ที่ท้ายส่วน <head> ของหน้าเว็บและควรปรากฏบนหน้าเว็บเพียงครั้งเดียวเท่านั้น
ข้อมูลโค้ดที่สองจะกำหนดค่า AMP Analytics เพื่อใช้ตัวจัดการแท็ก ใส่รหัสนี้ทันทีหลังจากเปิดองค์ประกอบ <body> แทนที่ GTM-CONTAINER_ID ด้วยรหัสคอนเทนเนอร์ของเครื่องจัดการแท็ก หรือคัดลอกและวางข้อมูลโค้ดทั้งหมดจากอินเทอร์เฟซผู้ใช้ของเครื่องจัดการแท็ก
<! - Google Tag Manager ->
<amp-analytics config="https://www.googletagmanager.com/amp.json?id=GTM-CONTAINER_ID" data-credentials="include"></amp-analytics>
กำหนดค่าคอนเทนเนอร์และนำไปใช้
เมื่อหน้าเว็บของคุณติดตั้งข้อมูลโค้ดคอนเทนเนอร์ถูกต้องแล้ว หน้าเว็บจะเริ่มการทำงานของแท็กที่มาจากเครื่องจัดการแท็ก ขั้นตอนต่อไปคือการสร้างการกำหนดค่าแท็กและนำคอนเทนเนอร์ไปใช้
วิธีสร้างแท็กใหม่
- คลิก แท็ก
ใหม่
- คลิกการกำหนดค่าแท็ก แล้วเลือกประเภทแท็กจากรายการแท็ก AMP ที่สนับสนุน
- กำหนดค่าแท็กด้วยข้อมูลที่ผู้ให้บริการแท็กให้ไว้
- คลิกทริกเกอร์ แล้วเพิ่มเงื่อนไขเหตุการณ์ได้ตั้งแต่หนึ่งรายการซึ่งจะทำให้แท็กเริ่มทำงาน
- ตั้งชื่อทริกเกอร์แล้วคลิกบันทึก
ใหม่ทำขั้นตอนเหล่านี้ซ้ำสำหรับการกำหนดค่าแท็กเพิ่มเติม เมื่อการกำหนดค่าคอนเทนเนอร์ของคุณพร้อมแล้ว ให้นำคอนเทนเนอร์ไปใช้เพื่อให้การเปลี่ยนแปลงมีผล
ตัวแปรของหน้าเว็บ
เครื่องจัดการแท็กจับตัวแปร AMP และนำไปใช้ในแท็กและทริกเกอร์การกำหนดค่าได้ ตัวอย่างเช่น หน้าเว็บที่ขายรองเท้าอาจมีตัวแปรที่อธิบายถึงคุณสมบัติของรองเท้าบางประเภท คุณใช้ค่าเหล่านี้เพื่อสร้างตัวแปรเครื่องจัดการแท็กได้ ดังนี้
<script type = "application / json">
{
"vars": {
"type": "shoes",
"color": "red"
}
}
</script>
</amp-analytics>
วิธีสร้างตัวแปรที่ผู้ใช้กำหนดเองในเครื่องจัดการแท็กที่จับตัวแปรสีจากโค้ดด้านบนมีดังต่อไปนี้
- คลิกตัวแปร
- ภายใต้ตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
- คลิกการกำหนดค่าตัวแปร แล้วเลือกตัวแปร AMP
- ในช่องชื่อตัวแปร AMP ให้ป้อนชื่อขอบเขต (เช่น "color")
- ตั้งชื่อตัวแปรให้สื่อความหมาย (เช่น "AMP Variable - color")
- คลิกบันทึก