การตั้งค่าแท็กสำหรับ 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 เดียวกัน

การติดตั้ง

หากต้องการกำหนดค่าแท็ก Google (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 โดเมนขึ้นไปเป็นโดเมนเดียวได้ หากต้องการระบุโดเมนที่ควรลิงก์ ให้ใช้ "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>

ความสามารถในการลิงก์โดเมน Canonical จากแคช 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 ขึ้นมา 1 หน้าและส่งเหตุการณ์ 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