Tích hợp Api Google Analytics vào trang Admin để xem các thống kê cơ bản và thuận tiện
google api
2
Google Analytics
1
White

Võ Nhật Nam viết ngày 28/12/2016

Việc tích hợp Google Analytic vào trang quản trị giúp việc quản lý và xem các thống kê và lượng truy cập, người dùng và hành vi trở nên dễ dàng và nhanh chóng.

Nó hoạt động như thế nào

Bạn có thể tạo các bản demo trên bằng cách sao chép và dán đoạn mã sau vào một tập tin HTML đang chạy trên một máy chủ web. Hãy để thêm CSS để trang web trở nên đẹp và bắt mắt hơn.

Nếu bạn muốn biết nhiều hơn, hãy kiểm tra các tài liệu API vào trang web của nhà phát triển.

Bước 1: Gắn javascript api vào

<script>
(function(w,d,s,g,js,fs){
  g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(f){this.q.push(f);}};
  js=d.createElement(s);fs=d.getElementsByTagName(s)[0];
  js.src='https://apis.google.com/js/platform.js';
  fs.parentNode.insertBefore(js,fs);js.onload=function(){g.load('analytics');};
}(window,document,'script'));
</script>

Bước 2: Thêm HTML để lưu trữ các thành phần bảng điều khiển

<div id="embed-api-auth-container"></div>
<div id="chart-container"></div>
<div id="view-selector-container"></div>

Bước 3: Viết mã cho giao diện bảng điều khiển

Bạn cần kích hoạt Analytics API và thay giá trị clientid trong đoạn javascript bên dưới. Bạn có thể tham khảo việc tạo và kích hoạt một Api của google và cách lấy ClientId xem bài viết Hướng dẫn cấu hình sử dụng Youtube Api với .Net

<script>

gapi.analytics.ready(function() {

  /**
   * Authorize the user immediately if the user has already granted access.
   * If no access has been created, render an authorize button inside the
   * element with the ID "embed-api-auth-container".
   */
  gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'REPLACE WITH YOUR CLIENT ID'
  });

  /**
   * Create a new ViewSelector instance to be rendered inside of an
   * element with the id "view-selector-container".
   */
  var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector-container'
  });

  // Render the view selector to the page.
  viewSelector.execute();

  /**
   * Create a new DataChart instance with the given query parameters
   * and Google chart options. It will be rendered inside an element
   * with the id "chart-container".
   */
  var dataChart = new gapi.analytics.googleCharts.DataChart({
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:date',
      'start-date': '30daysAgo',
      'end-date': 'yesterday'
    },
    chart: {
      container: 'chart-container',
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
  });

  /**
   * Render the dataChart on the page whenever a new view is selected.
   */
  viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: ids}}).execute();
  });

});
</script>

Xem bản demo

Bạn có thể tham khảo code tại đây. Lưu ý bạn phải có website đăng ký google analytic mới xem được nhé

Xem bản demo google analytic api

Ưu điểm

  • Giúp trang quản trị có xem đầy đủ các thông kê mà không cần phải vào web của google analytic
  • Viết bằng javascript nên có thể cài đặt ở các website: Asp.Net MVC, PHP, Java ...

Nhược điểm

  • Giới hạn số lượt request, 50.000 request cho một ngày
  • Để làm những tính năng lọc, tìm kiếm thì mất nhiều thời gian cho việc tìm hiểu và gắn code

Bài viết gốc: http://www.mastercode.vn/blog/web-development/tich-hop-api-google-analytics-vao-trang-admin-de-xem-cac-thong-ke-co-ban-va-thuan-tien.27

Bình luận


White
{{ comment.user.name }}
Bỏ hay Hay
{{comment.like_count}}
Male avatar
{{ comment_error }}
Hủy
   

Hiển thị thử

Chỉnh sửa

White

Võ Nhật Nam

8 bài viết.
5 người follow
Kipalog
{{userFollowed ? 'Following' : 'Follow'}}
Cùng một tác giả
White
8 3
Firebase là một nền tảng di động giúp bạn nhanh chóng phát triển các ứng dụng chất lượng cao, phát triển ứng dụng cho người dùng lớn, và kiếm được ...
Võ Nhật Nam viết 1 năm trước
8 3
White
4 0
Tìm hiểu Facebook Instant Articles là gì? Instant Articles là một trong những công cụ được Facebook xây dựng để khắc phục các vấn đề về tốc độ loa...
Võ Nhật Nam viết 1 năm trước
4 0
White
3 0
Trong bài viết này sẽ giới thiệu cách đăng ký sử dụng Youtube api cho phép upload một video, cho phép tạo playlist, tìm kiếm video Bước 1 : Truy c...
Võ Nhật Nam viết 1 năm trước
3 0
{{like_count}}

kipalog

{{ comment_count }}

bình luận

{{liked ? "Đã kipalog" : "Kipalog"}}


White
{{userFollowed ? 'Following' : 'Follow'}}
8 bài viết.
5 người follow

 Đầu mục bài viết

Vẫn còn nữa! x

Kipalog vẫn còn rất nhiều bài viết hay và chủ đề thú vị chờ bạn khám phá!