การตั้งค่าแท็กสำหรับ AMP

โครงการ Accelerated Mobile Pages (AMP) เป็นเว็บแบบโอเพนซอร์ส ที่ช่วยปรับปรุงประสิทธิภาพเนื้อหาเว็บ AMP รองรับแท็ก Google และ Google Tag Manager ในตัว คู่มือนี้จะอธิบาย วิธีตั้งค่า Google Analytics สำหรับหน้า AMP

การติดตั้ง

แท็ก Google ช่วยให้คุณติดตั้ง Google Analytics, Google Ads ผลิตภัณฑ์ของ Google ในหน้า AMP Google Tag Manager ตั้งค่าคอนเทนเนอร์ AMP และ ทำให้คุณสามารถสร้างการกำหนดค่าขั้นสูง และติดตั้งใช้งานของบุคคลที่สาม จากอินเทอร์เฟซของ Tag Manager

เลือกค่ากำหนดแพลตฟอร์มจากปุ่มต่อไปนี้

แท็ก Google

การติดตั้งใช้งาน AMP ของ gtag.js ใช้เฟรมเวิร์ก amp-analytics เพื่อ ช่วยให้คุณใช้เครื่องมือวิเคราะห์ในเว็บไซต์ AMP ได้ อาจมีข้อมูล ที่ส่งจากหน้า AMP ไปยัง Google Ads, Google Analytics และผลิตภัณฑ์อื่นๆ ของ Google จากการติดตั้งใช้งาน gtag.js เดียวกัน

การติดตั้ง

หากต้องการกำหนดค่า gtag.js ในหน้า AMP ก่อนอื่นให้ตรวจสอบว่าคุณ รวมคอมโพเนนต์ amp-analytics ภายในแท็ก <head> ในหน้าเว็บ

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

จากนั้นเพิ่มแท็ก Google ลงในหน้า AMP เป็นคอมโพเนนต์ JSON ภายในแท็ก <body> ในหน้าเว็บ แทนที่ <TARGET_ID> ด้วย รหัสแท็กสำหรับผลิตภัณฑ์ (เช่น Google Ads, Google Analytics) ที่คุณต้องการ เพื่อส่งข้อมูล:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

หากต้องการกำหนดค่าผลิตภัณฑ์หลายรายการในแท็ก Google คุณไม่จำเป็นต้องติดตั้งแท็ก ทั้งหมดจากผลิตภัณฑ์นั้น คุณเพียงต้องเพิ่มรหัสปลายทางลงในคําสั่ง config แยกต่างหาก

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

สําหรับข้อมูลเพิ่มเติม โปรดดูเอกสารประกอบของ amp-analytics

ทริกเกอร์เหตุการณ์

หากต้องการส่งข้อมูลที่เฉพาะเจาะจงไปยังผลิตภัณฑ์ ให้กำหนดค่าทริกเกอร์ตามเหตุการณ์ เช่น การคลิก ทริกเกอร์สำหรับ gtag.js ใน AMP มีรูปแบบ JSON เดียวกันกับ การกำหนดค่าทริกเกอร์ amp-analytics อื่นๆ

ตัวอย่างนี้แสดงวิธีส่งเหตุการณ์ click ไปยัง Google Analytics ค่า selector คือตัวเลือก CSS ที่ช่วยให้คุณระบุได้ว่าองค์ประกอบใด กำหนดเป้าหมาย ค่า on จะระบุประเภทของเหตุการณ์ ซึ่งในกรณีนี้คือ click เหตุการณ์ ในส่วน vars ให้ระบุประเภทเหตุการณ์ใน event_name และเพิ่มพารามิเตอร์เพิ่มเติมตามที่จำเป็น

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

นอกเหนือจากเหตุการณ์ที่แนะนําแล้ว คุณจะระบุเหตุการณ์ที่กําหนดเองของตัวเองได้

Linker โดเมนเปิดใช้เว็บไซต์ที่เกี่ยวข้องกัน 2 เว็บไซต์ขึ้นไปในโดเมนที่แยกกัน วัดเป็น 1 หากต้องการระบุโดเมนที่ควรลิงก์ ให้ใช้ "linker": { "domains": [...] }:

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": { "domains": ["example.com", "example2.com", "foo.example.com"] }
      }
    }
  }
}
</script>
</amp-analytics>

ความสามารถในการลิงก์ไปยังโดเมนตามรูปแบบบัญญัติจากแคช AMP เปิดใช้อยู่ โดยค่าเริ่มต้น หากต้องการปิดความสามารถในการลิงก์การเข้าชมโดเมน ให้เพิ่ม "linker": "false" ลงในพารามิเตอร์ config ดังนี้

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

ตัวอย่างที่สมบูรณ์

ตัวอย่างโค้ดนี้แสดงการสาธิตการใช้งานหน้า AMP ที่สมบูรณ์ สร้างหน้า AMP หน้าเดียวและส่งเหตุการณ์ button-click ไปยัง Google Analytics เมื่อมีการคลิกปุ่ม แทนที่ <TAG_ID> ด้วย รหัสแท็ก:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

การแก้ปัญหา

ใช้ amptagtest.appspot.com เพื่อตรวจสอบการตั้งค่าการติดแท็ก หรือคุณจะดำเนินการด้วยตนเองก็ได้ ตรวจสอบว่าค่า cid สอดคล้องกันในโดเมนต่างๆ โดยทำ ดังต่อไปนี้:

  • โปรดล้างคุกกี้หรือใช้โหมดไม่ระบุตัวตน
  • หากไม่พบ cid ในคุกกี้ Google Analytics คุกกี้นี้ยังสามารถ ที่สังเกตในแท็บเครือข่ายของเว็บเบราว์เซอร์ ค้นหา collect request, และเพย์โหลดควรมีค่า cid

  • เมื่อคุณผ่านจาก Google CDN ไปยังเว็บไซต์ของลูกค้าแล้ว cid และค่า gclid ควรส่งผ่านการตกแต่ง URL:

    **_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**

  • หน้า Landing Page สุดท้ายควรมีค่า cid เหมือนกับ หน้า Landing Page เริ่มต้น

  • โปรดระวังการเปลี่ยนเส้นทางและการเปลี่ยนโดเมนระหว่างหน้า Canonical และหน้า Landing Page ที่ไม่ใช่ AMP