Google Müşteri Yorumları rozetinin yerini yeni mağaza widget'ı aldı. Yeni bir tasarıma sahip bu güncellenmiş widget; mağazanızın puanını, toplam yorum sayısını ve kalite bilgilerini web sitenizde daha etkili şekilde öne çıkarmanız için daha dikkat çekici seçenekler sunuyor.
Mağaza widget'ı kodu, mağaza widget'ı kodu entegrasyonu için uyguladığınız iki kod snippet'inden ilkidir. Widget isteğe bağlıdır.
Bu sayfada
Entegrasyon talimatları
Mağaza widget'ını bir sayfaya entegre etmek için şunları yapmanız gerekir:
Bu işlemler sonraki bölümlerde açıklanmıştır.
Widget kodunu sayfalarınıza uyguladığınızda aşağıdaki widget'lardan biri gösterilir:
| Kaliteli servis widget'ı | Mağaza puanı widget'ı | Mağaza kalitesi widget'ı |
| Zaman: | Zaman: | Zaman: |
Şu anda eski rozeti kullanıyorsanız mağazanızın kalite puanına bağlı olarak üç widget sürümünden biri gösterilir.
Widget'ı, sayfalarınızdaki başka içeriklerle kapatmayın.
DOCTYPE'ı güncelleme
Widget'ı uyguladığınız web sayfalarında HTML5 DOCTYPE kullanıldığından emin olun:
<!DOCTYPE html>
Bu doctype, sayfanızdaki HTML kodunun ilk satır öğesi olmalıdır. HTML5 DOCTYPE'ın kullanılması, web tarayıcılarının sayfanızı Quirks modu yerine standart modda işlemesini sağlar. Quirks modu, bazı web tarayıcıları tarafından kullanılan bir tekniktir. Bu teknik, standart modda W3C ve IETF standartlarına harfiyen uymak yerine, daha eski tarayıcılar için tasarlanmış web sayfalarıyla geriye dönük uyumluluk sağlamaya yöneliktir.
Mağaza widget'ını ekleme
Müşterilerinize Google Müşteri Yorumları'nı kullandığınızı göstermek için mağaza widget'ını, web sitesinde gösterilmesini istediğiniz tüm sayfalara ekleyin.
Mağaza widget'ını sitenize eklemek için:
- Web sitenizin HTML'sini düzenleyebileceğiniz arayüze gidin. Bunu yapmak için size en uygun adımı seçin:
- Sitenizdeki tüm sayfalar için geçerli olan kaynak HTML'yi bulun.
- Widget'ın gösterilmesini istediğiniz sayfaya gidin.
- Aşağıdaki kodu kopyalayıp HTML kodunun
<head>bölümüne yapıştırın.-
İsteğe bağlı: Widget, varsayılan olarak sayfanızın sağ alt kısmına sabitlenir. Widget'ı sayfanızın sol alt kısmına yerleştirmek istiyorsanız aşağıdaki kodun sarı renkli bölümünü
LEFT_BOTTOMile değiştirin.
-
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'RIGHT_BOTTOM'
});
});
</script>
<!-- END MerchantWidget Code →
- Satıcılar widget'ın konumunu özelleştirebilir. Konumlandırma özelleştirilirken 4 parametre kullanılır:
- sideMargin: Widget'ın yan kenara kadar olan piksel sayısıdır. Konum LEFT_BOTTOM olarak ayarlandığında, sol kenardaki kenar boşluğunu ifade eder. RIGHT_BOTTOM olarak ayarlandığında ise sağ kenardaki kenar boşluğunu ifade eder. Varsayılan olarak atanacak değer: 36.
- bottomMargin: Widget'ın yan kenara kadar olan piksel sayısıdır. Varsayılan olarak atanacak değer: 36.
- mobileSideMargin: Mobil cihaz ekranı için sideMargin parametresidir. Varsayılan olarak atanacak değer: 16.
- mobileBottomMargin: Mobil cihaz ekranı için bottomMargin parametresidir. Varsayılan olarak atanacak değer: 46.
Aşağıda, konumun nasıl özelleştirileceğine ilişkin bir örnek verilmiştir:
<script id='merchantWidgetScript' src="https://www.gstatic.com/shopping/merchant/merchantwidget.js" defer></script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({
position: 'LEFT_BOTTOM',
sideMargin: 21,
bottomMargin: 33,
mobileSideMargin: 11,
mobileBottomMargin: 19
});
});
</script>
Ayarlama sonrasında, HTML'niz aşağıdaki koda benzemelidir. <!DOCTYPE html> kodunun HTML dosyanızın ilk satırında yer aldığından emin olun:
<!DOCTYPE html>
<html>
<head>
<title>Google Example</title>
<meta charset="UTF-8">
<meta name="description" content="An example HTML page with a head section">
<meta name="keywords" content="HTML, sample, head section">
<link rel="stylesheet" type="text/css" href="styles.css">
<script src="script.js" defer></script>
<!-- BEGIN MerchantWidget Code -->
<script id='merchantWidgetScript'
src="https://www.gstatic.com/shopping/merchant/merchantwidget.js"
defer>
</script>
<script type="text/javascript">
merchantWidgetScript.addEventListener('load', function () {
merchantwidget.start({});
});
</script>
<!-- END MerchantWidget Code --> // <- Bu kodu başlık bölümüne ekleyin.
</head>
<body>
<h1>Welcome to Google </h1>
<p>This is a basic HTML document</p>
<p>Visit the <a href="https://www.google.com">Google homepage</a>.</p>
<script>
function greetGoogle() {
alert('Hello, Google! Have a great day!');
}
greetGoogle();
</script>
</body>
</html>
- Ayrıca, isteğe bağlı olarak bölgeleri özelleştirebilirsiniz. Bu ayar yapılmazsa widget, bölgeyi belirlemek için küreselleşme mantığını kullanır.
Eski mağaza widget'ı kod snippet'ini kaldırma
Talimatlar:
- Web sitenizin HTML koduna gidip mağaza widget'ı kodunu bulun.
- Widget'ı kaldırmak için aşağıdaki HTML'yi silin.
Veya
Aşağıdaki kodu açıklama satırı yapmak da kodu web sitenizden kaldırır.
<script src="https://apis.google.com/js/platform.js?onload=renderBadge" async defer></script>
<script>
window.renderBadge = function() {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function() {
window.gapi.ratingbadge.render(ratingBadgeContainer, {"merchant_id": 0});
});
}
</script>
Sık sorulan sorular
Widget ve panel, masaüstü görünümüne kıyasla mobil görünümde nasıl oluşturulur?
Web sitem Shopify ile yönetiliyor. Bu özelliği yine de kullanabilir miyim?
- Not: Shopify satıcılarından, Shopify'ın komut dosyasındaki tüm boşlukları otomatik olarak kısalttığına dair geri bildirimler alıyoruz. Komut dosyasındaki boşluklar bilerek yerleştirildiği için bunların kısaltılmadığından emin olun.
Panelde gösterilen veriler nereden geliyor? Program performansımı nasıl görüntüleyebilirim?
Müşteriler widget'ı tamamen kapatabilir mi?
Widget her zaman görünür kalır. Müşteri, widget'ı tıklayarak paneli büyütebilir, panel açıkken kapat simgesini tıklayarak ise paneli küçültebilir. Ancak widget tamamen kaldırılmaz.