Los feeds de Google Ads pueden contener varios precios por elemento, como el precio habitual y el precio de oferta. Puede añadir funciones a los anuncios dinámicos de Google Ads en Google Web Designer para determinar qué precio debe mostrarse en cada elemento del feed.
Obtenga más información sobre cómo crear anuncios dinámicos para Google Ads en Google Web Designer.
Mostrar un solo precio por elemento
Si el feed solo contiene un precio para cada elemento, vincule el contenido de texto asociado al precio con el atributo de precio que quiera mostrar, como Minorista 0 > Precio habitual.
Mostrar el precio de oferta junto con el precio habitual
Puede utilizar código para determinar cómo se muestran los precios, dependiendo de si un elemento tiene un precio de oferta y de si ese precio difiere del precio habitual. En el siguiente ejemplo, el precio de oferta del elemento en oferta se muestra debajo del precio habitual, que aparece tachado.
Las siguientes plantillas adaptables de Google Ads ya incluyen esta función:
- 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
No obstante, si sabe cómo usar Google Web Designer en la vista de código, puede añadir el código necesario siguiendo los pasos que se indican abajo. Este proceso funciona con el esquema dinámico de minoristas, pero es posible que pueda adaptarlo para otros tipos de feeds mediante distintos bindings.
1. Cree elementos de texto para los precios
Cree tres elementos de texto en la creatividad para incluir los siguientes tipos de precios.
- Precio predeterminado: cuando no hay precio de oferta, este precio se muestra solo.
- Precio de oferta: cuando se incluye en el feed, este precio se muestra junto con el precio habitual.
- Precio habitual: cuando se indica el precio de oferta en el feed, este precio se muestra junto al precio de oferta, normalmente tachado, para que los usuarios puedan compararlos.
2. Añada bindings
En el panel Dinámico, añada bindings dinámicos para el contenido de texto de los elementos de precio a los siguientes objetos de esquema de datos:
- Precio predeterminado: vincúlelo con Minorista 0 > Precio más bajo.
- Precio de oferta: vincúlelo con Minorista 0 > Precio de oferta.
- Precio habitual: vincúlelo con Minorista 0 > Precio habitual.
En los esquemas de datos que no sean de minoristas, es posible que deba vincular el precio predeterminado y el precio habitual con el mismo objeto de esquema de datos.
3. Añada clases
En la vista de código, añada las clases siguientes:
- Elemento superior que contiene los precios: añada la clase
js-itemal elemento superior. Si los precios forman parte de un grupo de la galería deslizable, añada esta clase a la instancia del grupo. - Precio predeterminado: añada la clase
js-item-priceal elemento de texto. - Precio de oferta: añada la clase
js-item-salepriceal elemento de texto. - Precio habitual: añada la clase
js-item-regularpriceal elemento de texto.
4. Añada funciones
En la vista de código, copie y pegue en su documento, dentro de la etiqueta , uno de los códigos de abajo, el que corresponda en función de si sus elementos se muestran en una galería deslizable o no.
Funciones si hay una galería deslizable
Este código presupone que su galería deslizable tiene el ID de swipegallery-items. Si no es así, sustituya el texto destacado por el ID correcto.
<script>
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>
Funciones si no hay ninguna galería deslizable
<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);
};
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>
5. Añada un evento
En la vista de diseño, vaya al panel Eventos y añada un nuevo evento para activar el código del paso anterior. Configure el evento de acuerdo con una de las tablas que aparecen a continuación, en función de si tiene una galería deslizable o no:
Evento si hay una galería deslizable
Si es necesario, cambie el ID de la galería deslizable en el código personalizado.
| Objetivo | swipegallery-items |
|---|---|
| Evento | Galería deslizable > Imágenes cargadas |
| Acción | Personalizar > Añadir acción personalizada |
| Código personalizado | var gallery = document.getElementById('swipegallery-items'); |
Evento si no hay ninguna galería deslizable
| Objetivo | page1 |
|---|---|
| Evento | Página > Preparado para presentar la página |
| Acción | Personalizar > Añadir acción personalizada |
| Código personalizado | var items = document.querySelectorAll('.js-item'); |