Показ цен в динамических объявлениях Google Рекламы

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

Подробнее о том, как создавать динамические объявления Google Рекламы в Google Web Designer…

Показ одной цены для каждого товара

Если фид содержит только одну цену для каждого товара, свяжите текстовое содержимое элемента price с атрибутом цены, которую необходимо показывать, например так: Розничная торговля 0 > Обычная цена.

Показ цены со скидкой рядом с обычной ценой

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

Эта функция уже включена в следующие адаптивные шаблоны для Google Рекламы:

Dynamic Remarketing Single Page with Panels and Individual CTA Buttons;
Dynamic Remarketing with Aligned Panels and Individual CTA Buttons;
Dynamic Remarketing with Headline and Individual CTA Buttons;
Dynamic Remarketing with Headline and Single CTA Button;
Dynamic Remarketing with Pagination and Single CTA;
Dynamic Remarketing with Single CTA II.

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

1. Создайте текстовые элементы для цен

Добавьте в объявление три текстовых элемента для указанных ниже типов цен.

Цена по умолчанию (defaultPrice). Будет показана, если в фиде нет цены со скидкой.
Цена со скидкой (salePrice). Если вы ее добавите, она будет показана рядом с обычной ценой.
Обычная цена (regularPrice). Если в фиде есть цена со скидкой, то обычная цена будет показываться рядом (как правило, перечеркнутой), чтобы пользователи могли их сравнить.

2. Добавьте привязки

Откройте панель Динамические и свяжите текстовое содержимое элементов price с объектами набора атрибутов данных, как указано ниже.

Элемент defaultPrice связывается с атрибутом Розничная торговля 0 > Самая низкая цена.
Элемент salePrice связывается с атрибутом Розничная торговля 0 > Цена со скидкой.
Элемент regularPrice связывается с атрибутом Розничная торговля 0 > Обычная цена.

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

3. Добавьте классы

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

Родительский элемент, в котором содержатся цены. Добавьте класс js-item в родительский элемент. Если цены входят в состав перелистываемой галереи, то этот класс нужно добавить в экземпляр группы.
Элемент defaultPrice. Добавьте класс js-item-price в текстовый элемент.
Элемент salePrice. Добавьте класс js-item-saleprice в текстовый элемент.
Элемент regularPrice. Добавьте класс js-item-regularprice в текстовый элемент.

4. Добавьте функции

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

Функции при использовании перелистываемой галереи

Предполагается, что перелистываемой галерее присвоен идентификатор swipegallery-items. Если вы используете другой, замените выделенный текст.

initItemDisplay_ = function(item) {
gwd.myGallery = document.getElementById('swipegallery-items');
elems = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=item-name]');
elemsCta = document.querySelectorAll('#' + gwd.myGallery.id + ' [data-gwd-grp-id=cta-on]');

var itemPrice = item.querySelector('.js-item-price');
var itemSalePrice = item.querySelector('.js-item-saleprice');
var itemRegularPrice = item.querySelector('.js-item-regularprice');
displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
// turn off all item highlights.
for (let i = 0; i < elems.length; i++) {
elems[i].style.opacity = 0;
}
};

displayCorrectPrices = function(defaultPrice, salePrice, regularPrice) {
var priceValues = {
defaultPrice: defaultPrice && defaultPrice.textContent || null,
salePrice: salePrice && salePrice.textContent || null,
regularPrice: regularPrice && regularPrice.textContent || null
};
showSalePrice(true, defaultPrice, salePrice, regularPrice);
if (isSalePriceEnabled_(priceValues)) {
showSalePrice(true, defaultPrice, salePrice, regularPrice);
} else {
showSalePrice(false, defaultPrice, salePrice, regularPrice);
}

function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
showElement(defaultPrice, !state);
showElement(salePrice, state);
showElement(regularPrice, state);

function showElement(el, state) {
if (!el) return;
if (state) {
el.style.opacity = 1;
el.style.visibility = 'visible';
} else {
el.style.opacity = 0;
el.style.visibility = 'hidden';
}
};
};

function isSalePriceEnabled_(item) {
var isEnabled = item.salePrice && item.regularPrice &&
!isEmptyString(item.salePrice) && !isEmptyString(item.regularPrice) &&
stringValuesAreUnique(item.salePrice, item.regularPrice);
return isEnabled;

function isEmptyString(str) {
if (!str) {
return true;
}
str = str.trim();
return !str || !str.length;
};

function stringValuesAreUnique(value1, value2) {
var valuesNotEqual = value1 != value2;
var valuesBothEmpty = isEmptyString(value1) && isEmptyString(value2);
return valuesNotEqual && !valuesBothEmpty;
};
};
};

</script>

Функции при отсутствии перелистываемой галереи

initItemDisplay_ = function(item) {
var itemPrice = item.querySelector('.js-item-price');
var itemSalePrice = item.querySelector('.js-item-saleprice');
var itemRegularPrice = item.querySelector('.js-item-regularprice');
displayCorrectPrices(itemPrice, itemSalePrice, itemRegularPrice);
};

function showSalePrice(state, defaultPrice, salePrice, regularPrice) {
showElement(defaultPrice, !state);
showElement(salePrice, state);
showElement(regularPrice, state);

function showElement(el, state) {
if (!el) return;
if (state) {
el.style.opacity = 1;
el.style.visibility = 'visible';
} else {
el.style.opacity = 0;
el.style.visibility = 'hidden';
}
};
};

function isEmptyString(str) {
if (!str) {
return true;
}
str = str.trim();
return !str || !str.length;
};

</script>

5. Добавьте событие

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

Событие при использовании перелистываемой галереи

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

Цель	`swipegallery-items`
Событие	Перелистываемая галерея > Изображения загружены
Действие	Специальное > Добавить дополнительное действие
Собственный код	`var gallery = document.getElementById('swipegallery-items'); var items = gallery.querySelectorAll('.js-item'); for (var i = 0; i < items.length; i++) { var item = items[i]; initItemDisplay_(item); }`

Событие при отсутствии перелистываемой галереи

Цель	`page1`
Событие	Страница > Страница готова к показу
Действие	Специальное > Добавить дополнительное действие
Собственный код	`var items = document.querySelectorAll('.js-item'); for (var i = 0; i < items.length; i++) { var item = items[i]; initItemDisplay_(item); }`

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

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