Как настройка метрик сайта-портфолио может помочь с поиском работы

Margarita Romanova
Дизайн-кабак
8 min readNov 8, 2023

В своё время, когда я активно занималась поиском работы, я решила создать свой собственный сайт-портфолио, который стал бы моей визитной карточкой и рассказывал бы о моих рабочих кейсах.

Нарисовав концепт в Figma, я решила самостоятельно сверстать сайт на Webflow. Это не заняло у меня много времени и я начала активно рассылать резюме и портфолио в интересующие меня компании. После этого, я довольно быстро столкнулась с проблемой, что не понимаю, насколько эффективно сайт выполняет свою задачу, ведь, к сожалению, очень редко можно получить честный и полезный фидбек от нанимающего менеджера или HR. А вопросы продолжали появляться. Заходит ли на сайт хоть кто-то? Сколько моих проектов посещает один человек? Какие проекты самые интересные? А какие наоборот заставляют человека принять отрицательное решение о моей кандидатуре?

Так я открыла для себя Яндекс.Метрику. Абсолютно бесплатное решение моей проблемы. В данной статье я хочу продемонстрировать какие вопросы интересуют меня в контексте поиска работы и как Я.Метрика помогает мне с ответами на них.

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

Сводка (дашборд)

«Сводка» или дашборд — это ваш рабочий стол. Его можно полностью кастомизировать под себя. Создать интересующие графики, сегментировать их по определенной аудитории.

Что я знаю о своём сайте благодаря сводке:

  • Какой процент посещает мой сайт через прямую ссылку или соцсети
  • По какому поисковому запросу люди переходят на мой сайт
  • Какие разрешения у устройств, с которых сидят посетители
  • Из каких они стран и городов
  • Какие проекты самые посещаемые

и многое другое.

Классная особенность Я.Метрики, что даже если не настроить нужный график сразу, а база визитов уже есть, то новый виджет всё равно будет отображать информацию по данным даже о старых визитах, до момента его создания. Так что не нужно переживать, что не получается сразу разобраться во всём, а данные теряются. Главное как можно быстрее подключить метрику к сайту, а полные данные о визитах будут храниться в любом случае, до того момента как вы решите вытащить их на свой «рабочий стол».

Вебвизор

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

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

Настроить таблицу вебвизора можно также под себя. Тут например, меня заинтересовал визит из Амстердама.

После того как я нашла интересующий визит, я включаю «плеер» и наслаждаюсь просмотром. Можно ускорять запись, перемещаться по её фрагментам, добавлять в избранное и тд.

Кто-то из Амстердама несколько раз выделил моё «О себе». Скорее всего это не нанимающий менеджер, а дизайнер, посетивший сайт для референса.

Подключение Яндекс.Метрики к своему сайту

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

1. Создаём новый счётчик и забираем его. На странице счётчиков нажимаем «Добавить счётчик». Заполняем имя счётчика, вбиваем адрес сайта. Выключаем автоматические цели (пока не поняла смысл их использовать) и включаем вебвизор. Принимаем условия и кликаем «Создать счётчик». Переходим на следующий этап, скроллим вниз и нажимаем «Скопировать код». Внизу нажимаем «Начать пользоваться» и возвращаемся на страницу, где должен появится ваш первый счётчик.

2. Добавляем счётчик на сайт портфолио. Тут алгоритм может отличаться в зависимости от того, что вы используете в качестве платформы. Покажу на примере Webflow.

Нужно перейти в настройки страницы и долистать до поля «before </body> tag». Туда просто вставляем код скопированный из Я.Метрики. Нажимаем «Save & close» и публикуем изменения.

3. Проверяем, что счётчик работает. Из настроек счётчика долистываем до блока «Проверка счётчика». Жмём кнопку «Проверить», подтверждаем и нас перенесёт уже на сам сайт. Если там появился зелёный баннер «Счётчик найден на странице», значит всё сделано правильно и теперь вы сможете начать работать с аналитикой своего сайта.

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

Под какие вопросы можно настроить метрики?

Начнём наверное с самого главного вопроса:

На этой неделе я отправила резюме в компанию N, и мне прислали шаблонный отказ. Что не так с моим портфолио или резюме?

Вариант 1

В случае, если вы откликаетесь приблизительно на 1 вакансию в неделю, то на этот вопрос может банально ответить статистика посещений и просмотр визита в вебвизоре.

Вариант 2

В случае если вы ищете работу в специфичной локации, то на такой вопрос могут ответить 2 графика: страна или город. Если за последнюю неделю не было визита из нужной локации, то видимо резюме не прошло проверку ATS и вы получили автоматический отказ.

Вариант 3

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

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

В случае сайта портфолио мы можем создавать уникальные ссылки для каждой компании, в которую откликаемся. Потом нужно лишь разместить созданную ссылку на портфолио в резюме, которое отправляем, а также в сопроводительном письме. По итогу в Яндекс.Метрике мы можем однозначно видеть факт того, что кто-то зашел по вашей «реферальной ссылке».

