Đào sâu vào phân tích AMP

Hướng dẫn này đào sâu vào thành phần amp-analytics, tách gỡ một cấu hình mẫu của amp-analytics thành những khối dựng then chốt này:

Phần còn lại của hướng dẫn này sử dụng mẫu cấu hình này, vốn dùng để theo dõi lượt xem trang và những nhấp chuột của người dùng, rồi gửi dữ liệu phân tích đến nhà cung cấp bên thứ ba, Google Analytics:

<amp-analytics
  type="googleanalytics"
  config="https://example.com/analytics.account.config.json"
>
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
        "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
      },
      "vars": {
        "account": "ABC123"
      },
      "extraUrlParams": {
        "cd1": "AMP"
      },
      "triggers": {
        "trackPageview": {
          "on": "visible",
          "request": "pageview"
        },
        "trackAnchorClicks": {
          "on": "click",
          "selector": "a",
          "request": "event",
          "vars": {
            "eventId": "42",
            "eventLabel": "clicked on a link"
          }
        }
      },
      "transport": {
        "beacon": false,
        "xhrpost": false,
        "image": true
      }
    }
  </script>
</amp-analytics>

Đoạn mã ví dụ ở trên nhằm giúp bạn tìm hiểu, nhưng nó không hề là một mẫu thực tế. Nếu bạn đang làm việc với những nhà cung cấp công cụ phân tích, có thể đoạn mẫu trên không có nghĩa; cấu hình của nhà cung cấp sẽ bỏ đi tính phức tạp. Tham khảo tài liệu của nhà cung cấp công cụ phân tích để biết các cấu hình mẫu.

Chỗ gửi đi dữ liệu phân tích: thuộc tính type

AMP is designed to support two common patterns of data collection:

• Thu thập bằng điểm cuối do nhà phát hành sở hữu đối với hệ thống phân tích nội bộ.
• Thu thập bằng điểm cuối do nhà cung cấp sở hữu đối với tính liên tác với giải pháp của nhà cung cấp (ví dụ như Adobe Analytics, Chartbeat, Google Analytics).

To send analytics data to an analytics provider, include the type attribute in the amp-analytics tag and set its value to the appropriate vendor, as defind in the Analytics Vendors list.

For example: <amp-analytics type="googleanalytics"> sends analytics data to the third-party analytics provider, Google Analytics. To send data to a publisher-owned endpoint, simply don’t include the type attribute; the analytics data is sent to the defined endpoints for each request.

Các cấu hình của nhà cung cấp công cụ phân tích là cách nhanh chóng để bắt đầu với amp-analytics. Bạn nên tham khảo tài liệu của nhà cung cấp và nguồn tài nguyên trợ giúp để biết thêm thông tin hướng dẫn. Như đã đề cập trước đó, danh sách nhà cung cấp đã tích hợp với AMP, cũng như những liên kết đến tài liệu cụ thể của họ có thể tìm thấy trong danh sách Nhà cung cấp công cụ phân tích.

If you’re an analytics vendor, learn more about integrating your own analytics configuration into AMP HTML.

Tải cấu hình từ xa: thuộc tính config

Bạn không cần phải bao gồm toàn bộ cấu hình cho amp-analytics hoàn toàn trên trang AMP của mình. Thay vì vậy, bạn có thể phát lệnh gọi đến một URL từ xa cho toàn bộ hay một phần của các cấu hình.

Điều này cho phép bạn làm những việc như thay đổi cấu hình dựa trên một yêu cầu cụ thể. Nếu bạn ở vai trò nhà phát hành có quyền kiểm soát đối với file từ xa đó, bạn có thể làm bất kì khâu xử lí nào phía máy chủ mà cần thiết để xây dựng dữ liệu cấu hình.

Bước đầu tiên để tải những cấu hình từ xa là bao gồm thuộc tính config trong thẻ amp-analytics:

<amp-analytics
  config="https://example.com/analytics.account.config.json"
></amp-analytics>

Bước tiếp theo là tạo nội dung JSON ngụ trong URL từ xa. Trong ví dụ giản đơn này, phần cấu hình chứa đựng trong đối tượng JSON chỉ là giá trị của biến số cho tài khoản phân tích.

Nội dung của ví dụ trong https://example.com/analytics.account.config.json:

{
  "vars": {
    "account": "UA-XXXXX-Y"  // Replace with your property ID.
  }
}

Bước cuối cùng là bảo đảm nội dung trong file từ xa được kéo vào chỗ thích hợp trong cấu hình amp-analytics. Trong cả yêu cầu pageview lẫn yêu cầu event ở đây, giá trị của biến account được tự động đặt thành giá trị tài khoản trong URL từ xa ("account": "UA-XXXXX-Y"):

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Requests, triggers & transports

Thuộc tính requests định ra ‘dữ liệu gì được gửi đi’ (ví dụ, pageviews, events), và nơi gửi đến dữ liệu đó (những URL được dùng để truyền dữ liệu).

Thuộc tính triggers mô tả thời điểm nên gửi dữ liệu phân tích, ví dụ như khi một người dùng xem một trang, khi một người dùng nhấp vào một liên kết.

Thuộc tính transport chỉ định cách gửi một yêu cầu, cụ thể hơn là chỉ định giao thức gửi.

