Создание примечаний в Яндекс Метрике
Материал посвящен созданию примечаний в Яндекс Метрике, включая как ручные единичные примечания, так и массовую загрузку с использованием специального скрипта.
О примечаниях
Вы запустили рекламную кампанию? Проводили технические работы по сайту? Увидели необычные изменения в объеме трафика? Связано это с проведением акции, сезонности, повышенным спросом или увеличением рекламного бюджета? Аннотации позволяют фиксировать все действия, связанные с продвижением сайта или изменениями в его дизайне. Благодаря им можно восстановить события, которые повлияли на количество конверсий или посещений.
Дополнительные материалы по этой теме:
Наверняка вы знаете, что в интернет-маркетинге существует несколько типов данных:
- Количественные (данные, представленные в числовом формате: метрики в отчетах, поиск проблем внутри счетчиков аналитики);
Примеры: счетчики аналитики, базы данных, различные хранилища
- Качественные (сбор, анализ и интерпретация данных путем наблюдения за тем, что люди делают и говорят)
Примеры: юзабилити-тестирование, глубинные интервью, фокус-группы, полевые исследования
Первые находятся в отчетах, а вторые нужно добывать, наблюдая за поведением пользователей или с помощью прямого контакта (непосредственно общаясь с аудиторией). Сейчас 99,9% маркетологов работает только с отчетами Google Analytics и Яндекс Метрики, пытаются найти в них для себя что-то интересное для дальнейшей оптимизации рекламных кампаний. И совершенно забывают про качественные данные. Сами по себе количественные данные малоинформативны.
Количественные и качественные данные
Давайте разберем несколько примеров:
1. Вы заметили, что количество покупок в вашем интернет-магазине за последнюю неделю снизилось в 10 раз. Это количественная информация. Но она не дает понять причин, почему это произошло. А что если добавить к этой истории контекст: у конкурентов началась масштабная распродажа, и многие клиенты переключились на их сайты. Это качественные данные. Теперь уже стало гораздо понятнее.
2. Вы строите отчет за несколько месяцев и замечаете, что количество новых клиентов, купивших абонемент в ваш фитнес-клуб, снизилось на 50%. Количественная информация? Верно! Но когда вы узнали, что рядом открылся новый фитнес-клуб с более современным оборудованием и низкими ценами, вам стало понятно, почему клиенты уходят к вашим конкурентам. Вы получили дополнительную информацию и теперь знаете контекст происходящего.
3. Вы заходите в отчет Яндекс Метрики и видите снижение коэффициента конверсии в 2 раза. Это количественная информация. Что делать дальше? Вы начинаете делать различные срезы по типу устройств, географии, полу, возрасту, источникам и т.д. В конце концов вы выясняете, что конверсия снизилась из-за некорректной работы скрипта в одном из браузеров, причем с него на ваш сайт заходит наибольшее количество человек. Даже если мы и нашли проблему, оперативно устранили ее, нам нужен контекст и понимание причины произошедшего, чтобы в будущем такого не произошло вновь. И после нескольких дней анализа вы узнаете, что разработчик просто вносил правки на сайт и что-то изменил, но при этом не удосужился проверить корректность работы. Вот вам и качественные данные.
Зная цифры и контекст произошедшего, можно лучше оптимизировать рекламные кампании. Особенно, когда есть исторические данные по проекту, а также сравнительная статистика по отрасли. Пришло время, когда владельцам сайтов нужен дополнительный источник информации. Именно поэтому я всем и всегда рекомендую вести журнал записей (log-файл) и записывать все действия по проекту, не только собственные, но и других членов команды.
Записывайте в отдельном файле все, что вы делали (задачи, какие кампании и когда загрузили, какие ставки назначили, когда что добавили новое, настроили, когда проводили тестирование, когда анализировали данные, что интересного обнаружили, что делали другие члены команды и т.д.).
Аннотации, они же примечания на графиках, помогают отслеживать важные события и связанные с ними изменения статистики сайта (разные отклонения от каких-то средних величин, аномалии и т.д.). В Яндекс Метрике вы можете создавать свои собственные примечания, а можете использовать системные, заложенные в счетчик по умолчанию.
Например, значок 
в отчетах Яндекс Метрики означает праздники (H = holidays):
Системные примечания в Яндекс Метрике (праздники)
Примечание: с 3 сентября 2024 года Яндекс приостановил доступ к мониторингу сайта в Метрике. Примечания такого типа больше не отображаются на графиках 
(M = monitoring).
Иногда изменение посещаемости сайта может быть связано с продолжительными выходными (как на примере выше - Новогодние каникулы).
Чтобы увидеть заголовок примечания в Яндекс Метрике, наведите курсор на сам значок:
Информация о примечании
А чтобы увидеть текст примечания - нажмите на значок нужного примечания левой кнопкой мыши. Вам откроется всплывающее окно с дополнительной информацией об этом системном примечании:
Текст примечания
Примечания отображаются в отчетах Яндекс Метрики и на виджетах типа График в разделе Дашборды:
Примечания на графиках в разделе "Дашборды"
Если вы просматриваете виджеты или отчеты за большой период времени с детализацией по месяцам или неделям, то примечания на графике объединяются в группы. При нажатии на примечание откроется окно со всеми примечаниями в группе за выбранный диапазон дат:
Группировка примечаний
Чтобы на графике отобразились примечания одной или нескольких групп, нажмите значок 
и выберите группу из списка:
Выбор конкретной группы примечаний
Чтобы убрать отображение примечаний, снимите с них галочки.
Создавать примечания в Яндекс Метрике очень полезно. Например, когда вы:
- вносите изменения в рекламные кампании (ставки, стратегии, объявления и т.д.);
- запускаете новый канал привлечения пользователей;
- или ваш разработчик изменяет расположение элементов на странице (блоков, форм, кнопок), сам дизайн или вносит правки в функционал сайта;
- проводите тестирование/эксперимент;
- и др.
Это даст вам возможность в будущем быстрее найти тот самый интервал с вашими правками, оценить результаты и сделать выводы о проделанной работе. Как изменилась конверсия, трафик, доход? Другими словами, связать количественную информацию с качественными данными.
Создание примечания
В Яндекс Метрике можете создавать примечания для любой даты, как для прошлой, так и для будущей. Для этого откройте стандартный отчет (например, Источники, сводка), наведите курсор мыши на отрезок линии графика, который хотите отметить, и нажмите на точку графика:
Выбор дня для создания примечания
Вам откроется окно с возможностью создания нового примечания:
Новое примечание в Яндекс Метрике
Примечание: создавать и редактировать примечания можно только в отчетах.
Задайте заголовок, описание, проверьте дату и выберите группу, к которой хотите отнести примечание. Для выбора доступно несколько групп: A, B, C, D, E. Названия этих групп нельзя изменить. Для разных типов примечаний удобно выбрать свой цвет - например, зеленым отмечать обновления сайта, а фиолетовым - изменения, связанные с источниками трафика.
Вы можете указать время события, для которого создаете примечание. Если время не указано, будет задано 0 часов 0 минут.
Пример примечания выглядит так:
Пример примечания для сайта osipenkov.ru
В завершение нажмите кнопку Добавить. На графике появится значок созданного примечания рядом с датой, которая была указана при его создании.
Новое примечание на графике
Аналогичным образом можно поступить с примечанием для будущей даты. Если вы точно знаете, что произойдет в ближайшее время (какое-то значимое событие, эксперимент, акция и прочее), то вы можете создать примечание и для такого события. Однако оно не появится на графике, пока не станет доступен выбор соответствующей даты.
Когда примечание создано, вы можете отредактировать его или удалить. Чтобы отредактировать или добавить примечание для этой же даты, нажмите на нужное примечание. В открывшемся окне наведите курсор мыши на заголовок примечания и нажмите значок карандаша:
Редактирование примечания
Выполнив все правки, нажмите на кнопку Изменить.
А чтобы удалить примечание, сделайте все то же самое, что и для редактирования, только в окне редактирования в самом низу нажмите на иконку корзины:
Удаление примечания
Массовая загрузка примечаний
Создать примечание в Яндекс Метрике очень просто. Но что, если у вас уже есть большой список примечаний за прошлые и будущие периоды, и вы хотите добавить их массово в Яндекс Метрику, не создавая каждое примечание в отдельности? Например, вы добавляли ранее аннотации в Google Analytics 4, а теперь решили их же продублировать в Яндекс Метрику. Тогда вам пригодится способ, описанный ниже.
Решение принадлежит Сергею Лосеву (Sergey Lossev), автору еще одного интересного скрипта GTM expander, о котором я подробно писал в другой статье блога.
На мой взгляд, в свое время этот метод не был представлен широкой аудитории и остался незамеченным. Поэтому я хочу исправить это недоразумение и поделиться с вами способом массовой загрузки примечаний в Яндекс Метрику. И поможет нам в этом букмарклет.
Букмарклет (bookmarklet) - это код на языке JavaScript, который сохраняется как закладка в браузере. Он работает за счет использования протокола <a href="javascript:...">. Выбирая такую закладку, вы запускаете JS-код в контексте текущей страницы. Код выполняется в момент нажатия и может влиять на страницу как обычный JavaScript. С помощью букмарклетов можно выполнять такие задачи, как изменение внешнего вида страницы, перенаправление на другую страницу или отображение новой информации на ней. Другими словами, букмарклет - это JavaScript-плагин к браузеру. Именно такой код вы и будете использовать для массовой загрузки примечаний в Яндекс Метрику.
Перейдите в браузер и создайте закладку. Например, для Google Chrome это можно сделать через иконку звездочки (Добавить страницу в закладки):
Добавление закладки в браузере (для Google Chrome)
Откройте список папок и выберите другую папку для закладки:
Выбрать другую папку
В поле Название введите произвольное значение, например YMAI, а в строку URL вставьте нижеприведенный скрипт Сергея:
|
1 2 3 4 5 6 7 8 9 10 11 12 13 14 15 16 17 18 19 20 21 22 23 24 25 26 27 28 29 30 31 32 33 34 35 36 37 38 39 40 41 42 43 44 45 46 47 48 49 50 51 52 53 54 55 56 57 58 59 60 61 62 63 64 65 66 67 68 69 70 71 72 73 74 75 76 77 78 79 80 81 82 83 84 85 86 87 88 89 90 91 92 93 94 95 96 97 98 99 100 101 102 103 104 105 106 107 108 109 110 111 112 113 114 115 116 117 |
javascript: c= 'Импорт аннотаций в Яндекс.Метрику (c) SergeyLossev'; if ($("#container").length==0) { $('<div id="container" style="top: 70px;position: absolute;z-index: 10000001;left: '+($(".main-menu_view_basic").length?180:70)+'px;background-color: white;text-align: center;right: 0px;bottom: 69px;">' +'<h1 style="font-size: 20px; padding-top: 20px">'+c.replace(/(SergeyLossev)/, '<a href="https://goo.gl/VPMn4d" target="_blank">$1</a>')+'</h1><br/>' +'<p><b>Введите список меток по любой схеме из примеров:</b></p>' +'<table>' +'<tr><td>YYYYMMDD'+(tt=' </td><td> [tab] </td><td> Текст аннотации</td></tr>') +'<tr><td>YYYY-MM-DD'+tt +'<tr><td>DD.MM.YYYY'+tt +'</table>' +'<p>Если проще - два столбца, скопированные из Excel: один - с датой, другой - с текстом. Либо результат <a href="https://goo.gl/KQ7Ef2" target="_blank">экспорта из Google Analytics</a><br/>' +'<b>Esc - отмена</b></p>' +'<table style="margin: 20px;">' +'<tr><td style="height: 25px;"><select id="ann_type">'+'ABCDE'.split('').map(x=>'<option>'+x+'</option>').join('')+'</select></td><td width="10px"> </td><td>Тип метки</td></tr>' +'<tr><td style="height: 40px;"><input type="checkbox" id="ann_check" style="margin-left: 0px;"></input></td><td width="10px"> </td><td>Копировать текст также и в описание (помимо заголовка)</td></tr>' +'<tr><td><input type="button" id="annotations_button" value="Go!" style="margin-left: 0px; background-color: lightseagreen; color: white;"/></td><td width="10px"></td><td>Импортировать</td></tr>' +'</table>' +'<p></p>' +'<textarea title="' +"Образец аннотаций\n" +"2017-12-12\tПодключили рекламу Яндекс.Директ\n" +"2017-12-13\tНастроили utm-метки\n" +"2017-12-20\tПовысили ставку до 10 руб\n" +"\nНЕ ошибки и варианты с датами\n" +"20171210\tНормальная дата в формате без тире\n" +"01.09.2018\tНормальная дата в формате с точками и ведущим нулём\n" +"2017-12-08\tСтрока\tс\tнесколькими\tтабами\n" +"\nОшибки\n" +"2017-12-09\t\n" +"2017-12-10строка с ошибкой\n" +"2017-12-10 ещё строка с ошибкой\n" +"9.9.2018\tкривая дата\n" +"белиберда\n" +"Ещё белиберда" +'" id="ann_txt" height="100%" width="100%" style="height: 100%; width: 100%; margin-left: 20px; padding-top: 7px;" placeholder="Пример:\n2017-12-31\tНаряжаем ёлку\n2018-01-01\tС Новым Годом!\n"></textarea>' +'</div>' +'<div id="progress" style="width:0%; height:10px; background-color:red; position:absolute; z-index:1001;"></div>' ).appendTo('body'); $('p,td,table', "#container").css({textAlign: 'justify', margin: '20px'}); fn_on = function(){ all_ok=true; check_errors=ann_txt.value.trim().split(/[\r\n]+/) .map(x=>{ var xx=x.trim(); if (xx.match(/(^20\d{2}-[0-1][0-9]-[0-3][0-9])\t[^$]+/)) return(xx); if (xx.match(/(^[0-3][0-9]\.[0-1][0-9]\.20\d{2})\t[^$]+/)) return(xx.replace(RegExp.$1, RegExp.$1.split('.').reverse().join('-'))); if (xx.match(/(^20\d{2}[0-1][0-9][0-3][0-9])\t[^$]+/)) return(xx.replace(RegExp.$1, xx.slice(0,4)+'-'+xx.slice(4,6)+'-'+xx.slice(6,8))); all_ok=false; return(xx.startsWith("!\t") ? x : "!\t"+x); }); pr=$("#progress"); if (all_ok) { check_errors.forEach((x,i)=>{ pr.show(); setTimeout(()=>{(()=>{ arr=x.split('\t'); date=arr.shift(); tail=arr.join(' - '); obj={ "id":"", "date":date, "title":tail, "message": (ann_check.checked ? tail : ''), "group":ann_type.selectedOptions[0].innerText }; pr.show().css("width", (i+1)/(check_errors.length)*100+"%"); console.log(i); console.log(obj); if (i==check_errors.length-1) { $(".header2__main").css("background-color", ""); setTimeout(()=>{ if (confirm("Аннотации добавлены.\nТребуется перезагрузить страницу")) { location.reload(); } pr.hide(); }, 100); } BN('i-chart-annotations-api').add(BN('i-counters').getCounterId(), obj) })(i);}, i*100); }); $("#container").hide(); } else { ann_txt.value=check_errors.filter(x=>x.startsWith("!\t")).concat(check_errors.filter(x=>!x.startsWith("!\t"))).join("\n"); $(ann_txt).css("background-color", "red"); setTimeout(()=>{ $(ann_txt).css("background-color", ""); alert('Исправьте ошибки'); ann_txt.focus(); }, 100); } }; $('#annotations_button').on('click', fn_on); (window.addEventListener || window.attachEvent)("keydown", function(event){if (event.key=="Escape") $("#container").hide();}); } else { $("#container").show().css('left', ($(".main-menu_view_basic").length?180:70)); }; with(console){clear();log(c);}; /* белиберда 2017-12-08 Образец 20171210 Нормальная дата в формате без тире 01.09.2018 Нормальная дата в формате с точками и ведущим нулём 2017-12-08 строка с несколькими табами 2017-12-09 2017-12-12 Подключили рекламу Яндекс.Директ 2017-12-13 Настроили utm-метки 2017-12-20 Повысили ставку до 10 руб 2017-12-10строка с ошибкой 2017-12-10 ещё строка с ошибкой 9.9.2018 кривая дата Ещё белиберда */ |
Это будет выглядеть так:
Сохранение закладки
В завершение сохраните закладку в нужной папке. На этом предварительная настройка завершена.
Теперь перейдите в Яндекс Метрику и откройте любой стандартный отчет. Запустить скрипт из закладки (букмарклета).
Запуск скрипта из закладки
Поверх отчета вы должны увидеть окно ввода для примечаний:
Импорт аннотаций в Яндекс Метрику
В современных браузерах, включая Google Chrome, существуют меры безопасности, которые могут ограничивать выполнение Javascript-кода, если он не размещен в доверенном контексте (например, в консоли разработчика или в пользовательском скрипте). Если вы хотите запустить этот код, лучше всего сделать это в консоли разработчика (клавиша F12 или Ctrl+Shift+I), перейдя на вкладку Console.
Вставка кода в консоли разработчика (вкладка "Console")
Вставьте вышеприведенный код и нажмите Enter.
Теперь вы можете вставить список примечаний. Каждая аннотация должна быть написана с новой строки. Даты можно задавать как в привычном формате (24.12.2014), так и в международном "перевернутом" (2014-12-24). Допустим ввод и без тире, т.е. 20141224.
После даты должен следовать разделитель (табуляция), а за табуляцией - описание аннотации. Обычно табуляция присутствует в качестве разделителя в Excel'е, если скопировать два столбца - в одном столбце даты, а в другом - описания.
Сергей для упрощения использования скрипта привел примеры различных поддерживаемых форматов:
- YYYYMMDD [tab] Текст аннотации
- YYYY-MM-DD [tab] Текст аннотации
- DD.MM.YYYY [tab] Текст аннотации
Добавьте примечания в поле ниже (можете как вручную прописать их, либо же скопировать из заранее заготовленного списка):
Массовое добавление примечаний
Перед импортом выберите Тип метки. Это те же самые группы по умолчанию - A, B, C, D, E. Названия этих групп нельзя изменить. Если вы хотите массово загрузить примечания в разные группы, то сначала добавьте примечания для одной группы - загрузите их, потом массово добавьте примечания для другой группы - загрузите их, и так далее.
Тип метки
Если нужно копировать тексты аннотаций также и в описание (помимо заголовка), поставьте соответствующую галочку:
Копировать текст также и в описание (помимо заголовка)
Нажмите кнопку Go!, чтобы загрузить все примечания массово:
Массовый импорт примечаний в Яндекс Метрику
Если примечаний много, процесс может немного затянуться, так как во избежание блокировки примечания отправляются с интервалом 100мс. Выполнение массового импорта отображается красным прогресс-баром в верху страницы.
Если вы все сделали правильно, то после загрузки должны увидеть всплывающее окно с таким сообщение: Аннотации добавлены. Требуется перезагрузить страницу.
Аннотации добавлены. Требуется перезагрузить страницу
Сделайте это. Страница будет перезагружена. Откройте отчет Яндекс Метрики. На графике вы будете видеть добавленные примечания:
Успешно загруженные примечания массовым способом
При импорте все даты преобразуются в формат YYYY-MM-DD, независимо от того, в каком исходно формате они были вставлены. То есть и 24.12.2014, и 20241224 будут преобразованы в формат, понятный Яндекс Метрике - 2014-12-24. Также допускаются пустые строки и строки со всякой белибердой – если они не начинаются с даты с табуляцией, они будут проигнорированы.
Если в поле ввода присутствуют строки неподходящего формата, будет отображено уведомление, а сами строки с ошибками будут подняты наверх и отмечены восклицательными знаками:
Строки с ошибками будут подняты наверх и отмечены восклицательными знаками
Несколько рекомендаций по работе со скриптом Сергея Лосева:
- прежде, чем импортировать аннотации в свой рабочий проект, попробуйте это сделать для тестового, создав новый счетчик Яндекс Метрики;
- прежде, чем массово загружать много примечаний, попробуйте таким способом импортировать несколько (две-три);
- если не получаете запустить код через закладку, вставьте его в консоль разработчика на вкладке Console;
- все массовые действия вы выполняете на свой страх и риск. Загрузив множество неправильных примечаний, вам будет сложно их удалить, так как удалять придется каждое примечание поштучно;
- как вы уже знаете, Яндекс Метрика не запрещает создавать примечания для дат, которые еще не наступили ("будущие" даты). Поэтому будьте аккуратны с форматом.
