Показ нескольких элементов в галереях динамических объявлений Google Рекламы

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

Использование шаблона

Во всех шаблонах из категории Галереи шаблонов Dynamic Remarketing for Google Ads (кроме Dynamic Remarketing Blank Slate) отслеживание уже настроено, если вы используете макет по умолчанию.

Если вы создаете объявление с нуля на основе шаблона Dynamic Remarketing Blank Slate или добавляете дополнительные динамические элементы, следуйте инструкциям на этой странице.

Шаг 1. Настройка группы элементов

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

Создайте элементы-теги для одного товара. Например, название товара и его изображение.
Создайте группу с этими элементами: выделите их, нажмите на выделенную область правой кнопкой мыши и выберите Создать группу.
Введите название группы и нажмите OK.

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

Шаг 2. Показ элементов в галерее

Элементы фида можно показывать в перелистываемой или круговой галерее.

Добавьте галерею в рабочую область.
На панели Свойства галереи задайте идентификатор (например, gwd-swipegallery_1).
В поле свойства Группы введите название ранее созданной группы (например, Group1).

Шаг 3. Добавление динамических привязок

Свяжите элементы файлов объявлений с фидом с помощью привязки динамических данных.

На панели Динамическая нажмите кнопку Добавить динамические привязки . Откроется диалоговое окно "Динамические свойства".
Выберите набор атрибутов данных, если вы этого ещё не сделали.
Свяжите атрибут каждого элемента в группе с соответствующим объектом набора атрибута данных.
Добавьте привязку в группу в галерее и выберите атрибут элементаПовторять для каждого объекта в коллекции. Назначьте объект набора атрибутов данных элементом наивысшего уровня, соответствующим вашему набору атрибутов данных (например, Розничная торговля или Туризм).
Нажмите ОК.

Теперь можно удалить копию группы из рабочей области.

Шаг 4. Добавление событий взаимодействия с пользователем в галерею

Чтобы можно было отслеживать активный элемент в объявлении, все элементы должны содержать события mouseover и mouseout.

Нажмите правой кнопкой мыши и выберите Добавить событие, чтобы добавить новое событие Мышь > mouseover.
Выберите действие Пользовательское > gwd.itemMouseover и нажмите OK.

Добавьте указанные ниже дополнительные события (всего пять событий с галереей в качестве цели):

Событие	Действие
Мышь > mouseover (добавленное на предыдущих этапах)	Пользовательское > gwd.ItemMouseover
Мышь > mouseout	Пользовательское > gwd.ItemMouseout
Мышь > click	Пользовательское > gwd.exitToItem
Перелистываемая галерея или Круговая галерея > Кадр активирован	Пользовательское > gwd.galleryFrameActivated
Перелистываемая галерея или Круговая галерея > Кадр показан	Пользовательское > gwd.galleryFrameShown

Шаг 5. Редактирование в режиме просмотра кода

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

Найдите группу элементов, вложенную в элемент галереи. Добавьте в группу элементов класс js-item.

<gwd-swipegallery id="gwd-swipegallery_1" scaling="contain" pause-front-media="" resume-next-media="" class="gwd-swipegallery-19o0" groups="Group1">
  <div class="js-item" data-gwd-group="Group1" id="Group1_1" style="height: 100%; width: 100%;" bind-each-item="Product"></div>
</gwd-swipegallery>

В режиме просмотра кода найдите функцию handleWebComponentsReady. Удалите символы //, чтобы раскомментировать строку, которая вызывает функцию common.setGallery, а затем замените значение swipegallery-items на идентификатор своей галереи (например, gwd-swipegallery_1).

/**
  * Handles the WebComponentsReady event. This event is fired when all
  * custom elements have been registered and upgraded.
  */
function handleWebComponentsReady(event) {
  // Start the Ad lifecycle.
  setTimeout(function() {
    // add reference to your swipegallery to access via custom JS, passing in its ID:
    //common.setGallery('swipegallery-items');

    gwdAd.initAd();
  }, 0);
}

Дальнейшие действия

Узнайте, как создать фид данных для динамических объявлений.
Просмотрите свое объявление с образцом данных, чтобы узнать, как оно будет выглядеть.

Эта информация оказалась полезной?

Как можно улучшить эту статью?