Đọc tiếp để tìm hiểu thêm về những cấu hình này. (Bạn cũng có thể đọc về những cấu hình này trong phần tham khảo amp-analytics

Dữ liệu gì được gửi đi: thuộc tính requests

request-name được dùng trong cấu hình kích hoạt để chỉ định yêu cầu gì cần được gửi để đáp ứng một sự kiện đặc thù. request-value là một URL https. Những giá trị này có thể bao gồm các token giữ chỗ vốn có thể tham chiếu yêu cầu hay biến số khác.

"requests": {
  "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}",
  "event": "https://example.com/analytics?eid=${eventId}&elab=${eventLabel}&acct=${account}"
}

Một số nhà cung cấp công cụ phân tích (bao gồm Google Analytics) đã cung cấp phần cấu hình, cái mà bạn có thể sử dụng qua thuộc tính type. Nếu bạn đang dùng một nhà cung cấp công cụ phân tích, bạn có thể không cần phải bao gồm thông tin requests. Xem tài liệu của nhà cung cấp để tìm hiểu xem liệu requests có cần được cấu hình không, và cách cấu hình ra sao.

Nối URL yêu cầu: Tham số URL thêm vào

Thuộc tính extraUrlParams chỉ định những tham số thêm vào để nối với chuỗi truy vấn của URL yêu cầu thông qua quy ước "&foo=baz".

Ví dụ amp-analytics thêm một tham số bổ sung cd1 vào yêu cầu và đặt giá trị tham số là "AMP":

  "extraUrlParams": {
    "cd1": "AMP"
  }

Thời điểm gửi đi dữ liệu: thuộc tính triggers

Thuộc tính triggers mô tả thời điểm một yêu cầu phân tích cần được gửi đi. Nó gồm một cặp khoá và giá trị của tên mã kích hoạt và cấu hình mã kích hoạt. Tên mã kích hoạt có thể là bất kì chuỗi nào gồm các kí tự chữ và số (a-z, A-Z, 0-9).

Ví dụ, yếu tố amp-analytics sau được cấu hình để gửi một yêu cầu đến https://example.com/analytics khi tài liệu được tải lần đầu, và mỗi lần có người nhấp vào thẻ a:

"triggers": {
  "trackPageview": {
    "on": "visible",
    "request": "pageview"
  },
  "trackAnchorClicks": {
    "on": "click",
    "selector": "a",
    "request": "event",
    "vars": {
      "eventId": "42",
      "eventLabel": "clicked on a link"
    }
  }
}

AMP hỗ trợ những cấu hình kích hoạt sau:

Cách dữ liệu được gửi đi: thuộc tính transport

Thuộc tính transport chỉ định cách gửi một yêu cầu. Ba phương pháp sau được bật theo mặc định:

Chỉ một phương pháp vận chuyển được dùng đến, và đó là phương pháp có độ ưu tiên cao nhất mà đã được bật, được cho phép và khả dụng. Độ ưu tiên là beacon > xhrpost > image. Nếu tác nhân người dùng của máy khách không hỗ trợ một phương pháp nào đó, thì sẽ dùng đến phương pháp có độ ưu tiên cao tiếp theo mà được bật.

Bao gồm thuộc tính transport trong cấu hình của bạn chỉ khi bạn muốn giới hạn các phương án vận chuyển, còn không, bạn có thể dừng các yêu cầu.

Trong ví dụ bên dưới, beacon và xhrpost được đặt thành false, nên chúng sẽ không được dùng cho dù chúng có độ ưu tiên cao hơn image. Nếu tác nhân người dùng của máy khách hỗ trợ phương pháp image thì nó sẽ được dùng đến; không thì không có yêu cầu nào được gửi đi.

'transport': {
  'beacon': false,
  'xhrpost': false,
  'image': true
}

Sắp thứ tự thay thế biến số

AMP nạp dữ liệu cho các biến số với các giá trị theo thứ tự ưu tiên:

1. Cấu hình từ xa (qua config).
2. vars được lồng bên trong một yếu tố kích hoạt ở trong triggers.
3. vars ở cấp cao nhất được lồng ở trong amp-analytics.
4. Giá trị do nền tảng cung cấp.

Trong ví dụ này, có một cấu hình từ xa, những biến số được định nghĩa ở cấp cao nhất, trong các yếu tố kích hoạt, và ở cấp nền tảng:

<amp-analytics config="http://example.com/config.json">
  <script type="application/json">
    {
      "requests": {
        "pageview": "https://example.com/analytics?url=${canonicalUrl}&title=${title}&acct=${account}&clientId=${clientId(cid-scope)}",
      },
      "vars": {
        "account": "ABC123",
        "title": "Homepage"
      },
      "triggers": {
        "some-event": {
          "on": "visible",
          "request": "pageview",
          "vars": {
            "title": "My homepage",
            "clientId": "my user"
          }
      }
    }
  </script>
</amp-analytics>

Khi cùng một var được định nghĩa ở nhiều vị trí, thứ tự ưu tiên của biến số sẽ đặt giá trị của nó một lần. Do đó, nếu cấu hình từ xa định nghĩa account là UA-XXXXX-Y trong ví dụ ở trên, những giá trị vars khác nhau sẽ như sau: