Google Optimize: пошаговая инструкция. Добавляем другие счетчики

Хотите проверить, как изменится эффективность рекламы в зависимости от определенных элементов посадочной страницы? Используйте Google Optimize — инструмент, в котором можно настроить эксперимент без сторонней помощи.

Google Optimize позволяет:

• скрыть, добавить или изменить определенные элементы на сайте — тексты, изображения, кнопки и тому подобное;
• сравнить разные посадочные страницы;
• протестировать страницы с разным дизайном.

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

Для работы Google Optimize нужно:

Рассмотрим подробнее настройки эксперимента на примере A/B-теста.

2.1. A/B-тест — рандомизированный эксперимент с двумя или более вариантами одной страницы;

2.2. Мультивариантный тест — тестирование нескольких элементов одной страницы;

2.3. Редирект позволяет сравнивать две разные целевые страницы или варианты дизайна одной страницы;

3.1. Чтобы связать Optimize с вашей аналитикой, нажмите ссылку «Go to container page».

Кликните на кнопку «Link property» и в открывшемся окне выберите ресурс и представление Google Analytics.

3.2. Пропустите окно с предложением установить код Google Optimize на сайт — далее мы подробно рассмотрим установку необходимых кодов.

Нажмите на созданный эксперимент, чтобы открыть окно с настройками его работы.

Вариант в Google Optimize — модификация выбранного элемента страницы, которую вы хотите сравнить с нынешним видом элемента.

4.1.1. По умолчанию система уже создала исходный вариант под названием «Original». Чтобы добавить тестовый вариант, нажмите «+New Variant».

Укажите имя нового варианта страницы и нажмите «Add».

4.2.2. Нажмите на созданный вариант и подождите пока загрузится страница, для который вы хотите настроить эксперимент.

В открывшемся окне вы можете:

• удалить элемент страницы;
• изменить размер или расположения элемента;
• изменить текст на сайте, а также его шрифт, выравнивание, размер или цвет надписи;
• добавить фон в виде заливки цветом, установить рамку или изменить прозрачность.
• редактировать HTML или JavaScript код.

Сохраните внесенные изменения.

По умолчанию система ставит равный вес каждому варианту страницы.

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

Чтобы изменить вес варианта, нажмите на значок этой настройки.

В открывшемся окне введите необходимый вес для каждого варианта и нажмите «Done».

Чтобы оценить работу вариантов эксперимента, нужно настроить цели. Например, вы можете посмотреть, как новый дизайн сказался на количестве отказов или конверсионности страницы.

4.3.1. В Google Optimize есть три типа целей:

• просмотры страниц;
• длительность сессии;
• отказы.

4.3.2. Также вы можете использовать цели из Google Analytics. Для этого перейдите к пункту «Objectives» и нажмите «Link to a Google Analytics view».

В открывшемся окне выберите нужное представление:

4.3.3. Вы можете сочетать стандартные цели Google Optimize с собственными целями из Analytics, однако в бесплатной версии можно использовать только три цели одновременно.

В эксперименте могут принимать участие все пользователи сайта или выбранные по определенным критериям. Опишу подробнее, что вы можете настроить на вкладке «Targeting».

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

На этой же вкладке вы можете изменить при необходимости вес вариантов, нажав «Edit».

Настройки таргетинга в Google Optimize позволяют указать, когда нужно активировать эксперимент.

По умолчанию активация происходит при загрузке страницы. Чтобы установить событие как активатор, перейдите в раздел «When» и выберите поле «Custom event».

В Google Optimize доступно десять типов таргетинга, на основе которых вы можете создать собственное правило срабатывания эксперимента.

• URL targeting — таргетинг на URL;
• Audience targeting — аудитории, созданные в Google Analytics (доступно только для пользователей платной версии Optimize);
• Behavior targeting — новые или вернувшиеся посетители, которые перешли из определенных источников;
• Geo targeting — посетители из определенного города региона или страны;
• Technology targeting — пользователи, использующие определенное устройство, браузер или операционную систему;
• JavaScript variable — значение JavaScript переменной, используемой на сайте;
• First-party cookie — таргетинг на cookie пользователей;
• Custom JavaScript — пользовательский код, который позволяет таргетироваться на основе информации, недоступной в предыдущих способах таргетинга (например, время суток).
• Query Parameter — гет-параметры, при этом типе таргетинга вы можете нацеливать эксперимент по utm-меткам;
• Data Layer variable — базируется на значениях, которые хранятся в переменных уровня данных.

6.1. Откройте меню с шагами настройки эксперимента и перейдите к инсталляции Optimize.

В открывшемся окне скопируйте идентификатор аккаунта Google Optimize.

6.2. Перейдите в Google Tag Manager и создайте новый тег типа «Google Optimize».

6.3. В настройках тега укажите идентификатор отслеживания Google Analytics и идентификатор аккаунта Optimize, который вы скопировали ранее.

Сохраните новый тег. Триггеры для него не понадобятся.

6.4. Теперь нужно изменить порядок выполнения тегов, чтобы тег Optimize срабатывал раньше Google Analytics.

Перейдите в расширенные настройки тега Analytics, поставьте галочку возле пункта «Активировать тег перед тегом Google Analytics» и выберите из списка тег Google Optimize.

Обратите внимание, что код Google Optimize состоит из двух частей. Вторую часть необходимо установить непосредственно на сайте, чтобы посетители сайта не видели сам процесс подмены элементов.

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

Вы можете использовать приведенный ниже скрипт как пример:

.async-hide { opacity: 0 !important} div#pageloaddiv { visibility:visible !important; position: fixed; left: 0px; top: 0px; width: 100%; height: 100%; z-index: 1000; background: url("") no-repeat center center; } (function(a,s,y,n,c,h,i,d,e){ s.className+=" "+y; var div = document.createElement("div"); div.id = "pageloaddiv"; div.style = "opacity: 1 !important"; document.documentElement.appendChild(div); h.start=1*new Date; h.end=i=function(){ s.className=s.className.replace(RegExp(" ?"+y),"") }; (a[n]=a[n]||).hide=h; setTimeout(function(){ i(); h.end=null; document.getElementById("pageloaddiv").style.opacity = 0; document.getElementById("pageloaddiv").style.zIndex = 0; setTimout(function () { document.getElementById("pageloaddiv").parentNode.removeChild(div); }, 300); },c); h.timeout=c; })(window,document.documentElement.lastChild,"async-hide","dataLayer",4000,{"GTM-xxxxxxx":true});

Google Optimize — мощный инструмент для тестирования эффективности вашего сайта, его отдельных страниц и элементов.

Как с ним работать:

Рассказываем, как настроить Google Optimize, связать сервис с Google Tag Manager и провести свой первый эксперимент.

Google Optimize 360 - сервис для тестирования интерфейса сайта, который компания Google анонсировала весной 2016 года. Он позволяет проводить А/В и мультиканальные тестирования и собирать данные о поведении пользователей на сайте.

Осенью 2016 года сервис заработал в режиме бета-тестирования, а недавно бесплатная версия стала доступна для всех.

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

Специалисты компании Forester Research доказали , что удобство и внешний вид сайта сильно влияют на поведение пользователей. Тестирование как вид исследования эффективности сайта подходит и , и сайтам-визиткам, и большим корпоративным сайтам. Тестировать можно изображения, описания товаров и услуг, кнопки призыва к действию, таблички с ценами, формы обращения. Ранее мы писали о , а сегодня расскажем, как пользоваться Google Optimize.

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

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

Придумайте название для контейнера. Контейнер - это код, который передается через Google Optimize и позволяет вам менять работу пользователей.

Следующим шагом нужно связать Google Optimize и Google Analytics (далее - GA).

Нажмите кнопку "Link property" и выберите аккаунт в Analytics, который вы хотите связать с Optimize.

Сервис спросит, к каким представлениям нужно получить доступ, лучше отметить все. Далее нажмите синюю кнопку "Link" в верхнем правом углу.

Также код Optimize можно разместить через Google Tag Manager.

Создайте новый аккаунт в GTM:

Добавьте код GTM себе на сайт:

Создайте новый тег:

Добавьте свой код GA. С сайта его уже можно удалить, если был. Теперь все счетчики можно добавлять через GTM.

ID своего GA вы найдете на сайте GA. Вставьте его в форму.

Выбирете триггер "All page":

Потом добавьте еще один тег с GA.

Идентификатор отслеживания GA - вставьте код GA.

Идентификатор контейнера гугл оптимизации

Триггеры - все страницы. Тэг GO должен вызываться перед тэгом GA.

Последний триггер нужен для того, чтобы Optimize поделил пользователей на две части перед тем, как отправить информацию в GA.

