404 Примеры страниц с ошибками: пользовательские, анимированные и интерактивные

1. Анимированные, интерактивные и настраиваемые примеры страниц с ошибками 404 с инструкциями по отслеживанию...
2. Основные элементы страницы 404
3. Что вы должны включить в свою страницу ошибки 404?
4. 404 Page Analytics: отслеживание ошибок 404 с помощью Google Tag Manager
5. Еще 404 примера
6. Лего
7. Gymbox
8. диво

Анимированные, интерактивные и настраиваемые примеры страниц с ошибками 404 с инструкциями по отслеживанию ошибок в Google Tag Manager / Google Analytics

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

Независимо от причины, 404 ошибки случаются, и лучше всего, чтобы вы были к ним готовы .

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

Зачем вам нужна пользовательская страница 404

На вашем сайте легко найти неработающую ссылку. Надеюсь, это не то, что выглядит так:

Средний пользователь Интернета может не знать, что ошибка 404 означает, что искомая страница отсутствует.

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

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

Основные элементы страницы 404

Есть много способов, которыми вы можете воспользоваться своими страницами с ошибками 404. Мне нравится баланс творческого и конструктивного.

Например, Airbnb смешивает полезный список популярных внутренних ссылок с креативной анимацией:

Что вы должны включить в свою страницу ошибки 404?

Попробуйте эти полезные соображения для вашей страницы ошибки:

• Каковы главные вещи, которые посетители обычно хотят, когда они приходят на ваш сайт?
• Какова основная цель вашего бизнеса. Может ли ваше сообщение подкрепиться креативом на вашей странице 404?
• Есть ли особый призыв к действию, который важен для вашего бизнеса?
• Это не вина вашего клиента, что они перешли на страницу 404, это ваше. Можете ли вы воспользоваться возможностью, чтобы осветить ситуацию и обеспечить некоторое развлечение?
• Это возможность для ваших креативщиков! Крутые страницы с ошибками 404 часто представляют интересный проект для вашей команды.

Eharmony используйте легкомысленное сообщение и сильный призыв к действию.

В большинстве случаев этого творческого коллектива достаточно, чтобы создать что-то захватывающее. Мы рассмотрим несколько примеров, но давайте рассмотрим отслеживание ошибок. в Google Analytics первый.

404 Page Analytics: отслеживание ошибок 404 с помощью Google Tag Manager

Правильно настроенная система отслеживания 404 на вашем веб-сайте будет означать, что большинство, если не все ошибки отслеживаются, что дает вам множество возможностей для их устранения.

Во-первых, вы должны быть уверены, что запускаете скрипт Google Tag Manager на своей странице 404. Это достаточно просто - вы можете вручную проверить исходный HTML-код страницы или установить Tag Assistant (от Google) для Chrome ,

Google Tag Assistant работает на странице встроенных пользовательских ошибок

Чтобы отслеживать страницы ошибок 404 с помощью диспетчера тегов, вы создадите пользовательскую переменную под названием «Переменная заголовка страницы».

Тип переменной - это переменная JavaScript, а имя переменной - document.title:

Эта пользовательская переменная возвращает значение заголовка страницы. Теперь нам нужно создать триггер

В вашей учетной записи Google Tag Manager перейдите в раздел «Триггеры» и создайте триггер на случай, если заголовок страницы совпадает с тем, что содержится в теге заголовка вашей пользовательской страницы ошибки 404.

Наша страница содержит «Страница не найдена», поэтому мы установим триггер на это значение. Будьте осторожны, так как этот тип соответствия будет чувствительным к регистру. Если вы не уверены, используйте «соответствует RegEx (игнорировать регистр)».

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

Когда вы закончите, продолжайте и публикуйте.

Еще 404 примера

Builtvisible

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

Лего

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

Gymbox

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

диво

Даже Глаз Уату не видит твоей просьбы! Отлично продуманная и очень фанатичная страница 404 с некоторыми базовыми интерактивными компонентами, чтобы обеспечить немного развлечения.