Вход

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

9.08.2018

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

10 минут

Аналитика, Аналитика, Контекстная реклама, Разработка,

1324

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

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

Настройку целей на стороне Google Analytics мы уже разбирали. Здесь же рассмотрим подробно шаги, которые необходимо выполнить на стороне сайта – внесение изменений в код.

Наш сценарий состоит из следующих этапов:

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

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

Начнем с самого главного – с проверки системы сайта, а именно определения платформы, на которой он сделан. Это может быть CMS система, какой-либо конструктор сайтов или же сайт-платформа (Shopify, Prom.ua). Кроме того сайт может быть сделан на каком-либо фреймворке или быть просто обычной html страницей. Чтобы «на глаз» определить систему, нужно быть довольно опытным разработчиком, но сейчас существует масса сервисов, которые онлайн определят систему. Один них – сервис https://whatcms.org. У него достаточно хорошая база систем, поэтому в 98% случаях он надежно выручает. Для проверки достаточно вписать домен сайта на главной странице и увидеть примерно такой результат:

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

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

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

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

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

Но есть один важный нюанс:

С этим доступом у вас должны быть права на доступ к редактору кода.

Иногда для специалистов администраторы сайта выдают ограниченные доступы (без права редактирования разделов сайта, кода, определенных страниц), но этого может быть недостаточно для установки своих кодов. К сожалению, среди изобилия систем, мы не можем перечислить все и указать, как должны выглядеть нужные вам права или какой пункт меню должен быть виден вам, но мы составили небольшой топ для самых распространенных систем среди наших клиентов.

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

Или же вы можете воспользоваться следующим плагином: https://ru.wordpress.org/plugins/insert-headers-and-footers/

Плагин позволит вам устанавливать нужные коды на сайт даже без доступа к редактору.

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

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

Для системы WIx:

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

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

Как установить код события

После того, как у нас есть логин и пароль и они соответствуют нужному уровню доступа, пора позаботиться о ТЗ, а именно, о документе, в котором будут представлены все нужные коды для установки. Что очень важно, коды должны быть в правильном формате.

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

Событие – это сигнал от браузера о том, что что-то произошло. Существует много видов событий. Посмотрим список самых часто используемых, пока просто для ознакомления.

С точки зрения разработчика, событий на одной странице может происходить более 10-ти разных видов, поэтому при формировании ТЗ нужно четко понимать, какой именно тип событий нужен вам, и когда именно должна происходить отправка цели. Вот небольшой список популярных событий, которые могут происходить внутри HTML страницы.

События мыши:

click – происходит, когда кликнули на элемент левой кнопкой мыши;
contextmenu – происходит, когда кликнули на элемент правой кнопкой мыши;
mouseover – возникает, когда на элемент наводится мышь;
mousedown и mouseup – когда кнопку мыши нажали или отжали;
mousemove – при движении мыши.

События на элементах управления:

submit – посетитель отправил форму <form>;
focus – посетитель фокусируется на элементе, например нажимает на <input>.

Клавиатурные события:

keydown – когда посетитель нажимает клавишу;
keyup – когда посетитель отпускает клавишу.

События документа:

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

Как видите, их существует немало, но все таки в 95% случаев PPC специалиста интересуют нажатия (то есть клики) и успешные отправки формы (сабмиты). Теперь можем перейти к технической составляющей – способу установки кода отслеживания.

Важный нюанс – это формирование самого кода. Так как сейчас существует два вида установки аналитики: вариант с GA или же вариант GTAG, код отслеживания для них имеет существенные отличия.

Пример настройки кода целей для формата GTAG

Отправка событий

Для отправки событий с веб-страницы, на которую добавлен код отслеживания, используйте следующие настройки команды event:

gtag('event', <action>, {
  'event_category': <category>,
  'event_label': <label>,
  'value': <value>
});

<action> – это строка, которая указывается в отчетах Google Analytics как действие по событию;
<category> – категория события;
<label> – ярлык события;
<value> – ценность события, выраженная целым неотрицательным числом.

Примечание. Категорию, ярлык и ценность указывать необязательно.

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

gtag('event', 'xyz');

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

    gtag('event', 'aaa', {
  'event_category' : 'bbb',
  'event_label' : 'ccc'
});

События Google Analytics по умолчанию

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

Пример ниже активирует событие Google Analytics с действием login, категорией по умолчанию engagement и ярлыком по умолчанию Google.

gtag('event', 'login', { method : '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 экран, у него начинает играть видео на сайте.

gtag('event', 'video_auto_play_start', {
  'event_label': 'My promotional video',
  'event_category': 'video_auto_play',
  'non_interaction': true
});

Инструкция по настройке кода целей для формата GA (если аналитика установлена в старом формате)

Информацию о событиях можно отправлять с помощью команды send, указав для поля hitType значение event. Команда send имеет следующую сигнатуру для типа event:

ga('send', 'event', [eventCategory], [eventAction], [eventLabel], [eventValue], [fieldsObject]);

Поля типа обращения event

Поля этого типа обращения приводятся в таблице ниже.

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

Вот, как на практике это выглядит.

Приведенная ниже команда отправляет событие в Google Analytics и сообщает о том, что был показан рекламный ролик из кампании Fall Campaign.

ga('send', 'event', 'Videos', 'play', 'Fall Campaign');

Внимание! Поля, передаваемые во вспомогательных параметрах, могут быть также указаны в fieldsObject (как и в случае с остальными командами send).

Указанную выше команду можно записать в расширенном формате:

ga('send', {
  hitType: 'event',
  eventCategory: 'Videos',
  eventAction: 'play',
  eventLabel: 'Fall Campaign'
});

Как отслеживать переходы по исходящим ссылкам и отправку сторонних форм

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

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

function handleOutboundLinkClicks(event) {
  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href
  });
}

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

function handleOutboundLinkClicks(event) {
  ga('send', 'event', {
    eventCategory: 'Outbound Link',
    eventAction: 'click',
    eventLabel: event.target.href,
    transport: 'beacon'
  });

Если же браузер не поддерживает такой метод, переход на следующую страницу откладывается, пока не закончится отправка данных о событии.

События без взаимодействия

В некоторых случаях бывает необходимо отправить событие без взаимодействия. Для этого в объекте fieldsObject команды send присвойте полю nonInteraction значение true:

ga('send', 'event', 'Videos', 'play', 'Fall Campaign', {
  nonInteraction: true
});

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

Кроме того, мы для вас подготовили примеры для разных ситуаций, посмотрите их детальнее.

После установки целей нужно проверить их работоспособность, для этого мы посоветуем инструмент, которым чаще пользуются разработчики, так как он дает более развернутую информацию.

Это специальное расширение для Google Chrome Google Analytics Deburger.

С его помощью можно посмотреть все детали, которые были отправлены. Вот пример работы с этим расширением.

Нас интересует следующий параметр:

Подчеркнутая строка – это и есть событие, цель, которую мы фиксируем. Если вы не видите параметров, и вместо этого написана фраза «Unknow», это означает, что цель еще не создана (или не активирована) на стороне аналитики. Если же строка имеет такой вид, то цель отправляется успешно.

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

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

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

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

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

А в качестве памятки предлагаем вот такой графический скрипт

(1 votes, average: 5.00 out of 5)

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

php backend developer

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

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