За счет улучшения взаимодействия с Интернетом
Несколько дней назад в нашем офисе у коллеги по маркетингу возникла проблема с одной из наших целевых страниц, потому что призыв к действию не выделялся. Он хотел, чтобы наша команда разработчиков знала, как можно изменить цвет и текст, чтобы сделать его более заметным на странице. Его план состоял в том, чтобы сделать снимок экрана, загрузить его в фотошоп, отредактировать цвет, а затем отправить этот отредактированный снимок экрана нашей команде разработчиков, чтобы показать им, как он должен выглядеть. Мне, который немного знает о Google Chrome DevTools, это показалось самым длинным из возможных способов достичь того, чего он хотел, но потом меня осенило - DevTools по-прежнему очень мало используются.
DevTools предоставляет мощный набор инструментов для взаимодействия с Интернетом. Каждый, кто занимается веб-аналитикой, должен хорошо разбираться в том, как использовать DevTools, но я также считаю, что более того, любой, кто работает с Интернетом, должен иметь базовое понимание. Если вы занимаетесь маркетингом, управлением продуктами или развитием бизнеса, DevTools может значительно повысить вашу производительность.
Инструменты разработчика Google Chrome имеют множество применений, но я считаю, что для тех, кто не является веб-разработчиками, наиболее распространенными и эффективными являются:
- Изучите конкурентов
- Отладка того, что не работает, с надстройками (например, Hellobar, Hotjar)
- Посмотреть всевозможные виды
- Понять время загрузки страницы
- Редактировать Интернет
Основы
Что такое DevTool?
Начнем с изучения. Есть несколько способов получить доступ к DevTools: F12, Cmd+Shift+C или щелкнув страницу правой кнопкой мыши и выбрав Inspect. Любой из этих параметров откроет панель справа, которая представляет собой окно в Интернет, с которым вы взаимодействуете.
Это окно представляет собой среду DevTools и состоит из множества различных инструментов, разделенных на различные разделы. Я обнаружил, что наиболее важными разделами являются:
- Элементы. Из чего сделана страница?
- Консоль: ваш портал для взаимодействия со страницей.
- Сеть: что происходит в фоновом режиме?
- Приложение: изучите файлы cookie и многое другое.
Давайте исследуем их, исследуя пять вариантов использования, которые я упомянул выше.
Изучите конкурентов
Умение понимать конкурентов ценно для любого бизнеса. С помощью DevTools вы можете более подробно изучить, что происходит на сайтах ваших конкурентов. Это поможет вам в выборе продукта в вашей организации, а также поможет понять, в каком направлении движутся конкуренты. Я написал целый пост о взятии данных, найденных с помощью DevTools, для создания сводки их данных здесь, но здесь давайте поговорим о первой части.
В разделе «Элементы» можно увидеть код, из которого сделан любой сайт. Выполнив поиск по таким словам, как googleanalytics или optimizely, вы сможете увидеть, какие инструменты используют конкуренты. Например, они могут использовать Optimizely для тестирования продуктов или вы можете обнаружить, что они даже не используют Google Analytics, выбрав собственное внутреннее отслеживание.
Альтернативой описанному выше методу является отличное приложение под названием Wappalyzer, которое я настоятельно рекомендую. Он обнаруживает большинство технологий, как описано выше, и отображает их в простом списке. Хотя это охватывает большинство случаев, знание того, как использовать DevTools, может дать вам больше информации о том, как они структурируют свою аналитику.
Вы можете не только увидеть технологии, которые используют компании, но и многое, многое другое. В частности, вы можете комбинировать информацию из вкладки «Элементы» с информацией, которая отправляется по сайту во вкладке «Сеть».
Во многих случаях я обнаружил, что компании неохотно утекают информацию о своей деятельности, например о том, сколько у них бронирований или сколько товаров они продали. Сочетание этого с системой очистки может привести к очень надежной модель производительности, которая может быть полезна любой компании, которая хочет иметь конкурентное преимущество.
Отладка того, что не работает
Сколько раз вы участвовали в реализации надстройки или стороннего продукта и обнаруживали, что они работают некорректно? Часто возникают проблемы с отображением, ошибки, приводящие к неустойчивой производительности, или любое количество проблем. Используя DevTools, можно быстро устранять основные проблемы и экономить время вашей команды.
Вкладка «Консоль» в DevTools сообщает о любых ошибках, которые возникают во время загрузки или операций со страницей, как показано выше. Например, вы могли реализовать сторонний инструмент, который позволяет отображать всплывающие уведомления, но по какой-то причине он не загружается на страницу. Вы можете открыть консоль и, вероятно, обнаружите, что выдается какая-то ошибка, возможно, проблема с именованием, например:
Uncaught ReferenceError: hello_bar is not defined
Затем его можно отправить обратно в дополнительную службу поддержки клиентов и сэкономить ненужные туда и обратно. В качестве альтернативы, если вы достаточно разбираетесь в технологиях, вы можете даже найти и устранить свои собственные решения, теперь, когда вы знаете ошибку, вызывающую проблему.
Еще одна важная область для устранения неполадок - вкладка Приложение. На вкладке Приложение вы можете увидеть все файлы cookie, связанные с текущим веб-сайтом. Это может быть очень полезно, если вы используете инструмент AB Testing, такой как VWO, поскольку вы можете редактировать файл cookie, чтобы вручную принудительно выбрать другой вариант.
На снимке экрана ниже показан веб-сайт Skyscanner, который использует файл cookie с именем abgroup для установки файла cookie. Его можно изменить на идентификатор другого варианта, если вы хотите увидеть его в своем браузере. Альтернативой этому является постоянное открытие сеансов инкогнито или стирание файлов cookie, пока вам не повезет, и вы попадете в группу, которую хотите видеть. В конечном итоге это сработает, но может сильно расстроить, если у вас есть несколько вариантов и одна неудачная серия!
Обновите свой видовой экран
Удобный инструмент в DevTools - это возможность изменять область просмотра как на предопределенные размеры, так и на любые промежуточные. Давайте посмотрим на это на практике. После запуска DevTools мы можем использовать Cmd+Shift+M, чтобы открыть эту опцию. Затем у нас есть возможность выбрать устройство, которое мы хотим просмотреть, из раскрывающегося меню. Здесь можно увидеть три разных представления домашней страницы AirBnB, созданных с помощью панели инструментов устройства в DevTools.
Работая с веб-сайтом, легко забыть, что не все просматривают ваш продукт на одном экране, на который вы проводите большую часть дня. При проведении анализа или принятии решения об изменении продукта важно всегда учитывать, как пользователи на разных устройствах воспринимают вещи по-разному из-за размеров их экранов.
Например, с изображениями AirBnB выше видно, что каждое из них представляет собой разное представление. Начиная с Desktop, мы сначала видим заголовок, содержащий различные параметры меню, за которым следует выбор категории ниже, а также введение в Plus.
Изображение планшета довольно похоже, но мы видим, что меню исчезло; как это повлияет на навигацию пользователя? Мы также видим, что «Дома по всему миру» теперь на первом плане; как это влияет на клики?
Переходя на мобильные устройства, мы видим более сжатую версию того, что мы видели на планшете. При первом просмотре показаны все три раздела, но карта ресторанов частично скрыта; приводит ли это к меньшему количеству кликов?
Используя DevTools, можно быстро переключаться между представлениями без необходимости изменять размер экрана, с дополнительным бонусом в виде возможности видеть представление для определенных устройств. Это может помочь вам быстро выявить проблемы с дисплеем или выявить возможности для улучшения.
Понять время загрузки страницы
Продолжая тщетно понимать, как разные пользователи воспринимают Интернет, мы можем использовать DevTools для исследования времени загрузки страницы.
Когда пользователь впервые попадает на веб-сайт, он должен загрузить много информации, включая макеты, данные о продуктах и изображения. Излишне говорить, что процесс принятия решения о том, как загружать каждую из этих частей, очень сложен. При работе из офиса с высокоскоростным подключением к Интернету редко можно увидеть какие-либо проблемы, но это может быть разным для пользователей с мобильным подключением к Интернету или из регионов с плохим подключением к Интернету.
На вкладке "Сеть" можно сделать две вещи:
- Регулируйте скорость соединения
- Смотрите график загрузки страницы
Регулирование скорости соединения означает, что мы можем стать на место тех, у кого плохое интернет-соединение. Это эффективно имитирует то, что значит иметь другую связь. В приведенном ниже примере сеть настроена на медленное соединение, если выбрать параметр Slow 3G в меню, которое открывается при нажатии стрелки в правом верхнем углу вкладки «Сеть» в DevTools.
После дросселирования легко увидеть, что не все загружается сразу, как можно было бы ожидать при использовании высокоскоростного соединения. Чтобы увидеть точный порядок, на временной шкале отображаются снимки страницы в разные моменты времени загрузки. Его можно создать, просто обновив страницу после открытия вкладки «Сеть».
Вооружившись пониманием времени загрузки, можно приступить к улучшению пользовательского опыта.
На первом скриншоте Lazada, показанном выше, видно, что они загружают фреймы, чтобы показать, где в конечном итоге будут находиться продукты; это дает пользователю представление о том, чего ожидать, и показывает, что страница все еще работает, чтобы получить информацию для пользователя. На втором снимке экрана загружена информация о продукте, что позволяет пользователю начать взаимодействие со страницей, не дожидаясь изображения. Это позволяет им сэкономить драгоценное время, которое в противном случае ожидал бы пользователь. Наконец, загружается полная страница, и пользователь может взаимодействовать со всеми доступными функциями.
Редактировать Интернет
Теперь давайте посмотрим, как мы можем использовать DevTools для редактирования видимой сети.
На вкладке «Элементы» можно взаимодействовать со статическими элементами страницы и изменять их так, как нам удобно. Например, если вы щелкните правой кнопкой мыши что-либо на странице и выберите Inspect, он откроет этот раздел в элементах, как показано ниже. Справа находятся все свойства CSS этого элемента. На скриншоте я изменил цвет заголовка с черного на красный, а также внес некоторые другие косметические изменения.
В приведенном выше случае дизайн, несомненно, хуже, но, как упоминалось в начале статьи, членам команды может быть полезно использовать этот подход, чтобы показать незначительные изменения, которые они хотели бы внедрить в своих командах разработчиков.
Изменения не ограничиваются только цветом, можно изменять всевозможные вещи, такие как интервалы между блоками, текст, любые изображения или даже размер шрифта. Большинство вещей, которые могут быть изменены командой разработчиков, также могут быть изменены вами.
Немного повеселиться
Теперь DevTools - это не только работа и не игра. Одно из моих любимых применений DevTools - редактирование результатов поиска Google, таких как приведенный ниже.
Бесчисленное количество раз в офисе мы спорили о случайных фактах, таких как диаметр Земли или количество стран. Если сторона, за которую вы отстаиваете, неверна, вы всегда можете «отредактировать правду», пока она не сработает в вашу пользу.
Это возможно с помощью следующей команды, введенной в Консоль (помните, что переходите туда с помощью Cmd+Shift+C):
document.designMode = 'on';
Благодаря этому текст на любой странице становится редактируемым, как текстовый документ (на самом деле это связано с тем, как работает Medium).
Хотя это может и не принести ничего полезного, это определенно повод для смеха!
Заключение
Мы показали, как можно использовать Chrome DevTools для изучения конкурентов, определения того, что не работает с надстройками, изменения области просмотра, определения времени загрузки страниц и редактирования веб-страниц. все это может помочь специалистам по цифровому маркетингу, менеджерам по продукту или всем, кто работает с веб-сайтом, выполнять свою работу более эффективно. Это инструмент, которым я пользуюсь каждый день, и я надеюсь, что вы тоже воспользуетесь им!
Наконец, если вы хотите проверить свои новые навыки, попробуйте отредактировать предложение ниже:
_______ is awesome.
Если вы не знаете, чем его заполнить, всегда можно попробовать Jye.
Если вы хотите узнать о том, как я использовал DevTools для создания скрипта автоматического отслеживания, ознакомьтесь с этим:
Если вам понравилось это читать, не забудьте оставить пару-тройку хлопков… 👏👏👏🔄
Вы уже являетесь экспертом в DevTools? Какая ваша любимая функция? Напишите в комментариях.
Эта история опубликована в The Startup, крупнейшем предпринимательском издании Medium, за которым следят +384 072 человека.
Подпишитесь, чтобы получать наши главные новости здесь.
