Зміст

4519

Як PPC-фахівцю самостійно встановити код події на сайт: інструкція

18.06.2021

10 хвилин

hard

Олександр Михайленко

ex php backend developer

Встановлення скрипта аналітики, GTM або ремаркетингу – звична справа в роботі PPC-фахівця. Але часто завдання по встановленню коду доводиться передавати розробникам. І ось тут з’ясовується, що якоїсь речі не вистачає: чи доступи до сайту не такі, або не повні права адміністратора, або просто не маєте доступу до коду. Все це іноді перетворює 10-хвилинне завдання в годинний розгляд.

Щоб уникнути подібних моментів, ми вивели для себе невеликий сценарій роботи. Вийшов гайд для PPC-фахівців з установки деяких кодів на сайт самостійно, без програміста.

Налаштування цілей на стороні Google Analytics ми вже розбирали. Тут же розглянемо зміна коду на сайті. Ось наш план:

  • визначення системи сайту;
  • отримання доступу (паролі, посилання);
  • перевірка доступу на наявність потрібних прав;
  • формування ТЗ для розробника, шаблони кодів;
  • установка і перевірка.

Визначення CMS сайту

Почнемо з головного – визначення платформи управління вмістом. Це може бути CMS-система, конструктор сайтів або ж сайт-платформа (Shopify, Prom.ua). Крім того, сайт може бути зроблений на фреймворку або бути звичайною html-сторінкою.

Щоб «на око» визначити систему, потрібно бути досить досвідченим розробником, але зараз існує маса сервісів для визначення системи сайту онлайн. Наш вибір – whatcms.org: у нього хороша база систем; в 98% випадках він виручає.

Для перевірки впишіть домен на головній:

Визначення CMS сайту
Визначення CMS сайту

Коли ви точно визначили систему систему, на якій зроблений сайт, можна рухатися далі.

Доступи до сайту

Наступний пункт – це отримання доступу до сайту для встановлення коду події самостійно. Залежно від того, на чому і як зроблена система, вам можуть знадобитися:

  • доступи до адмін панелі сайту (Dashboard);
  • доступи FTP до сайту;
  • доступи SSH до сайту;
  • доступи до хостингу (панель управління сайтом).

З досвіду наших фахівців, 95% відсотків сайтів зроблені на CMS або ж платформі-конструкторі. Тобто скрізь є адмін-панель в тому чи іншому вигляді, а в них часто є вбудований механізм редагування вихідного коду або спеціального модулю (плагін, надбудова, компонент) для редагування / вставки коду. У такому випадку для самостійного встановлення коду події на сайт без програміста потрібен тільки доступ (логін і пароль) в адмін-панель.

Важливий нюанс! Вам знадобиться дозвіл з правами на доступ до редактора коду.

Іноді адміністратори сайту видають обмежені доступи для фахівців: без права редагування розділів сайту, коду, визначених сторінок. Але цього може бути недостатньо для установки своїх кодів Google Analytics!

Серед великої кількості систем ми не можемо перерахувати всі і вказати, як повинні виглядати потрібні вам права доступу для установки коду або який пункт меню має бути видно вам. Але ми склали невеликий топ для найпоширеніших систем серед наших клієнтів.

Для системи WordPress пункт редагування коду для установки події на сайт самому наступний:

Пункт редагування для WordPress
Пункт редагування для WordPress

Або ж ви можете скористатися плагіном Insert headers ans footers. Плагін дозволить вам встановлювати потрібні коди Google Analytics і не тільки на сайт навіть без доступу до редактора.

Для системи OpenCart:

Пункт редагування для OpenCart
Пункт редагування для OpenCart

Для системи Shopify такий пункт редагування коду для роботи з кодом події для РРС:

Пункт редагування для Shopify
Пункт редагування для Shopify

Для системи WIX:

Пункт редагування для WIX
Пункт редактирования для WIX

Для системи Tilda:

Пункт редагування для Tilda

Приблизно так повинна виглядати админка для зміни коду.

Бувають окремі випадки, коли доступ є, але код все одно не редагується, але на то вони і приватні, щоб розбирати кожну таку ситуацію окремо.

Як встановити код події

