События активации

Как использовать эксперименты Google Оптимизации на динамических сайтах и в одностраничных приложениях.

По умолчанию Оптимизация изменяет контент веб-страницы только во время первоначальной загрузки. Однако динамические сайты (созданные с использованием AMP, React, Angular и т. д.) и одностраничные приложения могут загружать дополнительный контент уже после этого. Оптимизация позволяет изменять такой веб-контент с помощью событий активации.

Чтобы запустить эксперимент Оптимизации, используя событие активации, нажмите Загрузка страницы [Изменить] и в появившемся списке выберите Во время специального события или Постоянно.

Кнопка события активации

Типы событий активации

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

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

Советы по использованию событий активации

Независимо от того, какой вариант вы выберете (Во время специального события или Постоянно), для запуска эксперимента оптимизации должны быть соблюдены все правила таргетинга на страницу и аудиторию.

Вариант 1. Постоянная активация.

Это рекомендуемый вариант для большинства динамических сайтов.

Если выбрать Событие активации > Постоянно, Оптимизация автоматически применяет список изменений, когда это становится возможным (например, сразу после обнаружения элементов, которые соответствуют условиям).

Google Оптимизация непрерывно следит за тем, добавлялся ли контент на страницу после ее первоначальной загрузки. Для этого используется API MutationObserver, встроенный в современные веб-браузеры. При обнаружении нового контента Оптимизация повторно сканирует страницу и применяет список изменений ко всем элементам, которые соответствуют условиям.

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

Примечание
 
Оптимизация изменяет только новые экземпляры элемента. Например, согласно вашим настройкам Оптимизация выделяет красным контуром кнопку "Купить" для товара, если выполняется условие class="sale". Когда посетитель сайта прокручивает страницу, на ней появляется больше товаров с кнопкой "Купить". Оптимизация будет изменять только эти появившиеся кнопки, а не каждую кнопку, которая загрузилась на странице. Оптимизация изменяет экземпляр элемента только один раз. Если вам необходимо изменить его несколько раз, используйте специальное событие активации.

Настройка постоянной активации

Чтобы эксперимент Оптимизации активировался постоянно:

  1. Создайте эксперимент (A/B-тестирование, многовариантное тестирование, эксперимент с переадресацией или персонализацию).
  2. На странице сведений об эксперименте выберите Настройки > Событие активации.
  3. Нажмите   Загрузка страницы [Изменить].
  4. В раскрывающемся меню выберите Оценка > Постоянно.
  5. Нажмите Готово.

Скриншот с параметром "Событие активации" в Оптимизации

Примечание. Эксперимент Оптимизации активируется только в том случае, если все правила таргетинга на страницу и аудиторию оказываются истинными.

Автоматическое отключение

Если правила таргетинга на страницу или аудиторию для вашего эксперимента не соблюдаются, Оптимизация автоматически отменяет изменения.

Примечание. Изменения JavaScript, отменить автоматически нельзя. Чтобы восстановить предыдущее состояние, необходимо добавить обратный вызов деактивации и указать его как возвращаемое значение.

Вариант 2. Специальное событие.

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

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

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

  1. Создайте специальное событие на уровне данных сайта.
  2. Создайте переменную уровня данных.
  3. Активируйте событие с помощью JavaScript.

Создание специального события

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

  1. Рядом с параметром Событие активации нажмите Загрузка страницы [Изменить].
  2. В раскрывающемся меню выберите Оценка > Во время специального события.
  3. Укажите Название события (например, optimize.activate) на уровне данных.
  4. Нажмите Готово.

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

Создание переменной уровня данных

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

  1. Нажмите Переменная уровня данных > Создание переменной.
  2. Введите имя переменной уровня данных, значение которой будет использовано.
  3. Укажите название своей новой переменной.
  4. Нажмите Создать переменную.

Создание переменной уровня данных в Оптимизации

Активация события с помощью JavaScript

Выполнив перечисленные выше шаги, необходимо активировать событие уровня данных (с помощью названия события, которое вы указали), чтобы запустить эксперимент Оптимизации. Когда целевая веб-страница загрузится в достаточной мере, активируйте эксперимент Оптимизации с помощью следующего фрагмента кода JavaScript:

dataLayer.push({'event': 'optimize.activate'});

После активации события optimize.activate оцениваются дополнительные условия таргетинга, и только если они соблюдены, запускается эксперимент (применяется список изменений).

Пример

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

Повторная активация списка изменений

Эксперимент можно настроить так, чтобы при выполнении всех условий таргетинга событие активировалось несколько раз.

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

Пример

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

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

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

В примере выше будет использоваться следующее условие таргетинга: "Есть ли товары в корзине?".

Когда пользователь впервые добавит товар в корзину, активируется список изменений и Оптимизация:

  • вставит изображение после этого товара в корзине;
  • вставит универсальное сообщение о специальном предложении вверху страницы.

Когда пользователь снова добавит товар в корзину, повторно активируется список изменений и:

  • вставит изображение после второго товара в корзине.

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

Деактивация списка изменений

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

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

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

Изменения JavaScript отменить автоматически нельзя. Для этого необходимо добавить обратный вызов деактивации и указать его как возвращаемое значение.

Одностраничные приложения и виртуальные страницы

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

Это возможно в тех случаях, когда веб-приложения не сопоставляют виртуальную страницу с фрагментом URL. Например, на некоторых сайтах используются межстраничные объявления для подписки на новости. Они отлично подходят для A/B-тестирования. Чтобы провести эксперимент с такими межстраничными объявлениями (и другими подобными элементами), в эксперимент Оптимизации необходимо добавить дополнительные условия таргетинга. Таргетинг на основе переменных JavaScript позволяет проверить наличие определенного контента или элементов.

Деактивация очень важна для одностраничных приложений, которые изменяют стиль компонентов, повторно использующихся на нескольких страницах, с помощью правил CSS. Когда приложение переходит к другой виртуальной странице, теги <STYLE> текущей виртуальной страницы удаляются из раздела <HEAD>.

Активация списка изменений в одностраничном приложении

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

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

Пример фрагмента кода:

myapp.run(function($rootScope, $timeout) {
   $rootScope.$watch(function(){
     $timeout(function(){
       dataLayer.push({'event': 'optimize.activate'});
     },0,false);
   })
})
Эта информация оказалась полезной?
Как можно улучшить эту статью?
Поиск
Удалить поисковый запрос
Закрыть поиск
Приложения Google
Главное меню
Поиск по Справочному центру
true
101337
false
false