Как PPC-специалисту самостоятельно установить код события на сайт: инструкция

9.08.2018
Александр Михайленко
10 минут
Аналитика, Аналитика, Контекстная реклама, Разработка,
1912

Установка скрипта аналитики, GTM или ремаркетинга — привычное дело в работе PPC-специалиста. Но часто задачи по установке кода приходится передавать разработчикам. И вот тут выясняется, что какой-то вещи не хватает: или доступы к сайту не такие, или не полные права администратора, или попросту отсутствует доступ к коду. Все это иногда превращает 10-минутную задачу в часовое разбирательство.

Чтобы избежать подобных моментов, мы вывели для себя небольшой сценарий работы. Получился гайд для PPC-специалистов по установке некоторых кодов на сайт самостоятельно, без программиста.

Настройку целей на стороне Google Analytics мы уже разбирали. Здесь же рассмотрим изменение кода на сайте. Вот наш план: 

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

Определение CMS сайта

Начнем с главного — определения платформы управления содержимым. Это может быть CMS-система, конструктор сайтов или же сайт-платформа (Shopify, Prom.ua). Кроме того, сайт может быть сделан на фреймворке или быть обычной html-страницей. 

Чтобы «на глаз» определить систему, нужно быть довольно опытным разработчиком, но сейчас существует масса сервисов для определения системы сайта онлайн. Наш выбор — whatcms.org: у него хорошая база систем; в 98% случаях он выручает. 

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

проверка cms
Определение платформы

Когда вы точно определили систему систему, на которой сделан сайт, можно двигаться дальше.

Доступы к сайту

Следующий пункт — это получение доступа к сайту для установки кода события самостоятельно. В зависимости от того, на чем и как сделана система, вам могут потребоваться:

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

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

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

Иногда администраторы сайта выдают ограниченные доступы для специалистов: без права редактирования разделов сайта, кода, определенных страниц. Но этого может быть недостаточно для установки своих кодов Google Analytics! 

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

Для системы WordPress пункт редактирования кода для установки события на сайт самому следующий:

редактор кода wordpress
Пункт редактирования для WordPress

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

Для системы 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 Аналитики, которую мы фиксируем. Если вы не видите параметров, а вместо этого написана фраза «Unknow» — значит, цель не создана (или не активирована) на стороне Goole Analytics. Если же строка имеет такой вид, то цель отправляется успешно.

Важный момент! Что делать если все настроено верно, а цели не фиксируются?!

    1. Убедитесь, что вы не тестируете сайт в режиме Инкогнито. В этом режиме Аналитика может не работать.
    2. Убедитесь, что в словах, которые указаны в коде и аналитике, нет русских букв. Например в слове «Click» очень легко не заметить такой ситуации.

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

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

Надеемся, что этот гайд пригодится вам и поможет оперативно решать вопросы с установкой кодов даже когда рядом нет программиста. 

Небольшая памятка (скачивать и расшаривать для коллег):

Установить код события на сайт без программиста
1 Star2 Stars3 Stars4 Stars5 Stars (1 votes, average: 5.00 out of 5)
Loading...

Будьте в курсе последних обновлений

Присоединиться в

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

php backend developer

С пингвинами уже год. Ранее активно занимался разработкой интернет магазинов, теперь же сконцетрирован на создании продуктов, разного рода API сервисов. Дополнительно занимался преподаванием курса php для новичков в течении 1.5 года.

Публикации: Как создать фид для Google Merchant Лучшие практики по верстке e-mail

Получить 7 писем о том,
как улучшить свой AdWords аккаунт
+ PPC статьи

Имя
e-mail
Улучшить AdWords

Улучшить свой AdWords

Получите 7 писем, о том, как можно улучшить свой аккаунт в AdWords

Подписаться

Наш сайт использует файлы cookie, чтобы улучшить работу и предоставить максимальное удобство пользователям.

В версии 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

Заполните форму

Прикрепите резюме:
1Кликов 259, показов 3 515. Чему равно CTR?
2Заходов на сайт 874, конверсий 16. Чему равен коэффициент конверсии?
3Что такое СРА?
4CTR 4,03%, кликов 240. Чему равно число показов объявления?
5Затрат 20 158, конверсий 63. Чему равна стоимость конверсии?

Несколько шагов до работы в Penguin

Заполните форму

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