Чтобы все ваши теги и изменения начали работать на сайте, не забудьте нажать кнопку "Опубликовать" в GTM:

Кстати, в GTM вы можете добавить и счетчик Яндекс метрики, LiveInternet, счетчик ремаркетинга или наш счетчик Анализа. Это делается так:

Создайте новый тег и выберите "Пользовательский HTML".

Вставьте нужный код, не забудьте про теги :

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

Чтобы пользователи не видели, что на них проводят тесты, кроме кода, размещенного через Tag Manager, Optimize предлагает добавить специальный код, его нужно добавить в код сайта перед вызовом GTM. Это не обязательно.

После того, как все сниппеты готовы, вернитесь в Optimize и нажмите "Done".

Чтобы начать эксперимент, нажмите кнопку "Create experiment"

Введите название эксперимента и адрес нужной страницы.

Сервис предложит выбрать варианты теста: А/В, Многовариантные тесты, Редирект тест. Выберем А/В.

В разделе "Variants" вы увидите блок "Original" - это отображение уже существующей страницы сайта. Чтобы добавить еще один вариант интерфейса, нажмите "New variant" и введите название.

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

Теперь у вас есть два варианта страницы. Чтобы внести изменения в новый вариант, кликните на надпись "0 changes", и сервис предложит вам установить расширение для браузера.

После установки ваша страница будет выглядеть так:

В красном поле вы увидите статус "Draft" - это значит, что ваши изменения пока в черновике. Также в нем отображается название варианта интерфейса, там вы можете открыть оригинал или создать еще один вариант.

Правее можно посмотреть, как страница будет отображаться на разных устройствах.

Чтобы прописать CSS, нажмите "< >" справа в сером блоке ниже.

Чтобы изменить элемент страницы, наведите на него курсор. Кликните правой кнопкой мыши, и откроются возможные действия - удалить, изменить текст, поменять код HTML, вставить код HTML, запустить код JavaScript.

Также вы можете поменять шрифт, размер текста, межстрочный интервал, фон, прозрачность, выравнивание, подчеркивание и многое другое.

В верхнем красном блоке вы будете видеть, сколько изменений уже сделано. Любое из них можно отредактировать или отменить.

Можно настроить действия с элементами: менять их местами или располагать произвольно. По умолчанию они меняются местами.

В интерактивном режиме можно редактировать элементы, которые появляются при наведении или клике.

Чтобы открыть интерактивный режим, нажмите

Настроить показ скрытого через СSS элемента можно через "< >".

После того, как вы закончите менять элементы страницы, нажмите "Save", а потом "Done" в правом верхнем углу.

Следующий шаг - настройка целей в разделе "Objectives".

Выберите основную и дополнительную цели. Это может быть длина сессии, просмотры страниц, отказы, заработок из AdSense или другая цель. В поле справа пропишите гипотезу эксперимента.

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

Ниже настройте представление. Выберите то, где настроены цели и предоставляется максимум данных об активности посетителей сайта.

После всех настроек ваш эксперимент готов к запуску.

Обратите внимание: после нажатия кнопки "Start experiment" эксперимент изменить нельзя, его можно удалить и создать новый.

В ближайшее время мы планируем протестировать один или несколько элементов нашего сайта. Обязательно поделимся результатами и подробно разберем отчет.

Google Optimize 360 – это новая платформа от Google, входящая в комплект Google Analytics 360 Suite. Представляет собой инструмент для проведения количественных (A/B, MVT) тестирований и персонализации сайта. Функционал Optimize 360 позволяют решать масштабные и долгосрочные задачи, стоящие перед большими предприятиями и корпорациями. Версию 360 отличает набор преимуществ, влияние которых очень важно для сайтов с высоким трафиком, поэтому инструмент будет полезен в первую очередь крупным клиентам со значительным трафиком

Одним из очевидных плюсов является интеграция с Google Analytics, что значительно облегчает доступ к данным этой системы и дает больше преимуществ по сравнению с другими инструментами тестирования. В версии 360 можно запускать тесты для определенных сегментов аудитории, а после эксперимента выявить лучший сегмент с помощью кастомных отчетов. Также можно применять тонкую настройку таргетингов, включая переменные JavaScript и Data Layer.
Существует возможность импортировать до 10 уже настроенных целей из Google Analytics, а внести изменения, например, добавить новые цели, можно в процессе проведения теста или после его завершения.

