เพิ่ม Analytics ไปยังหน้า AMP

Accelerated Mobile Pages (AMP) เป็นแพลตฟอร์มที่ใช้สร้างหน้าเว็บสำหรับเนื้อหาคงที่ที่แสดงผลอย่างรวดเร็ว AMP มีองค์ประกอบ <amp-analytics> ที่ช่วยให้วัดการโต้ตอบของผู้ใช้ได้ และรองรับ Google Analytics ในตัว

การตั้งค่าพื้นฐานเพื่อวัดการดูหน้าเว็บ

ในการสร้างการติดตั้ง Google Analytics ขั้นพื้นฐานในหน้า AMP ให้คัดลอกข้อมูลโค้ดนี้แล้วใส่รหัสแท็ก Google แทน <GA_MEASUREMENT_ID> ค้นหารหัสแท็ก Google

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

การส่งข้อมูลไปหลายปลายทาง

คุณสามารถส่งข้อมูลไปยังปลายทางหลายแห่งได้ด้วยแท็ก <amp-analytics> เดียวกัน เพียงเพิ่มรหัสการวัดใหม่ <GA_MEASUREMENT_ID_NEW> ในคำสั่ง config

<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "config" : {
      "<GA_MEASUREMENT_ID>": { "groups": "default" },
      "<GA_MEASUREMENT_ID_NEW>": { "groups": "default" }
    }
  }
}
</script>
</amp-analytics>

วิธีการทำงาน

องค์ประกอบ <amp-analytics> เป็นคอมโพเนนต์ AMP แบบขยายและเปิดใช้อย่างชัดแจ้งเป็น custom-element ในแท็กสคริปต์

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

การบล็อกองค์ประกอบ <amp-analytics> ได้รับการกำหนดค่าให้เปิดใช้การรองรับผลิตภัณฑ์การวัดผลของ Google ตั้งค่าแอตทริบิวต์ type สำหรับ <amp-analytics> เป็น "gtag" (เพื่อเปิดใช้การรองรับ gtag.js) และแอตทริบิวต์ data-credentials เป็น "include" (เพื่อเปิดใช้คุกกี้)

<amp-analytics type="gtag" data-credentials="include">
  ...
</amp-analytics>

AMP ไม่อนุญาต JavaScript นอกเหนือจากไลบรารีที่ได้รับการอนุมัติของตนเองแล้ว ดังนั้นการกำหนดค่าจะกระทำด้วย JSON แทน ระบบจะเพิ่มพร็อพเพอร์ตี้ gtag_id ซึ่งมี <GA_MEASUREMENT_ID> ที่ถูกต้องลงในบล็อก vars และด้านล่างมีการเพิ่มพร็อพเพอร์ตี้ config ที่มี <GA_MEASUREMENT_ID>: {} เป็นค่า

วัดเหตุการณ์

ใช้ triggers กับค่าที่กําหนดไว้เพื่อวัดเหตุการณ์ในหน้า AMP พร็อพเพอร์ตี้เหล่านี้ใช้ในการกำหนดค่าทริกเกอร์

  • selector: ตัวเลือก CSS สำหรับระบุองค์ประกอบเป้าหมาย
  • on: ระบุประเภทของเหตุการณ์
  • vars: ระบุประเภทของเหตุการณ์ใน event_name และเพิ่มพารามิเตอร์อีกตามที่จำเป็น

ตัวอย่างนี้แสดงวิธีตั้งค่าเหตุการณ์ Google Analytics พื้นฐาน สร้างทริกเกอร์ชื่อ "button" ซึ่งจะเริ่มทำงานเมื่อมีการคลิกองค์ประกอบที่มีค่ารหัสเป็น "the-button" ทริกเกอร์นี้จะส่งค่า event_name เป็น "login" และค่า method ของ "Google" ไปยัง Google Analytics ดังนี้

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
         "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#the-button",
          "on": "click",
          "vars": {
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

เหตุการณ์ Google Analytics คือหมวดหมู่ของเหตุการณ์เฉพาะสำหรับ Google Analytics ซึ่งมักใช้ในการสร้างรายงานเกี่ยวกับแคมเปญ ค่าเหล่านี้สามารถระบุในบล็อก vars ได้ด้วยพารามิเตอร์ event_category, event_label และ value

<amp-analytics type="gtag" data-credentials="include">
  <script type="application/json">
    {
      "vars": {
        "gtag_id": "<GA_MEASUREMENT_ID>",
        "config": {
          "<GA_MEASUREMENT_ID>": { "groups": "default" }
        }
      },
      "triggers": {
        "button": {
          "selector": "#login",
          "on": "click",
          "vars": { 
            "event_name": "login",
            "method": "Google"
          }
        }
      }
    }
  </script>
</amp-analytics>

ดูข้อมูลเพิ่มเติมเกี่ยวกับการกำหนดค่าทริกเกอร์ได้ในเอกสารประกอบเกี่ยวกับ amp-analytics

แก้ไขพารามิเตอร์

หากต้องการลบล้างพารามิเตอร์เริ่มต้นของ Google Analytics หรือเพิ่มพารามิเตอร์ใหม่ ให้เพิ่มค่าที่ต้องการลงในส่วน parameter ของบล็อก config ตัวอย่างนี้จะลบล้างค่าการดูหน้าเว็บและเหตุการณ์เริ่มต้นสำหรับ page_title และ page_location

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<GA_MEASUREMENT_ID>",
    "config" : {
      "<GA_MEASUREMENT_ID>": {
        "groups": "default",
        "page_title": "Beethoven symphonies",
        "page_location": "https://www.example.com/beethoven.html"
      }
    }
  }
}
</script>
</amp-analytics>

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

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

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

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

ความเร็วเว็บไซต์สำหรับ Universal Analytics

Google Analytics ได้รับการกำหนดค่าให้รวบรวมข้อมูลความเร็วเว็บไซต์โดยอัตโนมัติสำหรับการเข้าชมเว็บไซต์เพียงเล็กน้อย คุณสามารถเปลี่ยนอัตราการสุ่มตัวอย่าง เพื่อรวบรวมข้อมูลให้มากขึ้นหรือน้อยลง หากต้องการตั้งค่าอัตราการสุ่มตัวอย่างเป็น 100% ให้เพิ่มโค้ดที่ไฮไลต์ลงในการกำหนดค่าดังนี้

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

หากต้องการหยุดรวบรวมข้อมูลความเร็วเว็บไซต์ ให้ใช้โค้ดที่ไฮไลต์ไว้

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

การเข้าชม AMP เทียบกับการเข้าชมที่ไม่ใช่ AMP

การเข้าชม AMP ใช้รหัสไคลเอ็นต์ที่ต่างจากรหัสสําหรับการเข้าชมเว็บโดยค่าเริ่มต้น หน้าเว็บ AMP โหลดเร็วกว่าและแสดงรูปแบบการเข้าชมที่แตกต่างจากหน้าเว็บมาตรฐาน ซึ่งมักหมายความว่าคุณจะได้รับเมตริกที่ต่างกันระหว่างการเข้าชม AMP และการเข้าชมที่ไม่ใช่ AMP

การใช้พร็อพเพอร์ตี้แยกต่างหากเพื่อวัดการเข้าชม AMP จะช่วยให้วิเคราะห์เมตริกได้ดีขึ้นและเห็นภาพการเข้าชมที่แม่นยำมากขึ้น หากต้องการใช้พร็อพเพอร์ตี้เดียวในการแยกแยะการเข้าชม AMP กับที่ไม่ใช่ AMP ให้ทำตามขั้นตอนต่อไปนี้

แก้ปัญหาการกำหนดค่า

โปรแกรมตรวจสอบ AMP สามารถใช้เพื่อระบุว่าหน้าเว็บไม่เป็นไปตามข้อกำหนด AMP HTML หรือไม่ เพิ่ม #development=1 ลงใน URL ของหน้าเว็บเพื่อเปิดโปรแกรมตรวจสอบ

ส่วนขยาย amp-analytics มีคำเตือนและข้อความแสดงข้อผิดพลาดเพื่อช่วยแก้ไขข้อบกพร่องและแก้ปัญหาการกำหนดค่า เพิ่ม #log=1 ลงใน URL ของหน้าเว็บเพื่อดูข้อความแสดงข้อผิดพลาดที่บันทึกไว้ในคอนโซลของเว็บเบราว์เซอร์

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

ตัวอย่างนี้แสดงหน้า AMP ที่สมบูรณ์ด้วยปุ่มเดียวในหน้า การกำหนดค่านี้จะส่งข้อมูลการดูหน้าเว็บมาตรฐานและเหตุการณ์ "button-click" ไปยัง Google Analytics ดังนี้

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">

    <link rel="canonical" href="self.html" />
    <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": "<GA_MEASUREMENT_ID>",
            "config": {
              "<GA_MEASUREMENT_ID>": { "groups": "default" }
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Make it so.</h1>
    <div>
      <button type="button" id="the-button">Engage!</button>
    </div>
  </body>
</html>