Как UX-дизайнер, вы всегда ищете способы улучшить производительность вашего сайта и удобство для пользователей.
Один из способов сделать это — изменить цвета, типографику и визуальные элементы вашего сайта с помощью CSS на основе отзывов клиентов.
А что, если бы я сказал вам, что вы можете изменить макет, типографику, цвета и другие визуальные элементы вашего веб-сайта и отслеживать результаты, что позволит вам увидеть, что лучше работает в создании положительного влияния на то, как пользователи воспринимают ваш бренд и взаимодействуют с вашим сайтом. сайт.
Начало работы с A/B-тестированием
Чтобы сделать решения об элементах и визуальных стилях более простыми и более управляемыми данными, вы можете использовать так называемое сплит-тестирование (также известное как A/B-тестирование) — метод, который UX-дизайнеры «позаимствовали» из мира маркетинга для сравнения производительности различные стили на вашем сайте.
Сплит-тестирование включает в себя случайное разделение трафика вашего веб-сайта между двумя или более версиями веб-страницы и измерение производительности каждой версии.
Сравнивая коэффициенты конверсии, показатели отказов и другие ключевые показатели каждой версии, вы можете определить, какая из них более эффективна, и принять решение о том, как оптимизировать свой сайт на основе данных.
Как провести собственное A/B-тестирование
В этой статье я покажу вам, как использовать немного Javascript для проведения раздельного тестирования, чтобы сравнить производительность различных стилей CSS на вашем веб-сайте.
В частности, мы объясним, как использовать JavaScript и Google Analytics 4 (GA4), чтобы отслеживать, какой файл CSS загружается для каждого посетителя, и как анализировать результаты сплит-теста в GA4.
Решением с низким кодом для этого в прошлом была оптимизация, но Google закрывает ее 30 сентября 2023 года и планирует встроить эту функцию в GA4 в будущем, так что это может быть полезно, если вы ищете обходные решения в краткосрочной перспективе. срок.
Шаг 1: создайте два файла CSS
Первый шаг — создать два файла CSS, которые вы хотите сравнить. Эти файлы должны иметь разные стили, макеты или другие визуальные элементы, которые вы хотите протестировать. Например, вы можете создать один файл CSS, использующий синюю цветовую схему, и другой файл CSS, использующий зеленую цветовую схему.
Рекомендуется изменять только небольшие вещи, которые вы можете измерить, поскольку большие отклонения могут привести к тому, что данные тестирования станут непригодными для использования.
Назовите каждый файл CSS чем-нибудь понятным, например css1.css и css2.css.
Шаг 2: Настройте код для сплит-тестирования
Затем вам нужно добавить на свой веб-сайт код, который случайным образом выбирает, какой файл CSS загружать для каждого посетителя. Для этого вы можете использовать следующую функцию JavaScript:
<script>
function splitTestCss(splitRatio) {
const randomNum = Math.random();
let cssToLoad;
if (randomNum < splitRatio) {
cssToLoad = './css1.css';
} else {
cssToLoad = './css2.css';
}
// send an event to Google Analytics 4 to track the split test
gtag('event', 'split_test', {
'css_variant': cssToLoad
});
// create a new link element and set its href attribute to the chosen CSS file
const newLinkElement = document.createElement('link');
newLinkElement.rel = 'stylesheet';
newLinkElement.href = cssToLoad;
document.head.appendChild(newLinkElement);
}
</script>
Эта функция принимает один аргумент, splitRatio, который представляет собой число от 0 до 1, определяющее разделение между двумя файлами CSS. Например, если вы установите splitRatio на 0,5, то 50% посетителей увидят css1.css, а 50% увидят css2.css.
Шаг 3. Добавьте код отслеживания в GA4.
Затем вам нужно будет пошагово закодировать свою аналитику Google, чтобы отслеживать результаты сплит-теста, вам нужно добавить код отслеживания на свой веб-сайт, который отправляет событие в GA4, когда каждый посетитель загружает страницу. Для этого можно использовать следующий фрагмент кода:
Примечание. Возможно, вы уже сделали это, если на вашем сайте работает GA4!
<!-- GA4 tracking code -->
<script async src="https://www.googletagmanager.com/gtag/js?id=GA_MEASUREMENT_ID"></script>
<script>
window.dataLayer = window.dataLayer || [];function gtag() {
dataLayer.push(arguments);
}
gtag('js', new Date());
gtag('config', 'GA_MEASUREMENT_ID');
</script>
Замените GA_MEASUREMENT_ID своим собственным идентификатором измерения GA4, который вы можете найти в настройках своей учетной записи GA4. Например: G-000000000
Шаг 4. Вызов функции сплит-тестирования
Затем вам нужно будет вызвать функцию splitTestCss на вашей веб-странице, чтобы случайным образом выбрать файл CSS для загрузки для каждого посетителя. Для этого выполните следующие действия:
- Откройте HTML-файл вашего веб-сайта в текстовом редакторе или редакторе кода.
- Добавьте следующий код в раздел
<head>вашего HTML-файла, чтобы связать два файла CSS.
<script>
function splitTestCss(splitRatio) {
const randomNum = Math.random();
let cssToLoad;
if (randomNum < splitRatio) {
cssToLoad = './css1.css';
} else {
cssToLoad = './css2.css';
}
// send an event to Google Analytics 4 to track the split test
gtag('event', 'split_test', {
'css_variant': cssToLoad
});
// create a new link element and set its href attribute to the chosen CSS file
const newLinkElement = document.createElement('link');
newLinkElement.rel = 'stylesheet';
newLinkElement.href = cssToLoad;
document.head.appendChild(newLinkElement);
}
</script>
Этот код указывает веб-браузеру загружать как css1.css, так и css2.css, когда посетитель загружает вашу веб-страницу.
убедитесь, что вы отредактировали код, чтобы установить файлы css на соответствующий путь
Затем добавьте следующий код в конец раздела <body> вашего HTML-файла, чтобы вызвать функцию splitTestCss:
<!-- Call the split testing function --> <script> splitTestCss(0.5); </script>
Этот код вызывает функцию splitTestCss с коэффициентом разделения 0,5, что означает, что 50% посетителей увидят css1.css, а 50% увидят css2.css. Вы можете настроить коэффициент разделения по мере необходимости, чтобы протестировать различные соотношения.
- Убедитесь, что функция
splitTestCssразмещена после скрипта в вашем HTML-файле. Это важно, потому что функцияsplitTestCssдолжна быть запущена, прежде чем ее можно будет вызвать позже на странице. - Сохраните изменения и загрузите обновленный файл HTML на свой веб-сервер.
Как только это будет сделано, каждому посетителю будет случайным образом назначен один из двух файлов CSS на основе указанного вами коэффициента разделения.
Это позволит вам сравнить производительность двух файлов CSS и принять решения о том, как оптимизировать визуальный дизайн вашего сайта на основе данных.
Шаг 5. Анализ результатов в GA4
После того, как сплит-тест пройдёт какое-то время, вы можете проанализировать результаты в GA4, чтобы увидеть, какой файл CSS работает лучше. Для этого выполните следующие действия:
- Войдите в свою учетную запись GA4 и выберите свойство и поток данных, соответствующие вашему веб-сайту.
- Перейдите в раздел «События» в левой панели навигации и щелкните событие
split_test, созданное на шаге 2. - В отчете о параметрах
css_variantвы должны увидеть две строки дляcss1.cssиcss2.css, в каждой из которых указано количество событий (т. е. просмотров страниц) и уникальных событий (т. е. уникальных посетителей) для каждого файла CSS. обслуживание и т. д. - Сравните показатели для каждого файла CSS, чтобы увидеть, какой из них работает лучше. Ищите различия в таких показателях, как показатель отказов, время на странице и коэффициент конверсии.
- Используйте результаты вашего сплит-теста, чтобы принимать решения, основанные на данных, о том, какие стили CSS использовать на вашем веб-сайте.
Заключение
Выполнив шаги, описанные в этой статье, вы, надеюсь, настроили собственный сплит-тест на своем веб-сайте и готовы вывести UX своих сайтов на совершенно новый уровень.
Веселитесь и удачи!
Дополнительные материалы на PlainEnglish.io.
Подпишитесь на нашу бесплатную еженедельную рассылку новостей. Подпишитесь на нас в Twitter, LinkedIn, YouTube и Discord.
Повысьте узнаваемость и признание вашего технического стартапа с помощью Circuit.
