Как вывести статистику посещений/просмотров из Яндекс.Метрики в виде графика?

Привет, «Тостер»!

Задался я тут целью показывать статистику посещений и просмотров у себя на сайте, да ещё и в виде графика. Пока смотрю в сторону Я.Метрики, т.к. у них более дружелюбное АПИ (на мой взгляд — да, хотя я и только-только начинаю со всем этим работать).

Нашёл эту статью. Получил и создал всё необходимое для начала работы (токен, пароль и айди приложения).

График думаю выводить с помощью amCharts, но пока с ним не разбирался даже.

Застрял на этапе получения данных от Яндекс.Метрики. С горя и пришёл в «Тостер». Отлично понимаю задачу и могу её грамотно и внятно описать, а вот знаний для самостоятельно реализации, увы, не хватает (но я учусь, правда). А поскольку для меня тут это первый вопрос( был читателем), то сайт подсказывает, что все хотят подробностей. Поэтому и расписываю. Так вот.

Данные хочется забирать за интервал месяца. Но не календарного, а с текущей даты. Т.е. сегодня минус 30 дней.

Насколько понял, для amCharts необходим такой вид вывода, тем более, у меня будет 2 графика.

etc
{
	name: '22.04',
	visits: 52300,
	hits: 94800
},
{
	name: '23.04',
	visits: 52300,
	hits: 94800
}
etc


Ну и, собственно, вопрос: как это сделать/получить?

Для упрощения поиска ответов и всё-таки хоть какой-то экономии знающим людям ссылка на документацию АПИ Яндекс.Метрики.
  • Вопрос задан
  • 10707 просмотров
Решения вопроса 2
@n1ger
html+css
Сам не силен в этом всем, но делал на сайт вывод из метрики.
Сначала сделал файл metrika.php в него вогнал такой код
<?php
$today=date("Ymd");
$metrika_url = "http://api-metrika.yandex.ru/stat/traffic/summary.json?id=айди_вашего_счетчика&pretty=1&date1=Дата_начала_выборки_данных_со_счетчика&date2=$today&oauth_token=ваш токен";
$ch = curl_init();
curl_setopt($ch, CURLOPT_URL, $metrika_url);
curl_setopt ($ch, CURLOPT_RETURNTRANSFER, 1);
$metrika = curl_exec ($ch);
curl_close ($ch);

$metrika_o = json_decode($metrika);


header('Content-Type: application/json');
echo 'jsonCallback2('. $metrika . ')';


После создаем страничку куда будет выводить эти данные.

в яваскрипт пишем такое
<script type="text/javascript">
    var link2PHP = "путь_к_файлу/metrika.php";
    var datas2 = [];
    $.ajax ({
        type: "GET",
        url:link2PHP,
        dataType: "jsonp",
        async: false,
        contentType: "application/json",
        jsonp: "callback",
        jsonpCallback: 'jsonCallback2',
        contentType: "application/json",
        success: function(json) {
            $.each(json.data.reverse(), function (index,value){

                var obj2 = {


                    'date2': value.date,
                    'visits2': value.visits,
                    'visitors2': value.visitors

                };

                datas2.push(obj2);
                console.log(obj2)

            });
        },
        error: function (xhr, ajaxOptions, thrownError) {
            console.log(xhr.status);
            console.log(thrownError);
        }
    });


И после сами настройки для графика

var chart = AmCharts.makeChart("chartdiv", {
        "pathToImages": "путь к картинкам графика",
        "type": "serial",
        "theme": "light",
        language: "ru",
        "titles": [{
            "text": "Я.Метрика (Статистика посещений и посетителей)",
            "size": 15
        }],
        "legend": {
            "equalWidths": true,
            "useGraphSettings": true,
            "valueAlign": "right",
            "valueWidth": 120

        },
        "dataProvider":datas2,

        "valueAxes": [ {
            "id": "visitsAxis",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "labelsEnabled": false,
            "position": "left"
        }, {
            "id": "visitorsAxis",
            "axisAlpha": 0,
            "gridAlpha": 0,
            "inside": false,
            "position": "right",
            "title": "Количество"
        }],
        "graphs": [  {
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "balloonText": "Посетителей:[[value]]",

            "legendPeriodValueText": "Всего: [[value.sum]]",
            "legendValueText": "[[value]]",
            "title": "Посетителей",
            "fillAlphas": 0.6,
            "valueField": "visitors2",
            "valueAxis": "visitorsAxis"
        },
            {
            "balloonText": "Посещений:[[value]]",
            "bullet": "round",
            "bulletBorderAlpha": 1,
            "useLineColorForBulletBorder": true,
            "bulletColor": "#FFFFFF",
            "bulletSizeField": "townSize",
            "dashLengthField": "dashLength",

            "labelPosition": "right",
            "legendPeriodValueText": "Всего: [[value.sum]]",
            "legendValueText": "[[value]]",
            "title": "Посещений",
            "fillAlphas": 0,
            "valueField": "visits2",
            "valueAxis": "visitorsAxis"
        }],
        "chartScrollbar": {gridCount: 7,

            scrollbarHeight: 25,
            graphType: "line",
            usePeriod: "WW",
            backgroundColor: "#333",
            graphFillColor: "#666",
            graphFillAlpha: 0.5,
            gridColor: "#555",
            gridAlpha: 1,
            selectedBackgroundColor: "#444",
            selectedGraphFillAlpha: 1
        },
        "chartCursor": {
            "categoryBalloonDateFormat": "DD MMM",
            "cursorAlpha": 0.1,
            "cursorColor":"#000000",
            "fullWidth":true,
            "valueBalloonsEnabled": true,
            "zoomable": true
        },
        "dataDateFormat": "YYYYMMDD",
        "categoryField": "date2",
        "categoryAxis": {
            "dateFormats": [{
                "period": "DD",
                "format": "DD"
            }, {
                "period": "WW",
                "format": "MMM DD"
            }, {
                "period": "MM",
                "format": "MMM"
            }, {
                "period": "YYYY",
                "format": "YYYY"
            }],
            "parseDates": true,
            "minorGridEnabled": true,
            "gridCount":50,
            "autoGridCount": false,
            "axisColor": "#000",
            "gridAlpha": 0.2,
            "gridColor": "#000"

        },



        amExport: {
            top: -4,
            right: -6
        }


    });


Можно конечно всё расписать и объяснить - но я думаю сможете разобраться, что куда и к чему.

Ну и в теле самого файла создаем <div id=""chartdiv></div>
Куда собственно график будет выгружаться.
Ответ написан
@RJs45
В php части формируете необходимый url:
$id = your_counter_id;
$token = your_oauth_token;
$url = 'http://api-metrika.yandex.ru/stat/traffic/summary.json?id=' . $id . '&oauth_token=' . $token;
$url .= '&date1=' . date('Ymd', strtotime('-1 month')) . '$date2=' . date('Ymd');
// Делаете запрос и получаете json
$json = file_get_contents($url) // Либо через curl

Теперь у Вас есть json. Передаете его в js и там уже заполняйте из него данные для плагина графика. Конкретно, Вам нужен элемент data, а точнее:
data.visits = Визиты
data.page_views = Просмотры
data.visitors = Посетители.
В документации по api хорошо описано, что означает каждый элемент.
Ответ написан
Пригласить эксперта
Ответы на вопрос 1
@RJs45
По-моему, Вам нужен этот метод API: api.yandex.ru/metrika/doc/ref/stat/traffic-summary.xml
Получите красивый массив, который скормите amCharts
Ответ написан
Ваш ответ на вопрос

Войдите, чтобы написать ответ

Похожие вопросы