Accelerated Mobile Pages (AMP) là nền tảng xây dựng các trang web có nội dung tĩnh hiển thị nhanh. AMP bao gồm yếu tố <amp-analytics> cho phép đo lường các tương tác người dùng và hỗ trợ tích hợp cho Google Analytics.
Thiết lập cơ bản để đo Pageview – lượt xem trang
Để cài đặt Google Analytics cơ bản trên trang AMP, sao chép đoạn mã <GA_MEASUREMENT_ID> và thay thế bằng ID bạn muốn sử dụng.
<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>AMP hoạt động như thế nào
<amp-analytics> là thành phần AMP mở rộng và được kích hoạt nhanh dưới dạng custom-element trong thẻ script.
<script async custom-element="amp-analytics" src="https://cdn.ampproject.org/v0/amp-analytics-0.1.js"></script>
<amp-analytics> được cấu hình để hỗ trợ các sản phẩm đo lường của Google. Cài đặt thuộc tính type cho <amp-analytics> thành “gtag” (hỗ trợ gtag.js) và thuộc tính data-credentials thành “include” (bật cookies.)
<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ư mục đã được phê duyệt, do đó cấu hình được thực hiện bằng JSON. Thuộc tính gtag_id có <GA_MEASUREMENT_ID> hợp lệ được thêm vào vars , và bên dưới là thuộc tính cấu hình có <GA_MEASUREMENT_ID>: {} được thêm vào làm giá trị.
Đo lường các Event – sự kiện
Sử dụng triggers với giá trị được xác định để đo lường các Event trên trang AMP. Các thuộc tính này được sử dụng trong cấu hình kích hoạt:
- selector: bộ chọn CSS để xác định thành phần chính.
- on: xác định loại sự kiện
- vars: xác định loại sự kiện trong event_name, và thêm các tham số bổ sung nếu cần.
Ví dụ trình bày cách thức thiết lập sự kiện Google Analytics cơ bản. Trigger “button” sẽ được kích hoạt khi một phần tử có giá trị ID của “the button” được nhấp vào. Trigger này sẽ gửi một giá trị event_name của “login” và giá trị method của “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>
Google Analytics Events là danh sách các event dành riêng cho Google Analytics, thường được sử dụng để tạo báo cáo các chiến dịch – campaign. Những giá trị này có thể được xác định trong vars với 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>
Thay đổi tham số
Để ghi đè các tham số mà Google Analytics mặc định hoặc tham số mới, thêm các giá trị mong muốn vào phần parameter của config. Ví dụ này cho ta biết việc ghi đè lượt xem trang và giá trị sự kiện 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>
Liên kết tên miền
Trình liên kết tên miền cho phép hai hoặc nhiều trang web với các tên miền riêng lẻ được tính là một. Xác định các tên miền được liên kết với thuộc tính “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 có Google Analytics được cấu hình, khả năng liên kết đến miền canonical từ bộ AMP được bật mặc định. Để tắt khả năng liên kết lưu lượng truy cập tên miền của Google Analytics, thêm “linker”: “false” vào tham số cấu hình:
<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>
Lưu lượng AMP và non-AMP
Traffic (lưu lượng) AMP sử dụng các ID khách hàng khác với traffic truy cập trang web thông thường. Các trang AMP tải nhanh hơn và hiển thị các traffic truy cập khác nhau so với các trang web tiêu chuẩn, có nghĩa là bạn sẽ nhận được các số liệu traffic từ AMP và non-AMP.
Việc sử dụng một thuộc tính riêng lẻ để kiểm tra traffic AMP cho phép đo lường các chỉ số tốt hơn và cung cấp bức tranh về traffic chính xác hơn. Nếu bạn cần sử dụng một thuộc tính duy nhất để đo cả traffic của AMP và non – AMP, sử dụng data source dimension hoặc chiều dữ liệu tùy chỉnh để phân biệt chúng.
Theo mặc định, Google Analytics sẽ gửi giá trị “AMP” thông qua nguồn dữ liệu (Source). Sử dụng giá trị để phân đoạn, lọc, hoặc phân tích nội dung AMP với non-AMP trong chế độ Single View.
Sửa lỗi cấu hình
AMP Validator có thể được sử dụng để xác định lỗi nếu trang web không đáp ứng các chỉ số AMP HTML.. Thêm #development=1 vào URL của trang để bật trình xác nhận.
amp-analytics mở rộng cung cấp các thông báo lỗi để giúp sửa lỗi và khắc phục sự cố cấu hình. Thêm #log=1 vào URL của trang để xem thông báo lỗi đã ghi trong trình duyệt web.
Một ví dụ hoàn chỉnh
Ví dụ này cho thấy một trang AMP hoàn chỉnh với một nút duy nhất trên một trang. Cấu hình này sẽ gửi dữ liệu page view tiêu chuẩn và các sự kiện “button-click”tới 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>