Після того, як у нас є логін і пароль і вони відповідають потрібному рівню доступу, пора подбати про ТЗ, а саме, про документ, в якому будуть представлені всі необхідні коди для установки. Що дуже важливо, коди повинні бути в правильному форматі.

Відносно установки коду аналітики, ремаркетингу та GTM ми не буде докладно розбирати ситуації, так як все, що необхідно там зробити – це скопіювати і вставити код в потрібний блок сайту (head, body). Більш детально розберемо установку коду цілей на сайті, так як там існує дуже багато варіацій на тему того, коли і як саме повинна спрацьовувати відправка мети. Для початку визначимося з подіями, які можуть виникати на сторінці.

Подія – це сигнал від браузера про те, що щось сталося. Існує багато видів подій. Подивимося список часто використовуваних, поки просто для ознайомлення.

З точки зору розробника, на одній сторінці може відбуватися більше 10 різних видів події, тому при формуванні ТЗ потрібно чітко розуміти, який саме тип подій потрібен вам, і коли саме має відбуватися відправка мети. Ось невеликий список популярних подій, які можуть відбуватися всередині HTML-сторінки.

Події миші:

  • click – кликнули на елемент лівою кнопкою миші;
  • contextmenu – кликнули на елемент правою кнопкою миші;
  • mouseover – на елемент наводиться мишка;
  • mousedown і mouseup – кнопку миші натиснули або віджали;
  • mousemove – при русі миші.

Події на елементах управління:

  • submit – відвідувач відправив форму;
  • focus – відвідувач фокусується на елементі, наприклад натискає на щось.

Клавіатурні події:

  • keydown – відвідувач натискає кнопку;
  • keyup – відвідувач відпускає клавішу.

Події документа:

  • DOMContentLoaded – коли HTML завантажений і оброблений, DOM документа повністю побудований і доступний.

Як бачите, подій існує чимало, але все-таки в 95% випадків PPC-фахівця цікавлять натискання (тобто кліки) і успішні відправки форми (сабміта).

Тепер можемо перейти до технічної складової – способу установки коду відстеження самостійно і без програміста!

Важливий нюанс – це формування самого коду. Так як зараз існує два види установки аналітики: варіант з GA або ж варіант GTAG.

Код відстеження для них має суттєві відмінності.

Приклад налаштування коду цілей для формату GTAG

Відправлення подій

Для відправки подій зі сторінки, на яку доданий код відстеження, використовуйте наступні налаштування команди event:

  • 1 – рядок, який вказується в звітах Google Analytics як дія за подією;

  • 2 – категорія події;

  • 3 – ярлик події;

  • 4 – цінність події, виражена цілим невід’ємним числом.

    Примітка: категорію, ярлик і цінність вказувати необов’язково.

Приклад нижче активує подію Google Analytics з дією xyz, категорією за замовчуванням general і ярликом за замовчуванням (not set).

Вы можете переопределить значения по умолчанию, задав в коде собственные. Пример ниже активирует событие Google Analytics с действием aaa, категорией по умолчанию bbb и ярлыком по умолчанию ccc.

Події Google Analytics за замовчуванням

Як правило, вам необхідно використовувати події Google Analytics за замовчуванням, для яких вже задані категорії і ярлики. Це забезпечує однаковість даних в звітах і підтримку нових функцій в майбутньому.

Приклад нижче активує подію Google Analytics з дією login, категорією за замовчуванням engagement і ярликом за замовчуванням Google.

У таблиці нижче перераховані категорії і ярлики для подій за замовчуванням. Для подій, яких немає в списку, наприклад для створених вами, за замовчуванням вказується категорія engagement і ярлик not set.

Назва події

Категорія за замовчуванням

Ярлик за замовчуванням

add_payment_info

ecommerce

 

add_to_cart

ecommerce

 

add_to_wishlist

ecommerce

 

begin_checkout

ecommerce

 

checkout_progress

ecommerce

 

generate_lead

engagement

 

login

engagement

method

purchase

ecommerce

 

refund

ecommerce

 

remove_from_cart

ecommerce

 

search

engagement

search_term

select_content

engagement

content_type

set_checkout_option

ecommerce

 

share

engagement

method

sign_up

engagement

method

view_item

engagement

 

view_item_list

engagement

 

view_promotion

engagement

 

