Google Analytics trên trang AMP

Google Analytics trên trang AMP

Bạn đã bao giờ sử dụng AMP cho webiste Opencart chưa. Nếu chưa hãy đọc phần hướng dẫn của Google Dev trước khi mình hướng dẫn trên Opencart nhé

Bài này mình hướng dẫn khi bạn đang sử dụng theme có tích hợp AMP, để kiểm tra website của bạn có AMP không thì cài exten AMP Validator vào chorme nhé

Bây giờ là các bước hướng dẫn trên tất cả các version của Opencart

Bước 1: Chèn scrip amp trước </header>

đường dẫn: http://temien.com/catalog/view/theme/default/template/common/header.twig

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



Bước 2: Chèn mã hỗ trợ amp trước thẻ </body>

đường dẫn:  http://temien.com/catalog/view/theme/default/template/common/footer.twig
<amp-analytics type="gtag" data-credentials="include">
<script type="application/json">
{
 
"vars" : {
   
"gtag_id": "<GA_TRACKING_ID>",
   
"config" : {
     
"<GA_TRACKING_ID>": { "groups": "default" }
   
}
 
}
}
</script>
</amp-analytics>

Ghi chú: <GA_TRACKING_ID> là mã Google Analytics của website. Ví dụ: UA-45446xxx-1


Sau đó các bạn xóa cache website và cache trình duyệt đi nhé !!!

Mẫu trang AMP chứa Google Analytics:
<!doctype html>
<htmllang="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_TRACKING_ID>",
           
"config": {
             
"<GA_TRACKING_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>

Chúc thành công !!!

Đăng bởi : Doan Nguyen Google Analytics trên trang AMP Đánh giá: 9.1 / 10

0 Nhận xét
NEWSLETTER

Nhập email của bạn để nhận cập nhật mẫu mới qua Email

Blog