Trang này được dịch bởi Cloud Translation API.

Thiết lập thẻ cho AMP

Dự án Accelerated Mobile Pages (AMP) là một nền tảng web nguồn mở giúp cải thiện hiệu suất của nội dung trên web. AMP có tính năng hỗ trợ tích hợp cho thẻ Google và Trình quản lý thẻ của Google. Hướng dẫn này mô tả cách thiết lập Google Analytics cho các trang AMP.

Cài đặt

Thẻ Google cho phép bạn cài đặt Google Analytics, Google Ads và các sản phẩm khác của Google trên trang AMP. Trình quản lý thẻ của Google sẽ thiết lập vùng chứa AMP và cho phép bạn tạo cấu hình nâng cao và triển khai thẻ của bên thứ ba từ giao diện Trình quản lý thẻ.

Chọn lựa chọn ưu tiên của bạn về nền tảng trong số các nút sau:

Thẻ Google

Khi triển khai AMP của gtag.js, chúng sử dụng khung amp-analytics để bạn có thể đo lường hoạt động phân tích trên trang web AMP của mình. Dữ liệu có thể được gửi từ các trang AMP đến Google Ads, Google Analytics và các sản phẩm khác của Google từ cùng một cấu hình triển khai gtag.js.

Cài đặt

Để định cấu hình thẻ Google (gtag.js) trên trang AMP, trước tiên hãy đảm bảo rằng bạn đã thêm thành phần amp-analytics vào trong thẻ <head> trên trang đó:

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

Tiếp theo, hãy thêm thẻ Google vào trang AMP dưới dạng một thành phần JSON trong thẻ <body> trên trang đó. Thay thế <TARGET_ID> bằng mã thẻ cho các sản phẩm (ví dụ: Google Ads, Google Analytics) mà bạn muốn gửi dữ liệu đến:

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

Để định cấu hình nhiều sản phẩm trong thẻ Google, bạn không cần cài đặt toàn bộ thẻ của sản phẩm đó. Bạn chỉ cần thêm mã đích đến vào một lệnh config riêng biệt.

<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
  "vars" : {
    "gtag_id": "<TAG_ID>",
    "config" : {
      "<TAG_ID>": { "groups": "default" },
      <!-- Additional IDs -->
    }
  }
}
</script>
</amp-analytics>

Để biết thêm thông tin, hãy xem tài liệu về amp-analytics.

Trình kích hoạt sự kiện

Để gửi dữ liệu cụ thể đến các sản phẩm của bạn, hãy định cấu hình điều kiện kích hoạt dựa trên các sự kiện, chẳng hạn như lượt nhấp. Điều kiện kích hoạt cho gtag.js trong AMP tuân theo cùng một mẫu JSON như các cấu hình điều kiện kích hoạt amp-analytics khác.

Ví dụ này minh hoạ cách gửi một sự kiện click đến Google Analytics. Giá trị selector là bộ chọn CSS cho phép bạn chỉ định phần tử nào được nhắm mục tiêu. Giá trị on chỉ định loại sự kiện, trong trường hợp này là sự kiện click. Trong phần vars, hãy chỉ định loại sự kiện trong event_name và thêm các thông số khác (nếu cần).

"triggers": {
  "button": {
    "selector": "#the-button",
    "on": "click",
    "vars": {
      "event_name": "login",
      "method": "Google"
    }
  }
}

Ngoài các sự kiện được đề xuất, bạn có thể chỉ định sự kiện tuỳ chỉnh của riêng mình.

Miền liên kết

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, hãy dùng "linker": { "domains": [...] }:

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

Khả năng liên kết đến miền chính tắc từ bộ nhớ đệm AMP được bật theo mặc định. Để tắt khả năng liên kết lưu lượng truy cập của miền, 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": "<TARGET_ID>",
    "config" : {
      "<TARGET_ID>": {
        "groups": "default",
        "linker": "false"
      }
    }
  }
}
</script>
</amp-analytics>

Ví dụ đầy đủ

Ví dụ về mã này minh hoạ bản minh hoạ hoạt động hoàn chỉnh của trang AMP, trong đó tạo một trang AMP duy nhất và gửi sự kiện button-click đến Google Analytics khi người dùng nhấp vào nút này. Thay thế <TAG_ID> bằng một mã thẻ hợp lệ:

<!doctype html>
<html ⚡ lang="en">
  <head>
    <meta charset="utf-8">
    <link rel="canonical" href="self.html" />
    <title>AMP gtag demo</title>
    <meta name="viewport" content="width=device-width,minimum-scale=1,initial-scale=1">
    <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": "<TAG_ID>",
            "config": {
              "<TAG_ID>": {}
            }
          },
          "triggers": {
            "button": {
              "selector": "#the-button",
              "on": "click",
              "vars": {
                "event_name": "login",
                "method": "Google"
              }
            }
          }
        }
      </script>
    </amp-analytics>

    <h1>Welcome to the mobile web</h1>
    <div>
      <button type="button" id="the-button">Example: Log in with Google</button>
    </div>
  </body>
</html>

Khắc phục sự cố

Hãy sử dụng amptagtest.appspot.com để xác thực chế độ thiết lập gắn thẻ, hoặc bạn có thể đảm bảo theo cách thủ công rằng giá trị cid nhất quán trên các miền bằng cách thực hiện như sau:

Hãy nhớ xoá cookie hoặc sử dụng Chế độ ẩn danh.
Nếu không tìm thấy cid trong cookie của Google Analytics, bạn cũng có thể quan sát cookie này trong thẻ Mạng của trình duyệt web. Tìm kiếm collect request và tải trọng phải chứa giá trị cid.
Sau khi chuyển từ CDN của Google sang trang web của khách hàng, cid và giá trị gclid sẽ được chuyển thông qua tính năng trang trí URL:
```
**_Linker format: mydomain.com?\_gl=1\*1ie2jr6\*\_ga\*WHFTa3JPckw2TGxZSzY5b3V1cVNVSmRIREI.\*gclid\*dGVzdA.._**
```
Trang đích cuối cùng vẫn phải có cùng giá trị cid như trong trang đích ban đầu.
Hãy cẩn thận với các lệnh chuyển hướng và thay đổi miền giữa trang chính tắc và trang đích không phải AMP.