Thêm Analytics vào các trang AMP

Accelerated Mobile Pages (AMP) là một nền tảng được sử dụng để tạo các trang web cho nội dung tĩnh hiển thị nhanh. AMP bao gồm một <amp-analytics>phần tử cho phép đo lường các tương tác của người dùng và nó có hỗ trợ tích hợp cho Google Analytics.

Thiết lập cơ bản để đo lượt xem trang

Để tạo cài đặt cơ bản của Google Analytics trên trang AMP, hãy sao chép đoạn mã này và thay thế <GA_MEASUREMENT_ID>bằng ID thuộc tính bạn muốn sử dụng. ( Tìm ID Google Analytics của bạn .)

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

Quan trọng: Nếu amp-analyticsthẻ được định cấu hình với type="gtag"đã tồn tại trong mã nguồn trang của bạn, hãy thêm "GA_MEASUREMENT_ID": { "groups": "default" }vào "config"thông số hiện có . Để có hiệu suất tối ưu, không thêm phiên bản thứ hai của amp-analyticsthẻ với type="gtag".

Làm thế nào nó hoạt động

Phần <amp-analytics>tử này là một thành phần AMP mở rộng và được bật rõ ràng dưới dạng custom-elementthẻ trong thẻ tập lệnh.

<script async custom-element = "amp-analytics" src = "https://cdn.ampproject.org/v0/amp-analytics-0.1.js" > </script>   

Khối <amp-analytics>phần tử được định cấu hình để hỗ trợ các sản phẩm đo lường của Google. Đặt typethuộc tính cho <amp-analytics>thành " gtag " (để bật hỗ trợ gtag.js) và data-credentialsthuộc tính " bao gồm " (để bật cookie.)

<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ư viện được phê duyệt của chính nó, vì vậy thay vào đó, cấu hình được thực hiện với JSON. Một gtag_idtài sản với giá trị <GA_MEASUREMENT_ID>được bổ sung vào varskhối, và dưới đây là một tài sản cấu hình với <GA_MEASUREMENT_ID>: {}được thêm vào như giá trị.

Lưu ý: Khi amp-analyticsđược định cấu hình với ID thuộc tính Google Analytics, page_viewcác sự kiện sẽ tự động được ghi lại theo mặc định.

Đo lường sự kiện

Sử dụng triggersvới các giá trị đã xác định để đo lường các sự kiện trong các trang AMP. Các thuộc tính này được sử dụng trong cấu hình trình kích hoạt:

• selector: một bộ chọn CSS để chỉ định một phần tử đích.
• on: chỉ định loại sự kiện.
• vars: chỉ định loại sự kiện event_namevà thêm các tham số bổ sung nếu cần.

Ví dụ này trình bày cách thiết lập một sự kiện Google Analytics cơ bản. Tạo một trình kích hoạt được gọi là " nút " sẽ kích hoạt khi một phần tử có giá trị ID là " nút " được nhấp vào. Trình kích hoạt này sẽ gửi event_namegiá trị " đăng nhập " và methodgiá trị " 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 " } } }, " trigger " : { " button " : { " selector " :"# the-button" , "on" : "click" ,  
   
    
       
         
         
             
        
      
       
         
           
           
          "vars" : { "event_name" : "login" , "method" : "Google" } } } 
             
             
          
        
       } </script> </amp-analytics>
    
  

Sự kiện Google Analytics là một danh mục các sự kiện dành riêng cho Google Analytics thường được sử dụng để tạo báo cáo về các chiến dịch. Những giá trị này có thể được quy định trong khối vars với event_category, event_labelvà valuecác thông số:

<amp-analytics type = "gtag" data-credentials = "include" > <script type = "application / json" > { "vars" : { "gtag_id" : "<GA_MEASUREMENT_ID>" , "config" : { "< GA_MEASUREMENT_ID> " : { " groups " : " default " } } }, " trigger " : { " button " : { " selector " :"#login" , "on" : "click" ,  
   
    
       
         
         
              
        
      
       
         
           
           
          "vars" : { "event_name" : "login" , "method" : "Google" } } } } </script> </amp-analytics>  
             
             
          
        
      
    
  

Xem amp-analyticstài liệu để tìm hiểu thêm về cấu hình trình kích hoạt.

Sửa đổi thông số

