Cách thêm Analytics cho website mới nhất

Khi bạn kiểm tra website của bạn bằng PageSpeed Insights bị nó cảnh báo thì chắc chắn các bạn sẽ đi tìm cách khắc phục nó đúng không nào ? Hướng dẫn dưới đây của mình chắc chắn sẽ khắc phục được vấn đề đó:

Khi bạn tạo mới và chèn mã theo dõi Google Analytics cho website của bạn, Google sẽ cung cấp bạn một đoạn mã tương tự như mẫu dưới đây

  
      <!-- Global site tag (gtag.js) - Google Analytics -->
  <script async="" src="https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1"></script>
  <script>
    window.dataLayer = window.dataLayer || [];
    function gtag(){dataLayer.push(arguments);}
    gtag('js', new Date());
    gtag('config', 'UA-XXXXXXXXX-1');
  </script>
    
  

Google hướng dẫn chèn đoạn mã đó trước thẻ đóng </head>, nhưng thật ra bạn cũng có thể chèn mã dưới cùng trước thẻ đóng </body> cũng được. Tuy nhiên cho dù bạn chèn trước </head> hay trước </body> cũng đều gây ảnh hưởng đến thời gian tải trang.

Dành cho các nền tảng khác không phải Blogspot:

Các bạn chỉ cần dán đoạn Javascript này trước thẻ </body> là được nhé:

  
    
     <script>
      window.addEventListener('load', function() {
          var is_load = 0
          function loadanalytics() {
              if (is_load == 0) {
                  is_load = 1
                  var an = document.createElement('script')
                  an.async = true;
                  an.src = 'https://www.googletagmanager.com/gtag/js?id=UA-XXXXXXXXX-1'
                  var sc = document.getElementsByTagName('script')[0]
                  sc.parentNode.insertBefore(an, sc);
                  window.dataLayer = window.dataLayer || [];
                  function gtag() {
                      dataLayer.push(arguments);
                  }
                  gtag('js', new Date());
                  gtag('config', 'UA-XXXXXXXXX-1');
              }
          }
          window.addEventListener('scroll', function() {
              loadanalytics()
          })
      })
  </script>
    
  

Lưu ý: Đoạn bôi đỏ là mã theo dõi của Analytics mà bạn được Google cung cấp ở trên !

Dành cho nền tảng Blogspot

Mặc định trong template, Blogger cũng cung cấp sẵn thẻ dữ liệu mặc định Google Analytics, thẻ này có tên:

  
      <b:include data='blog' name='google-analytics'/>
    
  

Nếu bạn kiểm tra trong template đã có sẵn thẻ này, bạn chỉ cần lấy ID theo dõi và chèn nó trong Cài đặt > Khác > Google Analytics > ID thuộc tính web Analytics

Để không làm ảnh hưởng đến hiệu suất trang, sau khi bạn đã chèn ID thuộc tính web Analytics trong cài đặt, bạn vào chỉnh sửa chủ đề tìm thẻ dữ liệu Google Analytics và xóa nó đi, xong bạn chèn lại mã trước thẻ đóng </body> như sau:

  
      <b:if cond='data:blog.analyticsAccountNumber'>
    <script>
      var analyticsAccountNumber="<data:blog.analyticsAccountNumber/>"
    //<![CDATA[
      var fired=false
      window.addEventListener('scroll',function(){
        if((document.documentElement.scrollTop!=0&&fired===false)||(document.body.scrollTop!=0&&fired===false)){
          (function(){
            var an=document.createElement('script')
            an.async=true;an.src='https://www.googletagmanager.com/gtag/js?id='+analyticsAccountNumber
            var sc=document.getElementsByTagName('script')[0]
            sc.parentNode.insertBefore(an,sc)
          })();
          window.dataLayer=window.dataLayer||[]
          function gtag(){dataLayer.push(arguments)}
          gtag('js', new Date())
          gtag('config',analyticsAccountNumber)
          fired=true
        }
      },true)
    //]]></script>
  </b:if>
    
  

Sử dụng phương pháp scroll chặn tải script ngay khi trang tải, chỉ khi nào người dùng scroll mới bắt đầu load script. Ngoài ra nếu bạn để trống ID thuộc tính web Analytics trong cài đặt đoạn script sẽ không được tải.