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 trang web nguồn mở nền tảng giúp cải thiện hiệu suất của nội dung web. AMP bao gồm tính năng hỗ trợ tích hợp sẵn 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 trang AMP.

Cài đặt

Thẻ Google cho phép bạn cài đặt Google Analytics, Google Ads và các công cụ khác Các sản phẩm của Google trên trang AMP. Trình quản lý thẻ của Google thiết lập một vùng chứa AMP và cho phép bạn tạo các cấu hình nâng cao và triển khai dịch vụ của bên thứ ba thẻ khỏi 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 các nút sau:

Thẻ Google

Quy trình triển khai AMP của gtag.js sử dụng khung amp-analytics để giúp bạn có thể đo lường số liệu phân tích trên trang web AMP của mình. Dữ liệu có thể là đượ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ách triển khai gtag.js.

Cài đặt

Để định cấu hình gtag.js trên trang AMP, trước tiên hãy đảm bảo rằng bạn đã bao gồm thành phần amp-analytics 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 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:

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

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

<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 thiết lập điều kiện kích hoạt dựa trên sự kiện chẳng hạn như số lượt nhấp. Các điều kiện kích hoạt cho gtag.js trong AMP tuân theo các mẫu JSON giống 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. Chiến lược phát hành đĩa đơn Giá trị selector là bộ chọn CSS cho phép bạn chỉ định phần tử nào là đượ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 tham số bổ sung 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 các 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 hai hoặc nhiều trang web liên quan trên các miền riêng biệt được đo lường thành một giá trị duy nhất. Để chỉ định các miền sẽ được liên kết, hãy sử 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>

Bạn đã bật tính năng liên kết đến miền chuẩn của mình từ bộ nhớ đệm AMP theo mặc định. Để tắt tính năng liên kết lưu lượng truy cập 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 đủ

Đoạn mã ví dụ này minh hoạ bản minh hoạ hoạt động hoàn chỉnh của một trang AMP tạo một trang AMP duy nhất rồi gửi một sự kiện button-click tới Google Số liệu phân tích khi người dùng nhấp vào nút này. Thay thế <TAG_ID> bằng một tham số hợp lệ mã thẻ:

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

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

Hãy nhớ xóa cookie hoặc sử dụng Chế độ ẩn danh.
Nếu không tìm thấy cid trong cookie của Google Analytics, thì lớp này cũng có thể ghi nhận được trong thẻ Network (Mạng) trên trình duyệt web của bạn. 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 đến trang web của khách hàng, cid và giá trị gclid phải được truyền thông qua 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.