Thêm Analytics vào các trang AMP

Accelerated Mobile Pages (AMP) là một nền tảng dùng để xây dựng các trang web cho nội dung tĩnh kết xuất nhanh. AMP bao gồm một phần tử <amp-analytics> cho phép đo lường hoạt động tương tác của người dùng và có tính năng hỗ trợ tích hợp cho Google Analytics.

Thiết lập cơ bản để đo lường lượt xem trang

Để tạo chế độ cài đặt Google Analytics cơ bản trên trang AMP, hãy sao chép đoạn mã này và thay thế <GA_MEASUREMENT_ID> bằng mã thẻ Google của bạn. Tìm mã thẻ Google của bạn.

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

Gửi dữ liệu đến nhiều điểm đến

Bạn có thể gửi dữ liệu tới nhiều đích đến bằng cùng một thẻ <amp-analytics>. Bạn chỉ cần thêm mã đo lường mới <GA_MEASUREMENT_ID_NEW> vào lệnh 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>

Cách thức hoạt động

Phần tử <amp-analytics> là một thành phần AMP mở rộng và được bật rõ ràng dưới dạng custom-element trong thẻ tập lệnh.

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

Khối phần tử <amp-analytics> được định cấu hình để hỗ trợ các sản phẩm đo lường của Google. Đặt thuộc tính type cho <amp-analytics> thành "gtag" (để bật tính năng hỗ trợ gtag.js) và thuộc tính data-credentials thành "include" (để bật cookie).

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

AMP không cho phép bất kỳ JavaScript nào ngoài các thư viện đã được phê duyệt riêng, do đó, cấu hình sẽ được thực hiện bằng JSON. Một thuộc tính gtag_id<GA_MEASUREMENT_ID> hợp lệ sẽ được thêm vào khối vars, và dưới đó một thuộc tính cấu hình có <GA_MEASUREMENT_ID>: {} sẽ được thêm dưới dạng giá trị.

Đo lường các sự kiện

Sử dụng triggers với các giá trị đã xác định để đo lường các sự kiện trong trang AMP. Các thuộc tính này được dùng trong cấu hình điều kiện kích hoạt:

  • selector: bộ chọn CSS để chỉ định một phần tử mục tiêu.
  • on: chỉ định loại sự kiện.
  • vars: chỉ định loại sự kiện trong event_name và thêm các thông số khác (nếu cần).

Ví dụ này minh hoạ cách thiết lập một sự kiện Google Analytics cơ bản. Tạo một trình kích hoạt có tên là "button" (nút sẽ kích hoạt) khi nhấp vào một phần tử có giá trị mã nhận dạng là "the-button". Trình kích hoạt này sẽ gửi giá trị event_name là "login" và giá trị method là "Google" đến 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>

Sự kiện Google Analytics là danh mục sự kiện dành riêng cho Google Analytics, thường được dùng để tạo báo cáo về chiến dịch. Bạn có thể chỉ định các giá trị này trong khối vars bằng các tham số event_category, event_labelvalue:

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

Hãy xem tài liệu về amp-analytics để tìm hiểu thêm về cấu hình của điều kiện kích hoạt.

Sửa đổi thông số

Để ghi đè tham số Google Analytics mặc định hoặc thêm tham số mới, hãy thêm các giá trị bạn muốn vào mục parameter trong khối config. Ví dụ này sẽ ghi đè giá trị số lượt xem trang và sự kiện mặc định cho page_titlepage_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>

Trình liên kết miền cho phép hệ thống đo lường hai hoặc nhiều trang web có liên quan trên các miền riêng biệt thành một. Chỉ định các miền cần liên kết với thuộc tính "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>

Trong các trang AMP đã định cấu hình Google Analytics, khả năng liên kết đến miền chuẩn của bạn từ bộ nhớ đệm AMP sẽ được bật theo mặc định. Để vô hiệu hoá khả năng liên kết lưu lượng truy cập của miền của Google Analytics, hãy thêm "linker": "false" vào thông số 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>

Tốc độ trang web cho Universal Analytics

Google Analytics được định cấu hình để tự động thu thập dữ liệu về tốc độ trang web cho một phần nhỏ lưu lượng truy cập của trang web. Bạn có thể thay đổi tốc độ lấy mẫu để thu thập nhiều hoặc ít dữ liệu hơn. Để đặt tốc độ lấy mẫu là 100%, hãy thêm mã được làm nổi bật vào cấu hình của bạn:

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

Để ngừng thu thập dữ liệu tốc độ trang web, hãy sử dụng mã được đánh dấu:

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

Lưu lượng truy cập AMP so với lưu lượng truy cập không phải AMP

Theo mặc định, lưu lượng truy cập AMP sử dụng mã ứng dụng khách khác với mã ứng dụng khách cho lưu lượng truy cập web. Các trang AMP tải nhanh hơn và hiển thị các mẫu lưu lượng truy cập khác với các mẫu lưu lượng truy cập tương ứng trên trang web chuẩn. Điều này thường có nghĩa là bạn sẽ nhận được chỉ số khác nhau giữa lưu lượng truy cập AMP và không phải AMP.

Việc sử dụng một thuộc tính riêng biệt để đo lường lưu lượng truy cập AMP giúp bạn phân tích tốt hơn các chỉ số và hiểu chính xác hơn về lưu lượng truy cập của mình. Để phân biệt lưu lượng truy cập AMP và lưu lượng truy cập không phải AMP nếu bạn cần sử dụng một tài sản duy nhất:

  • Sử dụng phương diện nguồn dữ liệu hoặc phương diện tuỳ chỉnh (Universal Analytics).
  • Sử dụng thông số sự kiện tuỳ chỉnh (Google Analytics 4).

Gỡ lỗi cấu hình

Bạn có thể sử dụng Trình xác thực AMP để xác định xem một trang web có đáp ứng được thông số kỹ thuật HTML AMP hay không. Thêm #development=1 vào URL của một trang để bật trình xác thực.

Tiện ích amp-analytics cung cấp cảnh báo và thông báo lỗi để giúp gỡ lỗi và khắc phục sự cố cấu hình. Thêm #log=1 vào URL của trang để xem thông báo lỗi được ghi lại trong bảng điều khiển của trình duyệt web.

Ví dụ đầy đủ

Ví dụ này minh họa một trang AMP hoàn chỉnh với một nút duy nhất trên trang. Cấu hình này sẽ gửi dữ liệu lượt xem trang chuẩn và sự kiện "nhấp vào nút" đến 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>