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

การติดตั้งใช้งาน gtag.js ของ AMP ใช้เฟรมเวิร์ก 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"
    }
  }
}

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

ส่งมิติข้อมูลและพารามิเตอร์ที่กำหนดเองด้วย Google Analytics

หากต้องการส่งมิติข้อมูลและเมตริกที่กำหนดเองไปยัง Google Analytics จากหน้า AMP โดยใช้ gtag.js คุณสามารถใช้ประโยชน์จากพร็อพเพอร์ตี้ extraUrlParams ในการกำหนดค่าทริกเกอร์ ภายใน JSON <amp-analytics> ระบบจะส่งพารามิเตอร์ที่กำหนดเองใน Google Analytics เป็นพารามิเตอร์เหตุการณ์

  • ใช้คำนำหน้า ep. สำหรับพารามิเตอร์เหตุการณ์ที่มีค่าเป็นสตริง
  • ใช้คำนำหน้า epn. สำหรับพารามิเตอร์เหตุการณ์ที่มีค่าเป็นตัวเลข

ก่อนส่ง ให้ตรวจสอบว่าได้ลงทะเบียนมิติข้อมูลและเมตริกที่กำหนดเองเหล่านี้ภายในพร็อพเพอร์ตี้ Google Analytics แล้ว

ตัวอย่าง: พารามิเตอร์ที่กำหนดเองกับการดูหน้าเว็บ

การกำหนดค่านี้จะส่งมิติข้อมูลที่กำหนดเอง my_custom_dimension และเมตริกที่กำหนดเอง my_page_score พร้อมกับการดูหน้าเว็บครั้งแรก

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

ตัวอย่าง: พารามิเตอร์ที่กำหนดเองพร้อมกิจกรรมการคลิก

การกำหนดค่านี้จะส่งพารามิเตอร์ที่กำหนดเองเมื่อมีการคลิกองค์ประกอบที่มีรหัส myButton

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

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 หน้าเดียวและส่งเหตุการณ์ 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>

การแก้ปัญหา

ใช้ validator.amp.dev เพื่อตรวจสอบการตั้งค่าการติดแท็ก หรือตรวจสอบด้วยตนเอง ว่าค่า 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