Google uses AI technology to translate content into your preferred language. AI translations can contain errors.

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ó 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 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 nền tảng bạn muốn dùng trong số các nút sau:

Thẻ Google

Việc triển khai gtag.js trên AMP sử dụng khung amp-analytics để cho phép bạn đo lường số liệu phân tích trên trang web AMP. Bạn có thể gửi dữ liệu từ các trang AMP đến Google Ads, Google Analytics và các sản phẩm khác của Google thông qua cùng một cách 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 của bạn 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>

Để 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ẻ của sản phẩm đó. Bạn chỉ cần thêm mã nhận dạng đí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 trình kích hoạt dựa trên các sự kiện như lượt nhấp. Điều kiện kích hoạt cho gtag.js trong AMP tuân theo các mẫu JSON tương tự như 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 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ử nào đượ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 sự kiện được đề xuất, bạn có thể chỉ định sự kiện tuỳ chỉnh của riêng mình.

Gửi phương diện và thông 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 điều kiện kích hoạt trong JSON <amp-analytics>. Các thông số tuỳ chỉnh trong Google Analytics được gửi dưới dạng thông số sự kiện.

Sử dụng tiền tố ep. cho các thông số sự kiện có giá trị kiểu chuỗi.
Sử dụng tiền tố epn. cho các thông số sự kiện có giá trị là số.

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

Ví dụ: Thông số tuỳ chỉnh có lượt xem trang

Cấu hình này sẽ gửi một phương diện tuỳ chỉnh my_custom_dimension và một chỉ số tuỳ chỉnh my_page_score cùng 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 có sự kiện nhấp chuột

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

<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 những miền cần đượ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>

Theo mặc định, bạn có thể liên kết đến miền chuẩn từ bộ nhớ đệm AMP. Để tắt khả năng liên kết lưu lượng truy cập trên miền, hãy thêm "linker": "false" vào các 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ạ một bản minh hoạ hoàn chỉnh 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 người dùng nhấp vào nút. Thay thế <TAG_ID> bằng một mã nhận dạng 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 thực hiện những việc sau:

Nhớ xoá cookie hoặc sử dụng Chế độ ẩn danh.
Nếu không tìm thấy cid trong cookie Google Analytics, bạn cũng có thể thấy mã 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 bạn chuyển từ CDN của Google sang trang web của khách hàng, giá trị cid và gclid sẽ được truyền 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.

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à thông số tuỳ chỉnh bằng Google Analytics

Ví dụ: Thông số tuỳ chỉnh có lượt xem trang

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

Liên kết miền

Ví dụ đầy đủ

Khắc phục sự cố

Thiết lập thẻ cho AMP