view_search_results

engagement

search_term

Відправлення подій без взаємодії

Можна надіслати подію, яка не є взаємодією, задайте для параметра non_interaction значення true. Для прикладу: це може бути автоматичне відтворення відео на сайті. Коли людина заходить, наприклад, на 1-2 екран, у нього починає грати відео на сайті.

Інструкція по налаштуванню коду цілей для формату GA (якщо аналітика встановлена в старому форматі)

Інформацію про події можна відправляти за допомогою команди send, вказавши для поля hitType значення event. Команда send має наступну сигнатуру для типу event:

Поля типу звернення event

Поля цього типу звернення наводяться в таблиці нижче.

Назва поляТип значенняОбовязковоОпис
eventCategoryТекстТакЗазвичай це об’єкт, з яким взаємодіяв користувач (наприклад, ‘Video’)
eventActionТекстТакТип взаємодії (наприклад, ‘play’)
eventLabelТекстНіПоле, в якому можна вказувати категорію події (наприклад, ‘Fall Campaign’)
eventValueЦіле числоНіЧисельне значення, пов’язане з подією (наприклад, 42)

Ось, як на практиці це виглядає.

Наведена нижче команда відправляє подія в Google Analytics і повідомляє про те, що був показаний рекламний ролик з кампанії Fall Campaign.

Увага! Поля, що передаються у допоміжних параметрах, можуть бути також вказані в fieldsObject (як і у випадку з іншими командами send).

Зазначену вище команду можна записати в розширеному форматі:

Як постійні відвідувачі за вихідними посиланнями і відправку сторонніх форм

Коли користувач переходить по внутрішнім посиланням на іншу сторінку вашого сайту, ця сторінка зазвичай відправляє звернення pageview. Оскільки такі запити при навігації по сайту відправляються послідовно, Google Analytics може відстежувати звідки і куди перейшов користувач. Однак якщо відвідувач перейшов по вихідним посиланням або відправив форму на зовнішній домен, така дія не можна відстежити, якщо ви не повідомите Google Analytics, що сталося.

Відстеження переходів по вихідним посиланнях і відправки сторонніх форм ускладнюється відправкою подій і зазначенням цільового URL в одному з полів події. Дані про переходи за вихідними посиланнями і про відправку сторонніх форм можна відправляти в Google Analytics за допомогою наступної функції обробки подій:

Відстеження вихідних посилань і зовнішніх форм ускладнюється тим, що більшість браузерів припиняють виконання JavaScript на поточній сторінці, якщо почнеться завантаження нової сторінки. Одне з можливих рішень цієї проблеми – привласнити полю transport значення beacon:

Якщо ж браузер не підтримує такий метод, перехід на наступну сторінку відкладається, поки не закінчиться відправка даних про подію.

Події без взаємодії

У деяких випадках буває необхідно відправити подію без взаємодії. Для цього в об’єкті fieldsObject команди send надайте полю nonInteraction значення true:

Ось власне користуючись однією з цих інструкцій, ви можете скласти готові ділянки коду для впровадження на сайт.

Після встановлення цілей потрібно перевірити їх працездатність, для цього ми порадимо інструмент, яким частіше користуються розробники, так як він дає більш розгорнуту інформацію.

Це спеціальне розширення для Google Chrome Google Analytics Deburger.

Розширення Google Analytics Debugger
Розширення Google Analytics Debuggers Debugger

З його допомогою можна подивитися всі деталі, які були відправлені. Ось приклад роботи з цим розширенням.

пример работы с расширением
Приклад роботи з розширенням

Нас цікавить наступний параметр:

параметри події
Параметри події

Підкреслений рядок – це і є подія, мета для Google Аналітики, яку ми фіксуємо. Якщо ви не бачите параметрів, а замість цього написана фраза «Unknow» – значить, мета не створена (або не активована) на стороні Goole Analytics. Якщо ж рядок має такий вигляд, то мета відправляється успішно.

Важливий момент! Що робити, якщо все налаштовано вірно, а мета не фіксуються ?!

  1. Переконайтеся, що ви не тестируете сайт в режимі Інкогніто. В цьому режимі Аналітика може не працювати.
  2. Переконайтеся, що в словах, які вказані в коді і аналітиці, немає російських букв. Наприклад в слові «Click» дуже легко не помітити такої ситуації.

