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

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

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

ในการสร้างการติดตั้ง Google Analytics พื้นฐานในหน้า AMP ให้คัดลอกข้อมูลโค้ดนี้ และแทนที่ <GA_MEASUREMENT_ID> ด้วยรหัสแท็ก Google ค้นหารหัสแท็ก 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 และด้านล่างเพิ่มพร็อพเพอร์ตี้การกําหนดค่าที่มี <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>

ตัวลิงก์โดเมนช่วยให้ระบบวัดเว็บไซต์ที่เกี่ยวข้องตั้งแต่ 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" ลงในพารามิเตอร์การกําหนดค่าดังนี้

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