Аналитический инструмент «Золотой час контента»
Материал из Поле цифровой дидактики
📊 Аналитика «Золотого часа контента»
Автор: Федышина София
Группа: АДЭУ-221
Дисциплина: Работа с API социальных сетей и визуализация данных
Статус проекта: Выполнен
📘 Введение
Цель проекта — разработать инструмент для анализа публикаций в VK и определения оптимального времени для постинга, чтобы максимизировать вовлеченность аудитории. Проект использует API VK для получения статистики по последним постам сообщества и визуализирует пики активности аудитории через графики.
🎯 Цели проекта
- Определение «золотого часа» публикаций в VK для максимальной вовлеченности.
- Сбор данных о лайках, комментариях и репостах последних постов.
- Визуализация данных с помощью различных типов графиков для наглядности.
- Автоматическая генерация рекомендаций по времени публикаций.
🛠 Архитектура и блок-схема проекта
Проект состоит из backend и frontend. Backend обрабатывает данные VK API, а frontend визуализирует графики и рекомендации.
Ввод домена VK пользователем
Запрос к VK API (Backend)
Сбор лайков, комментариев и репостов
Вычисление вовлеченности (Engagement)
Визуализация графиков и рекомендации (Frontend)
🗂 Структура проекта
файл .env - содержит токен
frontend/index.html:
<code>
<!DOCTYPE html>
<html lang="ru">
<head>
<meta charset="UTF-8">
<title>Аналитика "Золотого часа"</title>
<script src="https://cdn.jsdelivr.net/npm/chart.js"></script>
<style>
body {
font-family: 'Segoe UI', sans-serif;
background: #0f172a;
color: white;
margin: 0;
padding: 20px;
}
h1 {
text-align: center;
margin-bottom: 30px;
}
.controls {
text-align: center;
margin-bottom: 20px;
}
input, button {
padding: 12px;
border-radius: 10px;
border: none;
margin: 5px;
}
button {
background: #2563eb;
color: white;
cursor: pointer;
}
.ai-box {
margin: 20px auto;
padding: 20px;
background: #1e293b;
border-radius: 15px;
text-align: center;
}
.charts {
display: grid;
grid-template-columns: 1fr 1fr;
gap: 20px;
margin-top: 20px;
}
canvas {
background: #1e293b;
padding: 15px;
border-radius: 15px;
}
</style>
</head>
<body>
<h1>📊 Аналитика "Золотого часа контента"</h1>
<div class="controls">
<input id="group" placeholder="Введите домен VK (например: kosti_bloggers)">
<button onclick="loadData()">Анализировать</button>
</div>
<!-- Блок рекомендаций -->
<div class="ai-box">
<h3>Рекомендации</h3>
<p id="aiText">Здесь появятся рекомендации...</p>
</div>
<div class="charts">
<canvas id="engagementChart"></canvas>
<canvas id="multiChart"></canvas>
<canvas id="areaChart"></canvas>
<canvas id="polarChart"></canvas>
</div>
<script>
let charts = [];
function destroyCharts() {
charts.forEach(c => c.destroy());
charts = [];
}
function generateAI(bestHour, engagement) {
const max = Math.max(...engagement);
const avg = engagement.reduce((a, b) => a + b, 0) / engagement.length;
const diff = ((max / avg - 1) * 100).toFixed(0);
return `Рекомендуем публиковать посты примерно в ${bestHour}:00. В этот час вовлеченность выше средней на ${diff}%. Это оптимальное время для максимального охвата аудитории.`;
}
async function loadData() {
const group = document.getElementById("group").value;
if (!group) return alert("Введите домен VK!");
try {
const res = await fetch(`http://127.0.0.1:8000/analyze?domain=${group}`);
const data = await res.json();
const hours = data.data.map(d => d.hour);
const engagement = data.data.map(d => d.engagement);
const likes = data.data.map(d => d.likes);
const comments = data.data.map(d => d.comments);
const reposts = data.data.map(d => d.reposts);
destroyCharts();
const maxVal = Math.max(...engagement);
// 1. Столбчатая диаграмма (главный график)
charts.push(new Chart(document.getElementById("engagementChart"), {
type: 'bar',
data: {
labels: hours,
datasets: [{
label: 'Вовлеченность',
data: engagement,
backgroundColor: engagement.map(v => v === maxVal ? '#FFD700' : '#3b82f6')
}]
}
}));
// 2. Много-линейный график
charts.push(new Chart(document.getElementById("multiChart"), {
type: 'line',
data: {
labels: hours,
datasets: [
{ label: 'Лайки', data: likes, borderColor: '#3b82f6', tension: 0.4 },
{ label: 'Комментарии', data: comments, borderColor: '#16a34a', tension: 0.4 },
{ label: 'Репосты', data: reposts, borderColor: '#f97316', tension: 0.4 }
]
}
}));
// 3. Area chart
charts.push(new Chart(document.getElementById("areaChart"), {
type: 'line',
data: {
labels: hours,
datasets: [
{ label: 'Лайки', data: likes, fill: true, backgroundColor: 'rgba(59,130,246,0.3)', borderColor: '#3b82f6' },
{ label: 'Комментарии', data: comments, fill: true, backgroundColor: 'rgba(22,163,52,0.3)', borderColor: '#16a34a' },
{ label: 'Репосты', data: reposts, fill: true, backgroundColor: 'rgba(249,115,22,0.3)', borderColor: '#f97316' }
]
}
}));
// 4. Polar chart
charts.push(new Chart(document.getElementById("polarChart"), {
type: 'polarArea',
data: {
labels: hours,
datasets: [{
label: 'Распределение активности',
data: engagement,
backgroundColor: engagement.map(v => `hsl(${Math.random()*360}, 70%, 50%)`)
}]
}
}));
document.getElementById("aiText").innerText = generateAI(data.best_hour, engagement);
} catch (error) {
alert("Ошибка при загрузке данных. Проверьте сервер и домен.");
console.error(error);
}
}
</script>
</body>
</html>
</code>
📊 Описание визуализации
- Первичная страница
- Рекомендации
- Столбчатая диаграмма (Engagement) — пики вовлеченности по часам публикации, золотым выделен максимальный час.
- Много-линейный график — динамика лайков, комментариев и репостов.
📌 Выводы
- Проект позволяет определить «золотой час» публикаций в VK.
- Вовлеченность оценивается комплексно: лайки, комментарии и репосты.
- Визуализация нескольких графиков делает анализ наглядным и информативным.<
- Проект можно расширить heatmap и AI-моделями для прогнозирования оптимального времени публикаций.
