Thêm Analytics vào trang AMP

Accelerated Mobile Pages (AMP) là một nền tảng dùng để tạo các trang web có nội dung tĩnh hiển thị nhanh. AMP bao gồm phần tử <amp-analytics> cho phép đo lường mức độ tương tác của người dùng và tích hợp sẵn phần tử Google Analytics.

Quy trình 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. 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 đích đến

Bạn có thể gửi dữ liệu đến nhiều đích đến bằng cùng một thẻ <amp-analytics>, 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 hoạt động

Phần tử <amp-analytics> là 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 của chính nó, vì vậy cấu hình được thực hiện với JSON. Một thuộc tính gtag_id có <GA_MEASUREMENT_ID> hợp lệ sẽ được thêm vào khối vars, còn dưới dạng này, một thuộc tính cấu hình có <GA_MEASUREMENT_ID>: {} sẽ được thêm vào 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 sau được dùng trong cấu hình điều kiện kích hoạt:

  • selector: một 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 "button" (nút), sẽ kích hoạt khi người dùng 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à một 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_label và 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>

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

Sửa đổi thông số

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

Trình liên kết miền cho phép đo lường hệ thống đo lường hai hoặc nhiều trang web liên quan trên các miền riêng biệt. Chỉ định các miền cần liên kết với tài sản "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 chính tắc của bạn từ bộ nhớ đệm AMP đượ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 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 tốc độ trang web cho một phần nhỏ lưu lượng truy cập trên trang web của bạn. Bạn có thể thay đổi tốc độ lấy mẫu để thu thập thêm hoặc ít dữ liệu hơn. Để đặt tốc độ lấy mẫu thành 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 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 trang web chuẩn tương ứng. Đ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.

Khi sử dụng một thuộc tính riêng để đo lường lưu lượng truy cập AMP, bạn có thể phân tích chỉ số hiệu quả hơn và hiểu rõ 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à 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 trang web có không đáp ứng 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 đưa ra cảnh báo và thông báo lỗi để giúp gỡ lỗi và khắc phục sự cố về cấu hình. Thêm #log=1 vào URL của một 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 hoạ 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à các 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>