Як підключити Astrina до сайту на WordPress
1. Що таке Astrina і що знадобиться для підключення
Astrina — це платформа аналітики та моніторингу сайтів, яку підключають до WordPress заради віджетів, сценаріїв, форм або внутрішніх даних. Для старту зазвичай потрібні два набори доступів: вхід в адмінку WordPress і доступ до акаунта Astrina. Без них розмови про налаштування швидко заходять у глухий кут.
Перед тим як розбирати, як підключити Astrina до сайту на WordPress, перевірте, хто у вас має права адміністратора. Потрібні не лише логін і пароль, а й доступ до редагування теми, встановлення плагінів і, якщо підете ручним шляхом, до файлів шаблону або до панелі хостингу. Іноді вистачає одного акаунта в WordPress. Іноді ні.
Підключення буває двох типів: через плагін і вручну через код. Перший шлях зручніший, якщо в Astrina є офіційний модуль або сумісний плагін. Другий підходить для проєктів, де розробник не хоче зайвих плагінів, а код вставляє сам у header, footer або через functions.php. На практиці це питання не смаку, а контролю.
Якщо на сайті вже стоїть складна зв’язка з WooCommerce, мультимовністю та кешем, краще заздалегідь зрозуміти, хто за що відповідає. А якщо у вас ще й безпека сайту налаштована поверх базового рівня, не чіпайте зайвого без копії. Один бекап економить години.
Корисно одразу зібрати 4 речі: адресу сайту, адресу пошти адміністратора, токен або API-ключ Astrina, а також доступ до налаштувань кешу. Зазвичай цього вистачає, щоб не бігати по команді посеред роботи. Так, бувають винятки.
2. Перевірка сумісності сайту на WordPress
WordPress сам по собі рідко заважає інтеграції, але тема і плагіни люблять влаштовувати сюрпризи. Спочатку перевірте версію WordPress, версію PHP і те, чи не вимкнено в хостингу функції, потрібні для завантаження зовнішніх скриптів. Якщо сайт живе на старій збірці, краще оновити її до підключення, а не після помилки.
Тема має дозволяти вставку коду в потрібні області: header, footer, body або через хуки. Якщо тема закрита і не дає таких точок, інтеграція через плагін виглядає спокійніше. На чистому шаблоні все простіше. На сильно кастомному — вже ні.
Плагіни кешу й оптимізації нерідко зсувають або обрізають скрипти Astrina. Перевірте, чи є в проєкті Autoptimize, LiteSpeed Cache, WP Rocket або подібні інструменти. У деяких проєктів ламається лише один параметр — відкладене завантаження JS. В інших скрипт просто не доходить до браузера.
Якщо сайт використовує cookie-банер, Consent Mode або подібну логіку, скрипт Astrina може стартувати лише після згоди користувача. Для таких випадків корисно заздалегідь подивитися, що нового в cookie consent після оновлень Google. Інакше інтеграція технічно стоїть, а в звітах порожньо.
Мінімальний чекліст виглядає просто: WordPress оновлено, тема активна, кеш очищається, помилки в консолі браузера не заблоковані, а сервер не ріже зовнішні запити. Це п’ять пунктів. Не сім.
3. Отримання ключів, коду або налаштувань Astrina
У кабінеті Astrina зазвичай є розділ на кшталт Integrations, Sites, API або Code setup. Там шукають ідентифікатор проєкту, публічний ключ, приватний ключ, фрагмент скрипта або адресу endpoint. Назви можуть відрізнятися, але сенс один: WordPress має знати, до чого підключатися.
Спочатку відкрийте потрібний проєкт в Astrina. Потім знайдіть блок із параметрами підключення та скопіюйте код рівно так, як його видала система. Зайвий пробіл, випадковий символ або обрізаний URL ламають інтеграцію частіше, ніж хотілося б. Буквально одна лапка.
Якщо Astrina просить domain whitelist, додайте основний домен і, за потреби, www-версію або піддомен. Для тестового стенду краще створити окремий запис. Так ви не змішаєте бойовий сайт і чернетку. Це особливо корисно, коли розробник і контент-менеджер працюють паралельно.
Для деяких сценаріїв Astrina видає не лише скрипт, а й параметри для форми, події або callback. Їх зазвичай вставляють туди, де формується HTML-шаблон, або через налаштування плагіна. Якщо в панелі є кнопка Copy, використовуйте її. Ручний набір — погана ідея.
Хороша звичка — одразу зберегти всі ключі в захищеному менеджері паролів, а не в месенджері. Якщо проєкт великий, це пришвидшує передачу доступів між розробником, маркетологом і власником. І зменшує шанс, що токен піде не туди.
4. Установка і налаштування через плагін WordPress
Якщо для Astrina є плагін, почніть зі встановлення через адмінку WordPress: Плагіни → Додати новий → Завантажити плагін або пошук за назвою. Після активації відкрийте розділ налаштувань і знайдіть поля для ключа, ID проєкту, домену та режиму роботи. Зазвичай далі все доволі прямолінійно.
Вставляйте дані строго в ті поля, які описані в документації плагіна. Не копіюйте скрипт у поле для ключа і не вставляйте API-ключ туди, де чекають HTML. Плагін не вгадує наміри. Якщо є перемикач тестового режиму, почніть із нього. Це зменшить шанс публічної помилки.
Після збереження налаштувань оновіть сторінку сайту й відкрийте її в режимі інкогніто. Іноді плагін підключається лише для незалогінених користувачів, а іноді, навпаки, видно лише адміністратору. На перший погляд це дрібниця. Насправді — часта причина хибної тривоги.
Якщо плагін пропонує місце для вставки скрипта в header або footer, обирайте той варіант, який зазначено в документації Astrina. Побачили рекомендації щодо розміщення перед закривним тегом body — дотримуйтеся їх. Змішувати поради плагіна і власні здогадки не варто.
Коли проєкт уже використовує підтримку через підтримка сайту після запуску, підключення Astrina краще одразу включити в регламент змін. Тоді не доведеться гадати, хто і коли змінив налаштування. Один запис у журналі робіт вирішує багато суперечок.
5. Підключення вручну через код теми або вставку скрипта
Якщо плагіна немає, вручну підключають або через редактор теми, або через дочірню тему, або через блоки вставки коду в хедер і футер. Для WordPress краще не правити батьківську тему напряму, якщо сайт живий і оновлення приходять регулярно. Інакше наступне оновлення зітре все за хвилину.
Найбезпечніший шлях — дочірня тема. У ній підключають скрипт Astrina через functions.php, файл header.php або footer.php, залежно від інструкції. Якщо код має стояти на всіх сторінках, footer часто зручніший. Якщо він потрібен раніше, ставлять у head. Тут уже вирішує сценарій.
Типова схема виглядає так: копіюєте код Astrina з кабінету, вставляєте його в потрібне місце файлу, зберігаєте, очищаєте кеш і перевіряєте сайт у браузері. Не змінюйте сам скрипт без причини. Особливо не скорочуйте його, якщо в ньому є параметри домену або project ID.
Коли правите код вручну, тримайте поруч резервну копію файлу. Це не формальність. Якщо після вставки сайт іде в білий екран, відкат займає хвилини, а не вечір. Для проєкту із замовником це різниця між спокійним дзвінком і терміновим чатом.
Якщо ви сумніваєтеся, куди саме вставити код, краще відкрити документацію Astrina і звірити точку встановлення. У складних темах іноді є окремі хуки для header scripts і footer scripts. Їх використовують частіше, ніж пряме редагування файлів. Так менше шансів зачепити шаблонну верстку.
6. Перевірка роботи інтеграції на сайті
Після встановлення відкрийте головну сторінку, картку товару або форму, якщо Astrina зав’язана на конкретний сценарій. Потім оновіть сторінку з жорстким перезавантаженням і подивіться, чи з’явився віджет, код відстеження або очікуваний блок. Один клік F5 мало що скаже. Краще Ctrl+F5 або очищення кешу браузера.
Потім відкрийте інструменти розробника і перейдіть у Console та Network. Там видно, чи завантажився скрипт Astrina, чи немає 404, 403 або mixed content, а також чи не блокує запит розширення браузера або політика сайту. Якщо в консолі тихо, це добрий знак. Якщо ні — шукайте рядок помилки за назвою файла.
Перевірте результат не лише під адміністратором, а й як звичайний відвідувач. Деякі плагіни, особливо пов’язані з ролями користувачів, ховають скрипти для авторизованих. У такому разі тест під гостем дає чесну картину. І економить зайві здогадки.
Якщо в Astrina є форма, надішліть тестову заявку і подивіться, чи дійшла вона в кабінет або на пошту. Якщо це віджет, перевірте, чи не з’їхав він у мобільній версії на 360 px. Якщо це сценарій, переконайтеся, що він спрацьовує після потрібної дії, а не одразу під час завантаження сторінки.
| Що перевірити | Де дивитися | Що вважати проблемою |
|---|---|---|
| Завантаження скрипта Astrina | Network | 404, 403, timeout |
| Помилки JS | Console | Uncaught, blocked, undefined |
| Віджет або форма | Сторінка сайту | Немає блока, порожній контейнер |
| Надсилання тесту | Кабінет Astrina | Подія не надійшла |
7. Часті проблеми і як їх виправити
Найчастіша помилка — неправильний ключ або ID проєкту. Зазвичай це стається, коли в код потрапляє стара версія скрипта або дані беруть не з того акаунта Astrina. Перевірка проста: порівняйте параметри в кабінеті та на сайті символ у символ. Без скорочень.
Друга проблема — конфлікт плагінів. Кеш, мініфікація, захист від ботів та оптимізація JavaScript можуть прибрати або відкласти скрипт Astrina. Тимчасово вимкніть підозрілі плагіни по одному і тестуйте після кожного кроку. Так знаходять винуватця, а не сперечаються з ним.
Третя неприємність — блокування зовнішніх запитів на рівні сервера, CDN або CSP. Якщо в консолі видно, що скрипт не може завантажитися з домену Astrina, перевірте заголовки безпеки й правила доступу. Іноді винен Cloudflare, іноді модуль хостингу, іноді старий whitelist.
Ще один сценарій — кеш показує стару версію сторінки після правки коду. Спочатку очищають кеш сайту, потім кеш браузера, потім, за потреби, CDN. Порядок важливий. Якщо пропустити перший крок, ви дивитиметеся на вже неіснуючу проблему.
Іноді скрипт вставлений правильно, але тема WordPress не виводить потрібний хук на конкретній сторінці. Таке буває в лендінгах, шаблонах із кастомними полями та збірних сторінках. У цьому випадку простіше перейти на ручну вставку в шаблон або підключити Astrina через плагін, який уміє працювати глобально.
Якщо сайт зроблено на нестандартній архітектурі або з рідкісною приватною мережевою інфраструктурою, краще заздалегідь узгодити схему підключення з розробником. Коли проєкт складний, дрібна правка в одній точці може вплинути на кілька екранів. І це вже не про Astrina, а про весь стек.
8. Що робити після підключення
Після успішного старту не залишайте інтеграцію без уваги. Насамперед зафіксуйте, де зберігається ключ Astrina, хто має доступ до нього і що змінювати без погодження не можна. Для команди з 2–3 людей це вже економить час. Для більшої команди — ще більше.
Перевіряйте оновлення WordPress, плагінів і самої теми хоча б в одному регулярному вікні. Якщо на сайті йдуть часті релізи, підключення Astrina краще тестувати на staging-копії перед бойовим запуском. Так ви не ловите сюрпризи на відвідувачах. Сюрпризи там зазвичай зайві.
Якщо після підключення змінюється поведінка форм, аналітики або віджетів, додайте це до списку підтримки й контролю. Іноді корисно звірити інтеграція Astrina з WordPress з тим, платформа аналітики та моніторингу сайтів · як вона описана в робочому прикладі, щоб не гадати про роль конкретних блоків. На живому проєкті один рядок у регламенті дорожчий за довгий чат.
Безпека теж не закінчується на встановленні. Не передавайте токен у відкритих чатах, обмежуйте доступ до кабінету Astrina за ролями й змінюйте ключі після зміни підрядника. Якщо сайт редагує кілька людей, увімкніть журнал змін. Це нудно. Зате працює.
Коли потрібен зовнішній контроль, корисно вибудувати як оцінити надійність сайту перед замовленням ще до передачі доступу новим виконавцям. І якщо проєкт вимагає нестандартної схеми, порівняйте її з тим, як влаштована яка веб-студія потрібна стартапу на ранній, щоб не взяти зайвий ризик на старті.
Останній практичний крок — призначити відповідального за перевірку Astrina раз на 7 або 14 днів. Він дивиться консоль, тестує скрипт і стежить, чи не зник елемент після чергового оновлення WordPress. Ось тоді налаштування Astrina на сайті WordPress перестає бути разовим завданням і починає спокійно жити в проєкті. Саме так інтеграція Astrina з WordPress працює в довгу, а не лише в день запуску.