Допустим я откликнулась на вакансии в 5 компаниях. Каждой компании я создала соответствующий ей ID, поэтому я могу сказать, что первый визит из Meta, а второй из Netflix.

Также потом можно посмотреть в вебвизоре визит человека из нужной компании.

Как настроить и интерпретировать посещения по UTM меткам?

Шаг 1. Заведите подобную табличку в любом удобном инструменте. Добавьте туда:
- название компании, в которую хотите отправить отклик
- сгенерированный ID (чтобы совсем уж явно не показывать компании, что вы отслеживаете их визиты)
- текущий статус: нет ответа, есть ответ
- был ли визит: нет, да

Шаг 2. Для каждой компании создайте соответствующую реферальную ссылку. Воспользуйтесь генератором UTM-меток, или напишите url ссылок самостоятельно. Какая должна быть структура:

Заполнение источника и типа трафика обязательно для того, чтобы Яндекс.Метрика смогла в принципе сегментировать визиты по UTM меткам.

Ссылка пример для копирования

https://mromanova.webflow.io/?utm_source=google&utm_medium=email&utm_term=wm8m5s8sxqbrebyw3w10

Шаг 3. Создайте виджет «Таблица» по UTM меткам в сводке.
Создать виджет -> Таблица -> Группировка -> Источники -> Метки -> UTM Term -> Создать

В моём виджете сразу есть данные, потому что по моим реферальным ссылкам уже были визиты.

Шаг 4. Отправляйте отклики в компании, используя созданные до этого ссылки.

Шаг 5. Проанализируйте результаты после того как получили ответы от компаний.

Как можно интерпретировать эти данные:

Revolut, Google, Amazon — сайт портфолио не посещали, выслали отказ => Скорее всего проверку не прошло CV

Meta — сайт портфолио посещали, прислали приглашение => CV и портфолио понравились

Netflix — сайт портфолио посещали, прислали отказ => вероятно CV ок, портфолио не понравилось

Но тут можно дальше продолжать анализ. Допустим мне интересно, что именно не понравилось в портфолио нетфликсу. Для этого нужно найти в вебвизоре визит с соответствующей UTM Term меткой.

Искать в чистой таблице нужный визит постоянно кликая по иконке инфо, может занять много времени. Поэтому лучше сразу настроить столбцы так, чтобы там была включена галочка «Метки».

Остаётся только пройтись по таблице и найти только те визиты, у которых поле «Метки» заполнено. После этого надо кликнуть по иконку инфо, найти нужный айдишник и включить запись .

Визит можно проанализировать в вебвизоре следующий образом:

  • Открыл ли посетитель хоть какой-то проект?
    Если нет, то видимо сходу не зацепила главная страница или превью проектов.
  • Если человек вышел с сайта после просмотра конкретного проекта, то что ему не понравилось?
    По положению скролла на странице, можно точно сказать после какого фрагмента посетитель решил выйти с сайта.
Мой посетитель открыл проект 2Look, долистал его до конца, но не пошёл дальше. Скорее всего это не то, что он ожидал увидеть, поэтому и не заинтересовался просмотром других проектов.

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

Откуда чаще всего люди приходят в моё портфолио? Какой ресурс развивать?

Интерпретация данных

В первом графике ссылка на Google Drive это моё CV. Логично, что оттуда приходит большинство визитов. С LinkedIn приходит меньше, чем с Behance и это скорее особенность профиля в линкедине, где нельзя разместить кликабельную ссылку в своём описании. Возможно мне стоит почаще публиковать посты в линкедине с явной ссылкой на моё портфолио.

Второй график показывает мне, что на мой сайт портфолио активно переходят с blog.anatoly.tech, а также в чьей-то подборке ссылок на raindrop. Там мой сайт используется в качестве референса другими дизайнерами.

Стоит ли запариваться с мобильной версией сайта? Что использовать в качестве основного разрешения?

Интерпретация данных

График «Тип устройства» показывает, что абсолютное большинство всё таки смотрит с ПК. Лишь 15,7% смотрят с телефона, и совсем чуть-чуть с планшета. Когда-то я несколько дней разрабатывала крутое анимированное меню в мобильной версии, но из-за этих данных больше я этим заниматься не буду.

Сейчас моё базовое разрешение в webflow это 1279px. Скорее всего в ближайшее время я перееду на 1440px.

Какие мои проекты самые интересные? А какие стоит скрыть?

Интерпретация данных

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

Чем первее проект в списке, тем чаще в него будут заходить. Ауф

Второй график говорит мне о том, что мои проекты Landau, Mountaine milk и 2Look самые отказные. То есть посетитель чаще всего навсегда покидает сайт заходя именно в эти 3 проекта. Кажется настало время их скрыть от публики.

Как ещё можно использовать вебвизор?

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

Cпасибо, что прочитали! ❤️

Сейчас я активно ищу возможность выступить на конференции с этой темой. Если вы организатор и в этом заинтересованы, пожалуйста, напишите мне на почту margo.romanova26@gmail.com или в телеграм.

--

--

Margarita Romanova
Дизайн-кабак

Lead Product Designer @ Dzen | Product Design, Design Management, Design Systems, Art direction | Mentor