Google Ads dinamik reklamlarda fiyatları görüntüleme

Google Ads feed'leri, bir öğe için normal fiyat ve indirimli fiyat gibi birden fazla fiyat içerebilir. Her feed öğesi için hangi fiyatın gösterileceğini belirlemek için Google Web Designer'da Google Ads dinamik reklamlarına işlev ekleyebilirsiniz.

Google Web Designer'da Google Ads için dinamik reklamlar oluşturma hakkında daha fazla bilgi edinin.

Her öğe için tek fiyat görüntüleme

Feed'inizde her öğe için tek bir fiyat varsa fiyat öğesinin metin içeriğini, göstermek istediğiniz fiyat özelliğine bağlayın. Örneğin, Perakende 0 > Normal fiyat.

Normal fiyat ile indirimli fiyatı görüntüleme

Öğelerin indirimli fiyatı olup olmamasına ve indirimli fiyatın normal fiyattan farklı olup olmamasına bağlı olarak fiyatların nasıl gösterileceğini belirlemek için kod kullanabilirsiniz. Aşağıdaki örnekteki öğenin indirimli fiyatı, üstü çizili olan normal fiyatının altında gösteriliyor.

Bu işlev halihazırda aşağıdaki Google Ads'e yönelik uyumlu şablonlarda mevcuttur:

Dynamic Remarketing Single Page with Panels and Individual CTA Buttons (Panel ve Bağımsız CTA Düğmesi İçeren Tek Sayfa Dinamik Yeniden Pazarlama Şablonu)
Dynamic Remarketing with Aligned Panels and Individual CTA Buttons (Hizalanmış Panel ve Bağımsız CTA Düğmesi İçeren Dinamik Yeniden Pazarlama Şablonu)
Dynamic Remarketing with Headline and Individual CTA Buttons (Başlık ve Bağımsız CTA Düğmesi İçeren Dinamik Yeniden Pazarlama Şablonu)
Dynamic Remarketing with Headline and Single CTA Button (Başlık ve Tek CTA Düğmesi İçeren Dinamik Yeniden Pazarlama Şablonu)
Dynamic Remarketing with Pagination and Single CTA (Sayfalara Ayırma ve Tek CTA Düğme İçeren Dinamik Yeniden Pazarlama Şablonu)
Dynamic Remarketing with Single CTA II (Tek CTA II içeren Dinamik Yeniden Pazarlama Şablonu)

Alternatif olarak, Google Web Designer'ı kod görünümünde kullanıyorsanız aşağıdaki adımları uygulayarak gereken kodu ekleyebilirsiniz. Bu işlem dinamik perakende şeması için kullanılsa da farklı bağlamalar kullanarak diğer feed türlerine de uyarlanabilir.

1. Fiyatlar için metin öğelerini oluşturun

Aşağıdaki fiyat türleri için reklam öğesinde üç metin öğesi oluşturun.

Varsayılan fiyat - Bu fiyat, indirimli fiyat olmadığında tek başına gösterilir.
İndirimli fiyat - Feed'de sağlandığında, bu fiyat normal fiyatın yanında gösterilir.
Normal fiyat: Feed'de indirimli fiyat sağlandığında karşılaştırma yapılabilmesi için bu fiyat genellikle üzeri çizili bir şekilde, indirimli fiyatla birlikte gösterilir.

2. Bağlamaları ekleyin

Dinamik panelinde fiyat öğelerinin metin içerikleri için aşağıdaki veri şeması nesnelerine dinamik bağlamalar ekleyin:

Varsayılan fiyat: Perakende 0 > En düşük fiyat öğesine bağlayın.
İndirimli fiyat: Perakende 0 > İndirimli fiyat öğesine bağlayın.
Normal fiyat: Perakende 0 > Normal fiyat öğesine bağlayın.

Perakende harici veri şemalarında varsayılan fiyat ile normal fiyatı aynı veri şeması nesnesine bağlamanız gerekebilir.

3. Sınıfları ekleyin

Kod görünümünde aşağıdaki sınıfları ekleyin:

Fiyatları içeren üst öğe: Üst öğeye js-item sınıfını ekleyin. Fiyatlarınız bir kaydırılabilir galeri grubuna dahilse bu sınıfı grup örneğine ekleyin.
Varsayılan fiyat - js-item-price sınıfını öğeye ekleyin.
İndirimli fiyat - js-item-saleprice sınıfını metin öğesine ekleyin.
Normal fiyat - js-item-regularprice sınıfını metin öğesine ekleyin.

4. İşlev ekleyin

Kod görünümünde, öğelerinizin kaydırılabilir galeri içinde gösterilip gösterilmediğine bağlı olarak aşağıdaki kodlardan uygun olanı kopyalayıp dokümanınızda etiketinin içine yapıştırın.

Kaydırılabilir galeri ile kullanılabilen işlevler

Bu kodda kaydırılabilir galeri kimliğinizin swipegallery-items olduğu varsayılır. Galerinizin kimliği farklıysa vurgulanan metni doğru kimlikle değiştirin.

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>

Kaydırılabilir galeri olmadığında kullanılabilen işlevler

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. Etkinlik ekleyin

Tasarım görünümünde Etkinlikler paneline gidip bir önceki adımdaki kodu tetiklemek için yeni bir etkinlik ekleyin. Kaydırılabilir galeri kullanıp kullanmamanıza bağlı olarak aşağıdaki tablolardan birine göre etkinliği yapılandırın:

Kaydırılabilir galeri ile kullanılabilen etkinlik yapılandırması

Gerekirse özel modda kaydırılabilir galerinizin kimliğini değiştirin.

Hedef	`swipegallery-items`
Etkinlik	Kaydırılabilir galeri > Resimler yüklendi
İşlem	Özel > Özel işlem ekle
Özel Kod	`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); }`

Kaydırılabilir galeri olmadığında kullanılan etkinlik yapılandırması

Hedef	`page1`
Etkinlik	Sayfa > Sayfa sunulmaya hazır
İşlem	Özel > Özel işlem ekle
Özel Kod	`var items = document.querySelectorAll('.js-item'); for (var i = 0; i < items.length; i++) { var item = items[i]; initItemDisplay_(item); }`

Bu size yardımcı oldu mu?

Bunu nasıl iyileştirebiliriz?