Обзор
Этот документ проведет вас через полный пример использования API внедрения. После завершения у вас будет приложение, которое выглядит следующим образом.
Создание простой информационной панели
Вы можете запустить пример приложения на своем сервере, выполнив следующие два простых шага:
- Создайте новый идентификатор клиента
- Скопируйте и вставьте код
После того, как вы запустите это приложение, в следующем разделе будет подробно объяснено, как все его части сочетаются друг с другом.
Создайте новый идентификатор клиента
Embed API выполняет за вас практически весь процесс авторизации, предоставляя компонент входа в систему одним щелчком мыши, который использует знакомый поток OAuth 2.0 . Чтобы эта кнопка работала на вашей странице, вам понадобится идентификатор клиента.
Если вы никогда не создавали идентификатор клиента, вы можете сделать это, следуя этим инструкциям.
Проходя инструкции, важно не упускать из виду эти два важных шага:
- Включите API аналитики
- Установите правильное происхождение
Источники контролируют, каким доменам разрешено использовать этот код для авторизации пользователей. Это не позволит другим людям скопировать ваш код и запустить его на своем сайте.
Например, если ваш веб-сайт размещен в домене example.com, обязательно установите следующий источник для вашего идентификатора клиента http://example.com . Если вы хотите протестировать свой код локально, вам также необходимо добавить источник вашего локального сервера, например: http://localhost:8080 .
Скопируйте и вставьте код
Как только у вас будет идентификатор клиента с правильным источником происхождения, вы готовы создать демо-версию. Просто скопируйте и вставьте следующий код в HTML-файл на вашем сервере, подключив свой идентификатор клиента, где написано: «Вставьте свой идентификатор клиента здесь».
<!DOCTYPE html>
<html>
<head>
<title>Embed API Demo</title>
</head>
<body>
<!-- Step 1: Create the containing elements. -->
<section id="auth-button"></section>
<section id="view-selector"></section>
<section id="timeline"></section>
<!-- Step 2: Load the library. -->
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
<script>
gapi.analytics.ready(function() {
// Step 3: Authorize the user.
var CLIENT_ID = 'Insert your client ID here';
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
// Step 4: Create the view selector.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
// Step 5: Create the timeline chart.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
// Step 6: Hook up the components to work together.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
});
</script>
</body>
</html>
Пошаговое руководство по коду
В этом разделе шаг за шагом объясняется, что именно происходит в коде примера приложения. Как только вы поймете, как это работает, вы сможете создать свой собственный.
Шаг 1. Создайте контейнеры компонентов.
Большинство компонентов Embed API визуализируют что-то на вашей странице. Вы контролируете расположение этих компонентов путем создания для них контейнеров. В примере приложения у нас есть кнопка авторизации, селектор представления и диаграмма. Каждый из этих компонентов отображается внутри следующих элементов HTML:
<section id="auth-button"></section> <section id="view-selector"></section> <section id="timeline"></section>
При создании компонента вы указываете ему, какой контейнер использовать, с помощью атрибута ID, как вы увидите в последующих примерах.
Шаг 2. Загрузите библиотеку
API внедрения можно загрузить с помощью следующего фрагмента.
<script>
(function(w,d,s,g,js,fjs){
g=w.gapi||(w.gapi={});g.analytics={q:[],ready:function(cb){this.q.push(cb)}};
js=d.createElement(s);fjs=d.getElementsByTagName(s)[0];
js.src='https://apis.google.com/js/platform.js';
fjs.parentNode.insertBefore(js,fjs);js.onload=function(){g.load('analytics')};
}(window,document,'script'));
</script>
Когда библиотека полностью загружена, будут вызваны все обратные вызовы, переданные gapi.analytics.ready .
<script>
gapi.analytics.ready(function() {
// Put your application code here...
});
</script>
Шаг 3. Авторизуйте пользователя.
API-интерфейс Embed выполняет за вас практически весь процесс авторизации, предоставляя компонент входа в систему одним щелчком мыши, который использует знакомый поток OAuth 2.0. Чтобы эта кнопка работала на вашей странице, вам необходимо передать ссылку на контейнер и идентификатор клиента .
gapi.analytics.auth.authorize({
container: 'auth-button',
clientid: CLIENT_ID,
});
Это создаст кнопку внутри элемента с идентификатором «auth-button», которая позаботится о процессе авторизации за вас.
Шаг 4. Создайте селектор представлений
Компонент выбора представления можно использовать для получения идентификаторов определенного представления, чтобы вы могли запустить для него отчет.
Чтобы создать селектор представления, все, что вам нужно, — это ссылка на контейнер, созданная на шаге 1.
var viewSelector = new gapi.analytics.ViewSelector({
container: 'view-selector'
});
При этом создается компонент выбора представления, но он еще не отображает его на странице. Для этого вам нужно вызвать execute() , который обрабатывается на шаге 6 .
Шаг 5. Создайте временную диаграмму.
API внедрения предоставляет вам компонент диаграммы, который одновременно является диаграммой Google и объектом отчета. Это значительно упрощает процесс отображения данных, поскольку объект диаграммы будет незаметно запускать ваши отчеты и автоматически обновлять результаты.
Чтобы создать компонент диаграммы, вам необходимо указать параметры запроса API, а также параметры диаграммы. В параметрах диаграммы есть ссылка на идентификатор контейнера, который вы создали на шаге 1.
var timeline = new gapi.analytics.googleCharts.DataChart({
reportType: 'ga',
query: {
'dimensions': 'ga:date',
'metrics': 'ga:sessions',
'start-date': '30daysAgo',
'end-date': 'yesterday',
},
chart: {
type: 'LINE',
container: 'timeline'
}
});
Как и в случае с селектором представления, при этом создается компонент диаграммы, но для его отображения на странице вам необходимо вызвать execute() , который будет объяснен на следующем шаге.
Шаг 6. Соедините компоненты для совместной работы
Встраиваемые компоненты API генерируют события, когда происходят различные события, например успешная авторизация, выбор нового представления или полная визуализация диаграммы.
Пример приложения в этом руководстве ожидает визуализации селектора представлений до тех пор, пока не произойдет авторизация, и обновляет диаграмму временной шкалы всякий раз, когда в селекторе представлений выбирается новое представление.
gapi.analytics.auth.on('success', function(response) {
viewSelector.execute();
});
viewSelector.on('change', function(ids) {
var newIds = {
query: {
ids: ids
}
}
timeline.set(newIds).execute();
});
Полный список всех событий, которые генерируют различные компоненты, можно найти в справочнике по API .
Следующие шаги
В этом руководстве рассказывается, как создать базовую визуализацию с помощью Embed API. Если вы хотите узнать больше, ознакомьтесь со справочником по API , чтобы получить полное представление о возможностях.