Để ghi đè các thông số Google Analytics mặc định hoặc thêm các thông số mới, hãy thêm các giá trị mong muốn vào parameterphần configkhối của bạn . Ví dụ này ghi đè các giá trị sự kiện và lần xem trang mặc định cho page_titlevà 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 giao hưởng " , " page_location " : " https: //www.example.com / Beethoven.html " } } } } </script>  
 

    
     
      
       
         
         
         
      
    
  


</amp-analytics>

Liên kết các miền

Trình liên kết tên miền cho phép hai hoặc nhiều trang web có liên quan trên các tên miền riêng biệt được đo lường làm một. Chỉ định các miền sẽ được liên kết với thuộc "linker": { "domains": [...] }tí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 " : { " domains " : [ " example.com " , " example2.com "] } } } } } </script>  
 

    
     
      
       
         
             
      
    
  


</amp-analytics>

Trong các trang AMP có Google Analytics được định cấu hình, khả năng liên kết với miền chuẩn của bạn từ bộ nhớ đệm AMP được bật theo mặc định. Để vô hiệu hóa khả năng liên kết lưu lượng tên miền của Google Analytics, hãy thêm "linker": "false"vào các thông 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 ý: Các chức năng liên kết miền cũng có thể bị vô hiệu hóa với một trống domainsmảng: "linker": { "domains": [] }.

Tốc độ trang web

Google Analytics được định cấu hình để tự động thu thập dữ liệu tốc độ trang web cho một phần nhỏ lưu lượng truy cập trang web của bạn. Bạn có thể thay đổi tỷ lệ mẫu để thu thập nhiều hơn hoặc ít hơn dữ liệu. Để đặt tỷ lệ mẫu thành 100%, hãy thêm mã được đánh dấu vào cấu hình của bạn:

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

    
     
      
       
         
         
      
    
  

Để ngừng thu thập dữ liệu tốc độ trang web, hãy sử dụng mã được đánh dấu:

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

    
     
      
       
         
         
      
    
  

Lưu lượng truy cập AMP và không phải AMP

Theo mặc định, lưu lượng truy cập AMP sử dụng các ID ứng dụng khách khác với ID cho lưu lượng truy cập web. Các trang AMP tải nhanh hơn và hiển thị các mẫu lưu lượng truy cập khác với các trang web chuẩn của chúng, điều này thường có nghĩa là bạn sẽ nhận được các chỉ số khác nhau giữa lưu lượng truy cập AMP và không phải AMP.

Việc sử dụng một thuộc tính riêng biệt để đo lường lưu lượng truy cập AMP cho phép phân tích các chỉ số tốt hơn và có bức tranh chính xác hơn về lưu lượng truy cập của bạn. Nếu bạn cần sử dụng một thuộc tính để đo lường cả lưu lượng truy cập AMP và không phải AMP, hãy sử dụng thứ nguyên nguồn dữ liệu hoặc thứ nguyên tùy chỉnh để phân biệt chúng.

Theo mặc định, Google Analytics sẽ gửi giá trị " AMP " qua thứ nguyên nguồn dữ liệu. Sử dụng giá trị này để phân đoạn, lọc hoặc phân tích nội dung AMP và không phải AMP trong một chế độ xem .

Gỡ lỗi cấu hình của bạn

Trình xác thực AMP có thể được sử dụng để xác định xem một trang web có đáp ứng thông số kỹ thuật HTML AMP hay không. Thêm #development=1vào URL của một trang để bật trình xác thực.

Các amp-analyticsphần mở rộng cung cấp thông điệp cảnh báo và lỗi để giúp gỡ lỗi và khắc phục sự cố một cấu hình. Thêm #log=1vào URL của một trang để xem các thông báo lỗi đã ghi trong bảng điều khiển của trình duyệt web của bạn.

Hoàn thành ví dụ

Ví dụ này minh họa 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 lượt xem trang chuẩn và các sự kiện " nhấp vào nút " 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>

Tài nguyên liên quan

• AMP: Dự án AMP
• AMP: AMP là gì?
• AMP: amp-analytics
• gtag.js: Sử dụng gtag.js với AMP
• Trung tâm trợ giúp Google Analytics: Trang trên thiết bị di động được tăng tốc (AMP)

Facebook Google Twitter More

• Pinterest
• Linkedin
• Tumblr

Posted by : Phạm Văn Hiếu tháng 2 15, 2021 Tags : Google Analytics

Subscribe by Email

Follow Updates Articles from This Blog via Email