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

จัดทุกอย่างให้เป็นระเบียบอยู่เสมอด้วยคอลเล็กชัน บันทึกและจัดหมวดหมู่เนื้อหาตามค่ากำหนดของคุณ

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

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

ในการสร้างการติดตั้ง Google Analytics พื้นฐานในหน้า AMP ให้คัดลอกข้อมูลโค้ดนี้และแทนที่ <GA_MEASUREMENT_ID> ด้วยรหัสพร็อพเพอร์ตี้ที่คุณต้องการใช้ (ค้นหารหัส Google Analytics)

<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> เป็นคอมโพเนนต์ 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 แล้ว และด้านล่างคือเพิ่มพร็อพเพอร์ตี้การกําหนดค่าที่มี <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 มักใช้ในการสร้างรายงานเกี่ยวกับแคมเปญ ค่าเหล่านี้สามารถระบุในบล็อกตัวแปรโดยใช้พารามิเตอร์ 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>

Domain 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 คุณจะเปิดใช้ลิงก์ไปยังโดเมน Canonical จากแคช AMP ได้โดยค่าเริ่มต้น หากต้องการปิดใช้ Google Analytics' ความสามารถในการลิงก์การเข้าชมโดเมน ให้เพิ่ม "linker": "false" ไปยังพารามิเตอร์การกําหนดค่า ดังนี้

<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>

ความเร็วเว็บไซต์

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 ให้ใช้มิติข้อมูลแหล่งข้อมูลหรือมิติข้อมูลที่กําหนดเองเพื่อแยกความแตกต่าง

โดยค่าเริ่มต้น Google Analytics จะส่งค่า "AMP" ผ่านมิติข้อมูลแหล่งข้อมูล ใช้ค่านี้เพื่อแบ่งกลุ่ม กรอง หรือวิเคราะห์เนื้อหา AMP เทียบกับเนื้อหาที่ไม่ใช่ AMP ภายในข้อมูลพร็อพเพอร์ตี้เดียว

แก้ไขข้อบกพร่องการกําหนดค่าของคุณ

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

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

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

ตัวอย่างนี้แสดงหน้า AMP ที่สมบูรณ์ที่มีปุ่มเดียวในหน้า การกําหนดค่านี้จะส่งข้อมูลการดูหน้าเว็บมาตรฐานและ "การคลิกปุ่ม" เหตุการณ์ไปยัง 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>