在你的網站中顯示 Google Analytics 資料

Created: November-22, 2018

本文件介紹瞭如何獲取 Google Access 令牌並使用它們將 Google Analytics 資料顯示在我們的網站中。

示例：可以使用例項

https://newtonjoshua.com

注意：對以下所有步驟使用相同的 Gmail 帳戶。

第 1 步：設定 Google Analytics

請按照以下步驟在你的網站中設定 Google Analytics

登入你的 Google Analytics 帳戶。
選擇管理選項卡。
從 ACCOUNT 列的下拉選單中選擇一個帳戶。
從 PROPERTY 列的下拉選單中選擇一個屬性。
在 PROPERTY 下，單擊跟蹤資訊>跟蹤程式碼
要收集資料，你必須將 Google Analytics 跟蹤程式碼複製並貼上到你要跟蹤的每個網頁的原始碼中。
獲得屬性的 Javascript 跟蹤程式碼段後，請完全複製程式碼段而不進行編輯。
在你要跟蹤的網站上的每個網頁上的結束標記之前貼上跟蹤程式碼段（未完整更改）。
成功安裝 Google Analytics 跟蹤後，最多可能需要 24 小時才能在報告中顯示流量引薦資訊，使用者特徵和瀏覽資訊等資料

參考，

第 2 步：獲取令牌

Google 專案：

要建立 Google Cloud Platform 專案，請開啟 Google Developers Console（ https://console.developers.google.com ），然後單擊“ 建立專案”。

啟用 OAuth 2.0 API 訪問許可權：

你的應用需要訪問使用者資料並代表你與其他 Google 服務聯絡。使用 OAuth 2.0 授予你的應用 API 訪問許可權。

要啟用它，你需要一個客戶端 ID：

開啟 Google API 控制檯憑據頁面（ https://console.developers.google.com/apis/credentials）。
從專案下拉選單中，選擇你的專案。
選擇“ *建立憑據”，*然後選擇“ OAuth 客戶端 ID” 。
在應用程式型別下，選擇 Web 應用程式，輸入名稱和
通過輸入 JavaScript 來源設定限制，重定向 URI 以指向你計劃顯示資料的網站，然後單擊建立。
記下 OAuth 2.0 client_id 和 client_secret 。你將需要它們來配置 UI。

獲取授權碼：

在瀏覽器中輸入

https://accounts.google.com/o/oauth2/auth?scope=https://www.googleapis.com/auth/analytics.readonly&response_type=code&client_id= {{client_id}}＆redirect_uri = {{redirect_uri}}＆approval_prompt =力＆ACCESS_TYPE =離線

你將被重定向到

{{redirect_uri}}？code == {{ authorization_code }}#

獲取重新整理令牌：

傳送 POST 請求，可能通過 REST 控制檯傳送

https://www.googleapis.com/oauth2/v3/token?code= {{authorization_code}}＆client_id = {{client_id}} ＆client_secret = {{client_secret}} ＆redirect_uri = {{redirect_uri}} ＆grant_type = authorization_code

你將獲得 JSON 響應

{“refresh_token”： refresh_token }

你可以使用重新整理程式碼來獲取訪問令牌以訪問 Google API

獲取訪問令牌：

傳送 POST 請求，

https://www.googleapis.com/oauth2/v3/token?client_id= {{client_id}} ＆client_secret = {{client_id}} ＆grant_type = refresh_token＆refresh_token = {{refresh_token}}

你將在響應中獲得帶有 access_token 的 JSON。

{access_token： {{access_token}} }

例：

 var access_token = '';
function getAccessToken(){
    $.post('https://www.googleapis.com/oauth2/v3/token', {
            client_id: {{client_id}},
            client_secret: {{client_secret}},
            grant_type: 'refresh_token',
            refresh_token: {{refresh_token}}
        }, function (data, status) {
            if (status === 'success') {
                access_token = data.access_token;
                // Do something eith the access_token
            } else {
                console.error(status);
            }
        });
}

檢查令牌有效性：

傳送 POST 請求，

https://www.googleapis.com/oauth2/v1/tokeninfo?access_token= {{access_token}}

例：

function checkValidity() {
    $.post('https://www.googleapis.com/oauth2/v1/tokeninfo', {
            access_token:{{access_token}}
        }).done(function (data, status) {
            if (status === 'success') {
                console.debug(data.expires_in);
                var check = false;
                check = data.hasOwnProperty('expires_in');
                if (check) {
                    // Token is valid
                }
                if (!check) {
                    getAccessToken();
                }
            } else {
                console.debug(status);
            }

        })
        .fail(function (data) {
            console.error(data);
            getAccessToken();
        });
}

第 3 步：獲取資料

嵌入 API：

GA Embed API 是一個 JavaScript 庫，可讓你在幾分鐘內輕鬆地在你的網站上建立和嵌入 GA 儀表板。

請參閱 https://developers.google.com/analytics/devguides/reporting/embed/v1/getting-started

查詢資源管理器： 訪問嵌入 API 查詢資源管理器並進行授權

https://ga-dev-tools.appspot.com/query-explorer/

選擇要獲取資料的檢視。

選擇所需的指標和維度。

例：

獲取國家/地區資料（我想知道從每個國家訪問我的網站的使用者數量）

要獲取該資料，請選擇指標為使用者，將維度選為“國家/地區”

單擊“ 執行查詢”

你將在表格中找到查詢的分析資料。

複製 API 查詢 URI 。並將 access_token = {{access_token}}新增到 uri

例：

https://www.googleapis.com/analytics/v3/data/ga?ids= {{ids}}＆start-date = 2015-07-01＆end-date = today＆metrics = ga％3Ausers＆dimensions = ga％3A country ＆access_token = { {}的 access_token}

將 POST 請求傳送到 URI 以在瀏覽器中獲取資料。

例：

function gaGetCountry() {
    $.get('https://www.googleapis.com/analytics/v3/data/ga?' +
        'ids={{ids}}' +
        'start-date=2015-07-01&' +
        'end-date=today&' +
        'metrics=ga%3Ausers&' +
        'dimensions=ga%3Acountry&' +
        'sort=ga%3Ausers&' +
        'filters=ga%3Ausers%3E10&' +
        'max-results=50' +
        '&access_token=' + {{access_token}},
        function (data, status) {
            if (status === 'success') {

                // Display the Data
                drawRegionsMap(data.rows);

            } else {
                console.debug(status);
            }

        });
}

第 4 步：顯示資料

現在我們收集了資料。最後，我們必須在我們的網站上顯示它們。

在你的網站上顯示實時資料是 Google Charts 的標題。這就是我們要做的。

請參閱 https://developers.google.com/chart/

以下示例將在 div 中繪製帶有 id =‘countryChart’ 的 GeoChart

 //Draw country Chart
 function drawRegionsMap(data) {

        var head = data[0];
        head[0] = 'Country';
        head[1] = 'Users';
        for (var i = 1; i < data.length; i++) {
            var d = data[i];
            d[1] = Number(d[1]);
        }

        var chartData = google.visualization.arrayToDataTable(data);
        var options = {
            title: 'My Website is viewed from,',
            domain: '{{Country Code eg: IN for India}}',
            tooltip: {
                textStyle: {
                    color: 'navy'
                },
                showColorCode: true
            },
            legend: {
                textStyle: {
                    color: 'navy',
                    fontSize: 12
                }
            },
            colorAxis: {
                colors: ['#00FFFF', '#0000FF']
            }
        };
    
        var chart = new google.visualization.GeoChart(document.getElementById('countryChart'));
    
        chart.draw(chartData, options); 
}

請參閱 https://newtonjoshua.com 以檢視上述操作中的 exple。