ОП.03 · ТЕМА 05
Какие скриншоты снять
43 кадра для 69 слайдов. «В теме» — номер экрана презентации. «Исходник» — номер 20–88 из авторского текста.
Сохраняйте PNG в 05-vercel-google-tag/shots/ под указанными именами. После обновления страницы кадры автоматически заменят заглушки. Для сайта оставьте адресную строку; для VS Code снимайте графический интерфейс.
Снимайте только учебные проекты. Личные данные скройте; Measurement ID можно оставить. Показатели Realtime и статусы Deployment должны быть настоящими.
| В теме | Исходник | Файл | Экран | Акцент |
|---|---|---|---|---|
| 04 | 23 | 23-shot.png | GitHub Шаблон репозитория | Название · файлы · README |
| 06 | 25 | 25-shot.png | GitHub Use this template | Create a new repository |
| 07 | 26 | 26-shot.png | GitHub Create repository | Owner · Repository name · Create |
| 08 | 27 | 27-shot.png | GitHub Своя копия проекта | Владелец в адресе репозитория |
| 09 | 28 | 28-shot.png | VS Code Clone Repository | Source Control · Clone Repository |
| 10 | 29 | 29-shot.png | VS Code GitHub repositories | Свой репозиторий · Open |
| 11 | 30 | 30-shot.png | VS Code Explorer | Дерево файлов · index.html |
| 12 | 31 | 31-shot.png | Браузер Локальный сайт | Адресная строка: localhost |
| 14 | 33 | 33-shot.png | Vercel Главная страница | Sign Up / Log In |
| 15 | 34 | 34-shot.png | Vercel Авторизация | Вход через GitHub |
| 17 | 36 | 36-shot.png | Vercel Dashboard | Add New → Project |
| 18 | 37 | 37-shot.png | Vercel Import Git Repository | Свой репозиторий · Import |
| 19 | 38 | 38-shot.png | Vercel Configure Project | Project Name |
| 20 | 39 | 39-shot.png | Vercel Framework Preset | Раскрытый список · Other |
| 21 | 40 | 40-shot.png | Vercel Build and Output Settings | Пустая Build Command |
| 22 | 41 | 41-shot.png | Vercel Root Directory | Корень репозитория |
| 23 | 42 | 42-shot.png | Vercel Первая публикация | Кнопка Deploy |
| 24 | 43 | 43-shot.png | Vercel Успешный Deployment | Ready · production-домен |
| 25 | 44 | 44-shot.png | Браузер Опубликованный сайт | Адресная строка: .vercel.app |
| 28 | 47 | 47-shot.png | GA4 Admin | Data streams |
| 29 | 48 | 48-shot.png | GA4 Data streams | Учебный поток с bytecamp.ru |
| 30 | 49 | 49-shot.png | GA4 Web stream details | Значок Edit / карандаш |
| 31 | 50 | 50-shot.png | GA4 Edit Web Stream | Новый Website URL · HTTPS |
| 32 | 51 | 51-shot.png | GA4 Edit Web Stream | Обновлённый Stream name |
| 33 | 52 | 52-shot.png | GA4 Edit Web Stream | Кнопка Update stream |
| 34 | 53 | 53-shot.png | GA4 Web stream details | Новый URL · прежний Measurement ID |
| 37 | 56 | 56-shot.png | GA4 Google tag | View tag instructions |
| 38 | 57 | 57-shot.png | GA4 Installation instructions | Install manually |
| 39 | 58 | 58-shot.png | GA4 Код Google Tag | Весь код · кнопка Copy |
| 40 | 59 | 59-shot.png | VS Code index.html | Открывающий <head> |
| 41 | 60 | 60-shot.png | VS Code Google Tag вставлен | Весь блок после <head> |
| 42 | 61 | 61-shot.png | VS Code Три HTML-страницы | index · about · contacts |
| 44 | 63 | 63-shot.png | VS Code Source Control | Три изменённых HTML-файла |
| 45 | 64 | 64-shot.png | VS Code Commit | Add GA4 Google tag · Sync / Push |
| 47 | 66 | 66-shot.png | Vercel Deployments | Новый commit · Ready · Production |
| 48 | 67 | 67-shot.png | Браузер Новая Production-версия | Постоянный .vercel.app URL |
| 49 | 68 | 68-shot.png | GA4 Test your website | Полный URL · Test |
| 51 | 70 | 70-shot.png | Браузер Посещение учебного сайта | Навигация Home / About / Contacts |
| 53 | 72 | 72-shot.png | GA4 Reports | Realtime |
| 54 | 73 | 73-shot.png | GA4 Realtime | Active users |
| 55 | 74 | 74-shot.png | GA4 Realtime: страницы | Home · About · Contacts |
| 56 | 75 | 75-shot.png | GA4 Realtime: события | page_view |
| 58 | 77 | 77-shot.png | Браузер Тестовый UTM-переход | Полная ссылка в адресной строке |
Схемы на остальных слайдах уже сделаны в HTML/CSS и не требуют скриншотов.