คู่มือการตั้งค่า AMP และเครื่องจัดการแท็ก

โครงการ 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

หมายเหตุ: หากต้องการเข้าถึงข้อมูลโค้ดในภายหลัง ให้คลิกหมายเลขรหัสคอนเทนเนอร์ที่ด้านบนสุดของหน้าภาพรวมพื้นที่ทำงานหรือคลิกผู้ดูแลระบบ แล้วติดตั้ง Google Tag Manager

ข้อมูลโค้ดชุดแรกจะเพิ่มส่วนประกอบ AMP Analytics ในหน้า AMP รหัสนี้จะอยู่ที่ท้ายส่วน <head> ของหน้าเว็บและควรปรากฏบนหน้าเว็บเพียงครั้งเดียวเท่านั้น

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>

สำคัญ: เพิ่มโค้ดนี้ลงในหน้าเว็บของคุณหากยังไม่มีอยู่ และตรวจสอบว่าโค้ดปรากฏขึ้นเพียงครั้งเดียวเท่านั้นในแต่ละหน้า

ข้อมูลโค้ดที่สองจะกำหนดค่า 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 และนำไปใช้ในแท็กและทริกเกอร์การกำหนดค่าได้ ตัวอย่างเช่น หน้าเว็บที่ขายรองเท้าอาจมีตัวแปรที่อธิบายถึงคุณสมบัติของรองเท้าบางประเภท คุณใช้ค่าเหล่านี้เพื่อสร้างตัวแปรเครื่องจัดการแท็กได้ ดังนี้

<amp-analytics config="https://www.googletagmanager.com/amp.json?id=Tag Manager-XXXXXX;Tag Manager.url=SOURCE_URL" data-credentials="include">
  <script type = "application / json">
      {
          "vars": {
              "type": "shoes",
              "color": "red"
          }
      }
  </script>
</amp-analytics>

วิธีสร้างตัวแปรที่ผู้ใช้กำหนดเองในเครื่องจัดการแท็กที่จับตัวแปรสีจากโค้ดด้านบนมีดังต่อไปนี้

คลิกตัวแปร
ภายใต้ตัวแปรที่กำหนดโดยผู้ใช้ ให้คลิกใหม่
คลิกการกำหนดค่าตัวแปร แล้วเลือกตัวแปร AMP
ในช่องชื่อตัวแปร AMP ให้ป้อนชื่อขอบเขต (เช่น "color")
ตั้งชื่อตัวแปรให้สื่อความหมาย (เช่น "AMP Variable - color")
คลิกบันทึก

แท็ก AMP ที่มีการสนับสนุนเครื่องจัดการแท็ก

ข้อมูลนี้มีประโยชน์ไหม

เราจะปรับปรุงได้อย่างไร