การตั้งค่าแท็กสำหรับ 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 ภายในการกําหนดค่าทริกเกอร์ ใน <amp-analytics> JSON ได้ ระบบจะส่งพารามิเตอร์ที่กําหนดเองใน 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

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

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

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

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