Google sử dụng công nghệ AI để dịch nội dung sang ngôn ngữ bạn ưu tiên. Bản dịch bằng AI có thể có lỗi.

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 hỗ trợ sẵn 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 các 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 cũng như triển khai thẻ của bên thứ ba từ giao diện Trình quản lý thẻ.

Chọn tuỳ chọn nền tảng bạn muốn trong các nút sau:

Thẻ Google

Việc triển khai AMP của gtag.js sử dụng khung amp-analytics để cho phép bạn đo lường dữ liệu phân tích trên trang web AMP. 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 quá trình triển khai gtag.js.

Cài đặt

Để định cấu hình gtag.js trên một 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 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 đế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ẻ từ sản phẩm đó. Bạn chỉ cần thêm mã đích đến một lệnh config riêng.

<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 trình kích hoạt dựa trên các sự kiện như lượt nhấp. Trình kích hoạt cho gtag.js trong AMP tuân theo các mẫu JSON giống như các amp-analytics cấu hình trình kích hoạt.

Ví dụ này minh hoạ cách gửi sự kiện click đến Google Analytics. Giá trị selector là một bộ chọn CSS cho phép bạn chỉ định phần tử được nhắm đến. 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.

Gửi phương diện và tham số tuỳ chỉnh bằng Google Analytics

Để gửi phương diện và chỉ số tuỳ chỉnh đến Google Analytics từ các trang AMP bằng gtag.js, bạn có thể tận dụng thuộc tính extraUrlParams trong cấu hình trình kích hoạt trong JSON <amp-analytics>. Các tham số tuỳ chỉnh trong Google Analytics được gửi dưới dạng tham số sự kiện.

Sử dụng tiền tố ep. cho các tham số sự kiện có giá trị chuỗi.
Sử dụng tiền tố epn. cho các tham số sự kiện có giá trị số.

Trước khi gửi, hãy đảm bảo rằng các phương diện và chỉ số tuỳ chỉnh này đã được đăng ký trong tài sản Google Analytics của bạn.

Ví dụ: Tham số tuỳ chỉnh với lượt xem trang

Cấu hình này gửi phương diện tuỳ chỉnh my_custom_dimension và chỉ số tuỳ chỉnh my_page_score với lượt xem trang ban đầu:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview",
      "extraUrlParams": {
        "ep.my_custom_dimension": "value1",
        "epn.my_page_score": 95
      }
    }
  }
}
</script>
</amp-analytics>

Ví dụ: Tham số tuỳ chỉnh với sự kiện nhấp chuột

Cấu hình này gửi các tham số tuỳ chỉnh khi một phần tử có mã nhận dạng myButton được nhấp vào:

<amp-analytics type="gtag" id="gtag_amp">
<script type="application/json">
{
  "vars": {
    "gtag_id": "G-XXXXXX",
    "config": {
      "G-XXXXXX": { "groups": "default" }
    }
  },
  "triggers": {
    "pageview": {
      "on": "visible",
      "request": "pageview"
    },
    "trackButtonClick": {
      "on": "click",
      "selector": "#myButton",
      "request": "event",
      "vars": {
        "event_name": "button_click",
        "event_category": "Interactive"
      },
      "extraUrlParams": {
        "ep.button_id": "myButton",
        "ep.custom_info": "MoreDetails"
      }
    }
  }
}
</script>
</amp-analytics>

Liên kết miền

Trình liên kết miền cho phép đo lường hai hoặc nhiều trang web có liên quan trên các miền riêng biệt dưới dạng một trang web. Để chỉ định các miền cần 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>

Ví dụ hoàn chỉnh

Ví dụ về mã này minh hoạ bản minh hoạ đầy đủ về một trang AMP tạo một trang AMP duy nhất và gửi sự kiện button-click đến Google Analytics khi nút được nhấp vào. 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ố

Sử dụng validator.amp.dev để xác thực chế độ thiết lập gắn thẻ hoặc bạn có thể tự đảm bảo rằng giá trị cid nhất quán trên các miền bằng cách làm như sau:

Đảm bảo bạn 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 thấy giá trị này trong thẻ Mạng của trình duyệt web. Tìm kiếm collect request và tải trọng sẽ chứa giá trị cid.
Sau khi bạn chuyển từ trang AMP sang một miền khác của trang web, giá trị cid và gclid sẽ được chuyển bằng cách sử dụng 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ượt chuyển hướng và thay đổi miền giữa trang chính tắc và trang đích không phải AMP.

Thiết lập thẻ cho AMP Sử dụng bộ sưu tập để sắp xếp ngăn nắp các trang Lưu và phân loại nội dung dựa trên lựa chọn ưu tiên của bạn.

Cài đặt

Thẻ Google

Cài đặt

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

Gửi phương diện và tham số tuỳ chỉnh bằng Google Analytics

Ví dụ: Tham số tuỳ chỉnh với lượt xem trang

Ví dụ: Tham số tuỳ chỉnh với sự kiện nhấp chuột

Liên kết miền

Ví dụ hoàn chỉnh

Khắc phục sự cố

Thiết lập thẻ cho AMP