Самый долгий этап в подготовке тестирования, разработка вариантов и согласование, при таком подходе становится значительно короче и легче в реализации. Визуальный редактор позволяет вносить изменения на сайт без привлечения команды разработчиков и дизайнеров. В редакторе можно вносить изменения в код HTML и JavaScript, править стили CSS. С помощью него вы можете править всю страницу, один или несколько элементов, оценить полученное в режиме предварительного просмотра – и уже запустить тест.

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

Настройка Optimize 360 не отнимет много времени.

1. Создать учетную запись и контейнер Optimize.

2. Установить связь между аккаунтами Optimize и Analytics.

3. Разместить код Optimize на всех страницах сайта с помощью GTM или в коде сайта.

Создаем контейнер в Google Optimize.

Здесь мы можем настроить доступы:

1. к аккаунту на уровне:

Администратора,

Пользователя;

2. к контейнеру с правами:

Редактирования,

Публикации.

На панели в правой части экрана нажимаем Link to Google Analytics и выбираем свойство Google Analytics, соответствующее домену, в котором будут выполняться эксперименты.

После того, как был создан контейнер Optimize и связан с Google Analytics, добавляем код на страницы сайта. Один из способов - разместить его с помощью Google Tag Manager.

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

Вводим название эксперимента и редактируемую страницу. Editor Page - это страница, на которой будут вноситься изменения с использованием визуального редактора. Применить изменения к другим страницам можно будет в настройках таргетинга немного позже.

– A/B test (или A/B/N). Проверяет два или более вариантов страницы.

Multivariate test. Использует различные комбинации тестируемых элементов на странице.

Redirect test. Выбираем, когда необходимо протестировать отдельные веб-страницы с URL-адресами или путями.

Интерфейс эксперимента на примере классического A/B-теста.
Существуют две основные вкладки:
Details – где отображаются варианты теста и надстройки эксперимента.
Reporting – де отображаются данные эксперимента и отчеты.

Details – Variants
1. В этом блоке мы можем посмотреть:

2. Количество вариантов в эксперименте.

3. Распределение трафика в процентном соотношении.

4. Параметры для предварительного просмотра эксперимента на мобильных устройствах. Также можно создать ссылку для просмотра.

Количество изменений, внесенных в вариант.

Действия - редактирование или удаление.

Variants – Configuration - OBJECTIVES

В этом блоке необходимо определить цель(и) эксперимента и указать описание или исследуемую гипотезу.
Variants – Configuration – TARGETING

У Optimize 360 также есть расширенная настройка тестов:

Мы можем установить таргетинги для определенных веб-страниц, на которых должны выполняться эксперименты, выбрать целевые аудитории, созданные в Google Analytics, отслеживать трафик с определенного канала или источника, установить гео-таргетинги, определить браузер или устройство, применить настройку JavaScript и параметров Query.
Каждый параметр таргетинга при этом имеет различные типы соответствия, в том числе на основе регулярных выражений.
Visual editor

В визуальном редакторе можно за пару минут поменять заголовок, шрифт и цвет текста, добавить изображение, исключить поле e-mail из формы заказа или перенести кнопку в другую часть сайта – правки такого типа теперь можно сделать самостоятельно. Самое главное при этом ориентироваться на имеющиеся гипотезы, потому как подход «тест ради теста» или «а давайте что-нибудь поменяем» не приведет к конечному результату.

Прежде чем запускать эксперимент, необходимо просмотреть изменения через расширение Chrome Optimization Google. Минимальный период проведения эксперимента, как минимум, две недели.
По мере запуска эксперимента данные постепенно будут отображаться в отчете. Когда будет собрано достаточное количество данных, система сможет определить наилучший вариант. Выглядеть это будет так:

В следующем блоке отображаются результаты достижения целей для каждого тестируемого варианта:

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

Резюме
Функционал Optimize 360 позволяет провести расширенную настройку экспериментов, не привлекая команду разработчиков и дизайнеров.
Возможность оперативного запуска тестов, в обход долгому этапу правок и согласований между отделами, крайне актуальна для крупных организаций.
Полная интеграция с Google Analytics, расширенная отчетность, работа с сегментами аудитории, углубленные настройки экспериментов, точные методы подсчета статистической достоверности, удобный интерфейс - все это отличается версию Optimize 360 от Optimize и других платформ.