Як Astrina вписується в налаштування сайту
Astrina — це той інструмент, який додаєш один раз, а потім постійно перевіряєш. Він допомагає сайту надсилати дані про відвідування та події в одну панель керування, щоб ви бачили, чи справді сторінки, теги й кампанії працюють як треба. Якщо ви керуєте кількома сайтами, це швидко стає важливим. Для ширшого погляду на структуру акаунта та робочий процес дивіться кожен сайт, який ви ведете.
Перш ніж торкатися коду, переконайтеся, що є 2 речі: доступ до глобального шаблону сайту та доступ до акаунта Astrina. Якщо сайт працює на CMS, у tag manager або на кастомній збірці, комусь потрібні права на редагування header чи footer. Немає доступу — немає встановлення. Звучить очевидно, але саме це найчастіше затягує процес, коли ви розбираєтеся, як додати Astrina на сайт крок за кроком. Саме тому важливо планувати встановлення Astrina на сайт заздалегідь.
Спочатку доступ до панелі керування мають мати лише кілька людей. Дайте його власнику, розробнику або маркетологу, який відповідає за звітність, а не всім співробітникам. Невелика зміна зараз може зберегти вас від хаотичного прибирання потім, особливо якщо хтось вставить не той фрагмент коду не в той шаблон. Одного неправильного вставлення вже достатньо.
Крок 1: Скопіюйте скрипт відстеження Astrina
Почніть у панелі Astrina й знайдіть розділ відстеження для свого сайту. Знайдіть скрипт, який Astrina згенерувала для вашого ресурсу, і скопіюйте його точно так, як показано. Без редагування. Без обрізання. Без “прибирання”. Це перша частина того, як додати Astrina на сайт крок за кроком.
Якщо скрипт містить site ID або account ID, залишайте кожен символ на місці. Розробник може захотіти вбудувати код у вже наявний bundle або прибрати перенос рядків, але це погана звичка, якщо тільки підтримка Astrina не скаже інакше. Якщо фрагмент буде хибним хоча б на один символ, сайт може й далі завантажуватися, але відстеження тихо зламається. Це найгірший тип збою.
Використовуйте кнопку копіювання в браузері, якщо вона є. Якщо копіюєте вручну, перевірте відкривальні й закривальні теги, лапки та будь-які data attributes. Найбезпечніша звичка проста: спочатку вставте у звичайний текстовий редактор, а потім перенесіть на сайт. Дві копії, одна перевірка.
Крок 2: Встановіть скрипт відстеження на ваш сайт
Головна ідея — встановити скрипт відстеження в глобальному місці, щоб він завантажувався на кожній сторінці. На більшості сайтів це означає спільний header, footer, base layout або контейнер tag manager, який спрацьовує для всього сайту. Якщо він потрапить лише на головну сторінку, дані виглядатимуть чистими, але будуть неправильними. Саме тому цей крок так важливий у тому, як додати Astrina на сайт крок за кроком.
Ось базовий процес:
- Відкрийте шаблон сайту або tag manager.
- Знайдіть глобальну область, яка використовується всіма сторінками.
- Вставте скрипт Astrina в затверджене місце.
- Збережіть зміни.
- Опублікуйте сайт або контейнер.
Різні платформи називають цю область по-різному. У WordPress це може бути theme header або вставка через плагін. У Shopify часто використовуються файли теми. У Webflow може бути project-wide custom code. На кастомному сайті це може бути layout-файл у app shell. Назва змінюється — логіка ні. Один спільний шаблон, одне встановлення.
Якщо ви користуєтеся tag manager, переконайтеся, що тег спрацьовує на всіх сторінках, а не лише на одному route. Для single-page app потрібна додаткова уважність, бо перше завантаження і подальші зміни маршруту — це не одне й те саме. У такій конфігурації скрипту може знадобитися спеціальний event hook. Це не те, що варто вгадувати в продакшені.
Для агенцій і команд, які працюють з кількома доменами, корисно тримати чеклист поруч із встановленням. Центральний огляд, як-от кожен сайт клієнта в одній панелі, може зменшити дублювання роботи, але лише якщо кожен сайт отримає свій правильний фрагмент коду. Одна панель не виправить погану вставку.
Крок 3: Додайте один тег перед закриттям body
На багатьох сайтах найзручніше місце для того, щоб додати один тег перед закриттям body, — це безпосередньо над тегом </body>. Astrina часто добре працює саме там, тому що контент сторінки та основний макет завантажуються першими, а потім скрипт запускається ближче до кінця документа. Це може допомогти, коли інші скрипти вже “змагаються” за увагу. Порядок має значення.
Практичний варіант такий. Відкрийте шаблон сторінки, прокрутіть донизу та знайдіть закривальний тег body. Розмістіть фрагмент Astrina прямо перед ним, не в якомусь випадковому блоці контенту й не в полі, яке є лише в 1 шаблоні. Правильне місце зазвичай — це спільний footer або глобальний файл макета. Саме це мають на увазі багато людей, коли питають, як додати Astrina на сайт крок за кроком.
Це розташування рекомендують, щоб сторінка спочатку відрендерилася, а трекер завантажився після того, як основний HTML уже на місці. Якщо ви працюєте в CMS-редакторі, переконайтеся, що поле, яке ви використали, застосовується до всього сайту, а не лише до одного типу сторінок. Фрагмент у неправильному полі може виглядати нормально в preview і зникнути після публікації. Таке трапляється частіше, ніж люди готові визнати.
Щоб підтвердити розміщення, перегляньте вихідний код сторінки в браузері та знайдіть фрагмент Astrina. Ви маєте побачити його ближче до кінця документа, безпосередньо перед </body>. Якщо бачите його двічі — зупиніться й виправте. Дублікати тегів можуть спотворити підрахунки та поведінку подій. Два теги — це не бонус.
Крок 4: Опублікуйте, оновіть і перевірте встановлення
Після того як код додано, збережіть шаблон і опублікуйте зміни. Потім оновіть сторінку в звичайному вікні браузера, а не лише в preview редактора. Якщо сайт кешується, один раз зробіть жорстке оновлення, щоб не оцінювати стару копію сторінки.
Тепер перевірте панель Astrina на наявність візиту, події або live signal, якщо продукт це показує. Деякі системи відображають дані за секунди; іншим потрібно більше часу. Якщо нічого не з’являється, переконайтеся, що фрагмент є на live site, а не лише в чернетці. Чернетки — це ввічливі брехуни.
Базове усунення проблем виглядає так: відкрийте інструменти розробника, знайдіть запит скрипта і перевірте, чи він завантажується, чи блокується. Content Security Policy, ad blocker або плагін оптимізації сайту можуть зупинити запит. Якщо в консолі браузера є помилка, скопіюйте повідомлення, перш ніж робити щось інше. Одне повідомлення про помилку цінніше за п’ять здогадок.
Якщо ви порівнюєте плани або вирішуєте, хто має зберігати доступ після запуску, деталі ціни Astrina можуть знадобитися пізніше; поки що головне — щоб встановлення працювало на live URL. Зосередьтеся на одному результаті: сайт надсилає дані або ні. Жодного проміжного стану.
Крок 5: Протестуйте ключові сторінки та підтвердьте потік даних
Не зупиняйтеся на головній сторінці. Відкрийте щонайменше 3 важливі внутрішні сторінки, наприклад сторінку продукту, сторінку контакту та блог-пост або сторінку категорії. Якщо сайт використовує кілька шаблонів, кожен шаблон має завантажувати Astrina однаково. Одна працююча сторінка ще нічого не доводить. Три сторінки дають більше впевненості й практично завершують процес того, як додати Astrina на сайт крок за кроком.
Перевірте сайт на десктопі й мобільному. Деякі команди тестують лише на ноутбуці й пропускають скрипт, який не працює в mobile-only layout або в кешованому app shell. Якщо головна сторінка відстежується, а сторінка продукту — ні, проблема зазвичай у конкретному шаблоні. Саме тоді треба перевіряти спільний layout, а не редактор контенту.
Шукайте стабільність потоку даних між оновленнями, новими сесіями та різними браузерами, якщо можливо. Хороший набір тестів простий: Chrome на десктопі, Safari або мобільний браузер на телефоні та одне приватне вікно. Якщо всі 3 реєструють візити або події, встановлення поводиться нормально в типових умовах.
Для команд, які також дбають про SEO та сторінки ранжування, може бути корисно порівняти відстежувані сторінки з важливими сторінками у вашому контент-плані. Сторінки astrina можуть існувати поруч із роботою над відстеженням, коли ви хочете прив’язати звітність до продуктивності сайту, а не лише до відвідувань. Суть у тому, щоб підтвердити: сторінки, які для вас важливі, — це саме ті сторінки, які бачить Astrina.
Поширені проблеми під час додавання Astrina на сайт
Дублікати скриптів швидко створюють плутанину. Якщо фрагмент є і в header, і у footer, або і в tag manager, і в жорстко вбудованому шаблоні, ви можете побачити подвоєні візити чи дубльовані події. Приберіть одну копію й перевірте ще раз. Один скрипт, один шлях для сайту.
Кешування — це наступний типовий підозрюваний. Site cache, CDN cache або browser cache можуть залишати старий код активним після публікації. Очистьте всі 3, якщо можете, а потім перезавантажте сторінку. Якщо плагін кешу переписує скрипти, перевірте, чи не затримує він і не об’єднує код Astrina так, що той ламається.
Помилки розміщення в CMS теж трапляються. Хтось вставляє скрипт у поле blog post, у widget конструктора сторінок або в шаблон, який використовується лише на одній сторінці. Це працює, поки ви не відкриєте решту сайту й не побачите, що даних взагалі немає. Виправлення нудне: перенесіть скрипт у спільний layout або глобальне налаштування. Нудно — це добре.
Заблоковані скрипти — ще одна поширена проблема. Розширення браузера, інструменти згоди, правила firewall і політики content security можуть зупинити завантаження Astrina. Якщо бачите заблокований запит, протестуйте в чистому профілі браузера та на іншому пристрої. Одне розширення може зробити так, ніби зламалося все встановлення. Люди й справді люблять додаткові блокувальники.
Якщо після перевірки фрагмента, шаблону, кешу та браузера встановлення все ще не з’являється, зверніться в підтримку з точним URL сторінки, місцем розміщення коду та скриншотом source. Це дасть підтримці Astrina щось конкретне для перевірки замість розмитого “не працює”. Конкретика завжди краща за загальні слова. Якщо вам потрібно допомогти вирішити, чи варто після встановлення стежити за alerts або щоденними дайджестами, дивіться чи варто обирати аналітичні сповіщення.
Остання перевірка: переконайтеся, що версія сайту в продакшені — та сама, яку ви редагували. Команди іноді тестують на staging, а потім публікують іншу гілку або тему й дивуються, чому дані зникли. Перевірте live URL, live template і live source. Три місця, одна відповідь.
