Liên hệ quảng cáo
Liên hệ quảng cáo

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

Nội dung chính
      Bài đăng mới hơn Bài đăng cũ hơn
      0 Nhận xét