Також ми рекомендуємо вам встановити редактор коду, який дозволить більш точно і правильно складати код для цілей з дотриманням синтаксису. Редактори які які ми рекомендуємо:

sublimetext.com/3
notepad-plus-plus.org
code.visualstudio.com/Download

Досить одного редактора.

Сподіваємося, що цей гайд стане в нагоді вам і допоможе оперативно вирішувати питання з установкою кодів навіть коли поруч немає програміста.

Невелика пам’ятка (завантажувати і расшарівать для колег):

Невелика пам'ятка
Понравилась статья? Оцените ее:
1 Star2 Stars3 Stars4 Stars5 Stars
Loading...
Олександр Михайленко

ex php backend developer

Ex-пінгвін. Раніше активно займався розробкою інтернет-магазинів, створенням продуктів, API сервісів. Додатково займався викладання курсу php для новачків протягом 1,5 року.

Ми використовуємо куки, щоб зробити Penguin-team зручніше і корисніше для вас

Минимум слов. Максимум дела.

В одном письме в месяц

  • Только важные новости
  • Самые свежие статьи
  • Актуальные вакансии

В версии 3.0.0

  • новые сервисы: Ubersuggest (NeilPatel), Spyfu и другие;
  • автосохранение списка минус-слов в рабочей области;
  • авторизация для хранения данных в аккаунте;
  • списки типовых минус-слов;
  • возможность хранить пользовательские списки минус-слова в расширении для дальнейшего применения в аккаунте;
  • англоязычный и русскоязычный интерфейс.

Основные комбинации

  • LeftMouseClick для добавления слова, повторное нажатие - для удаления
  • LeftALT + LeftMouseClick - для сбора фраз
  • LeftALT + S - для поиска слов

In version 3.0.0

  • new services: Ubersuggest (NeilPatel), Spyfu and others;
  • autosave of a negative keywords list in the workspace;
  • authorization for storing data in the account;
  • generic negative keyword lists;
  • the ability to store custom lists of negative keywords in the extension for further use in your account;
  • English and Russian interface.

Key combinations

  • LeftMouseClick to add a word, press again - to delete
  • LeftALT + LeftMouseClick - to collect phrases
  • LeftALT + S - for words searching

В версии 2.0

  • 2 режима выдачи ключевых слов:
  • быстрая выдача - аналогична выдаче Google Planner, но найденные результаты включают каждое слово из введенной в поиск фразы;
  • полная выдача - расширенная выдача, которая включает поиск по дополнительным релевантным фразам, но найденные результаты также включают каждое слово из введенной в поиск фразы.
  • Обновленный файл выгрузки ключевых слов Excel:
  • выгрузка локаций в удобном формате для загрузки в Editor;
  • обновленный шаблон для создания объявлений.
  • Полный список локаций.
  • Группировка отчетов по проектам.
  • Устранена ошибка с задержкой в 30 секунд.
  • Новые фильтры для получения релевантной выдачи.
  • Копирование минус-слов.

In version 2.0:

  • 2 modes of keywords search result:
  • quick search result - is similar to one of Google Planner , but the results found include every word of the phrase entered in the search;
  • full search result - extended search result that includes search on additional relevant phrases, but the results found also include every word of the phrase entered in the search.
  • Updated Exces Keyword Upload File:
  • uploading of locations in a convenient format for uploading to Editor;
  • updated template for creating ads.
  • Full list of locations.
  • Grouping of reports on the projects.
  • Fixed an error with a delay of 30 seconds.
  • New filters for getting relevant search results.
  • Copying of negative keywords.

Кілька кроків до роботи в Penguin-team

1 Заповніть форму
2Додайте резюме
3Пройдіть тест
1.Кліків 259, показів 3 515. Чому дорівнює CTR?
2.Відвідувань на сайті 874, конверсій 16. Чому дорівнює коефіцієнт конверсії?
3.Що таке СРА?
4.CTR 4,03%, кліків 240. Чому дорівнює число показів оголошення?
5.Витрат 20 158, конверсій 63. Чому дорівнює вартість конверсії?

Кілька кроків до роботи в Penguin

Заповніть форму

Прикрепите резюме: