Google Analytics嵌入API问题

时间:2015-08-21 03:04:11

标签: javascript google-analytics google-analytics-api gapi

我在我的网站上创建了一个显示我的Google分析报告的页面。实际上我刚刚修改了一些这个演示https://ga-dev-tools.appspot.com/embed-api/custom-components/

它运行良好,但是当我有太多的表格和图表的某些维度和指标时,一些表格和数据不会出现。有没有人知道如何解决这个问题,或者有人知道如何以不同的方式获取所有数据?

这是我的代码

gapi.analytics.ready(function() {

// authorize google account
gapi.analytics.auth.authorize({
    container: 'embed-api-auth-container',
    clientid: 'xxxxxxxxxxxxxxxxxxxxxxx.apps.googleusercontent.com'
});

// view selector
var viewSelector = new gapi.analytics.ViewSelector({
    container: 'view-selector-container'
});

viewSelector.execute();

// date range
var dateRange = {
    'start-date': '7daysAgo',
    'end-date': 'yesterday'
};

// date range selector
var dateRangeSelector = new gapi.analytics.ext.DateRangeSelector({
    container: 'date-range-selector-container'
})
.set(dateRange)
.execute();

// configuration for line chart
var chart1Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:date'
    },
    chart: {
      type: 'LINE',
      options: {
        width: '100%'
      }
    }
};

// configuration for operation system
var chart2Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:operatingSystem',
      sort: '-ga:sessions',
      'max-results': '10'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

var chart3Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:operatingSystem, ga:operatingSystemVersion',
      sort: '-ga:sessions',
      'max-results': '15'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// config for browser
var chart4Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:browser',
      sort: '-ga:sessions',
      'max-results': '10'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

var chart5Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:browser, ga:browserVersion',
      sort: '-ga:sessions',
      'max-results': '15'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// mobile
var chart6Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:mobileDeviceBranding',
      sort: '-ga:sessions',
      'max-results': '10'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

var chart7Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:mobileDeviceBranding, ga:mobileDeviceModel',
      sort: '-ga:sessions',
      'max-results': '15'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// audience
var chart8Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:userAgeBracket',
      sort: '-ga:sessions'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

var chart9Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:userGender',
      sort: '-ga:sessions'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// Pageviews
var chart10Config = {
    query: {
      metrics: 'ga:pageviews, ga:uniquePageviews, ga:timeOnPage',
      dimensions: 'ga:pagePath, ga:pageTitle',
      sort: '-ga:pageviews',
      'max-results': '20'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// traffic sources
var chart11Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:fullReferrer',
      sort: '-ga:sessions',
      'max-results': '15'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

var chart12Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:keyword',
      sort: '-ga:sessions',
      'max-results': '15'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// geo network
var chart13Config = {
    query: {
      metrics: 'ga:sessions',
      dimensions: 'ga:networkLocation',
      sort: '-ga:sessions',
      'max-results': '10'
    },
    chart: {
      type: 'TABLE',
      options: {
        width: '100%'
      }
    }
};

// graph user
var chart14Config = {
    query: {
      metrics: 'ga:users',
      dimensions: 'ga:userType',
      sort: '-ga:users'
    },
    chart: {
      type: 'PIE',
      options: {
        width: '100%'
      }
    }
};

// chart 1
var dataChart = new gapi.analytics.googleCharts.DataChart(chart1Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container'}});

// chart 2 (Operation System)
var dataChart2 = new gapi.analytics.googleCharts.DataChart(chart2Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-2'}});

var dataChart3 = new gapi.analytics.googleCharts.DataChart(chart3Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-3'}});

var dataChart4 = new gapi.analytics.googleCharts.DataChart(chart4Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-4'}});

var dataChart5 = new gapi.analytics.googleCharts.DataChart(chart5Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-5'}});

var dataChart6 = new gapi.analytics.googleCharts.DataChart(chart6Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-6'}});

var dataChart7 = new gapi.analytics.googleCharts.DataChart(chart7Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-7'}});

var dataChart8 = new gapi.analytics.googleCharts.DataChart(chart8Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-8'}});

var dataChart9 = new gapi.analytics.googleCharts.DataChart(chart9Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-9'}});

var dataChart10 = new gapi.analytics.googleCharts.DataChart(chart10Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-10'}});

var dataChart11 = new gapi.analytics.googleCharts.DataChart(chart11Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-11'}});
var dataChart12 = new gapi.analytics.googleCharts.DataChart(chart12Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-12'}});

var dataChart13 = new gapi.analytics.googleCharts.DataChart(chart13Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-13'}});

var dataChart14 = new gapi.analytics.googleCharts.DataChart(chart14Config)
    .set({query: dateRange})
    .set({chart: {container: 'chart-container-user'}});

// date range selector
dateRangeSelector.on('change', function(data) {
    dataChart.set({query: data}).execute();
    dataChart2.set({query: data}).execute();
    dataChart3.set({query: data}).execute();
    dataChart4.set({query: data}).execute();
    dataChart5.set({query: data}).execute();
    dataChart6.set({query: data}).execute();
    dataChart7.set({query: data}).execute();
    dataChart8.set({query: data}).execute();
    dataChart9.set({query: data}).execute();
    dataChart10.set({query: data}).execute();
    dataChart11.set({query: data}).execute();
    dataChart12.set({query: data}).execute();
    dataChart13.set({query: data}).execute();
    dataChart14.set({query: data}).execute();

    var datefield = document.getElementById('from-dates');
    datefield.innerHTML = data['start-date'] + '—' + data['end-date'];
});

// render chart every view changed
viewSelector.on('change', function(ids) {
    dataChart.set({query: {ids: ids}}).execute();
    dataChart2.set({query: {ids: ids}}).execute();
    dataChart3.set({query: {ids: ids}}).execute();
    dataChart4.set({query: {ids: ids}}).execute();
    dataChart5.set({query: {ids: ids}}).execute();
    dataChart6.set({query: {ids: ids}}).execute();
    dataChart7.set({query: {ids: ids}}).execute();
    dataChart8.set({query: {ids: ids}}).execute();
    dataChart9.set({query: {ids: ids}}).execute();
    dataChart10.set({query: {ids: ids}}).execute();
    dataChart11.set({query: {ids: ids}}).execute();
    dataChart12.set({query: {ids: ids}}).execute();
    dataChart13.set({query: {ids: ids}}).execute();
    dataChart14.set({query: {ids: ids}}).execute();
});


});

有没有办法检索所有请求的数据,直到页面完全加载,然后显示它们?

0 个答案:

没有答案