Badget for Google Kundeanmeldelser er blevet opgraderet til den nye butikswidget. Denne opdaterede version har et nyt design og mere fremtrædende visningsmuligheder, der bedre fremhæver din butiks bedømmelse, det samlede antal anmeldelser og kvalitetsoplysninger på dit website.
Butikswidgetkoden er det første af de 2 kodestykker, som du implementerer ved integration af butikswidgetkoden. Widgetten er valgfri.
På denne side
Integrationsvejledning
For at integrere butikswidgetten på en side skal du:
Disse opgaver er beskrevet i de følgende afsnit.
Når du implementerer widgetkoden på dine sider, vises en af følgende widgets:
| Top Quality Store-widget | Butiksbedømmelseswidget | Butikskvalitet-widget |
| Hvornår: | Hvornår: | Hvornår: |
Hvis du i øjeblikket bruger det gamle badge, vises en af de tre widgetversioner baseret på din butiks kvalitetsbedømmelse.
Du må ikke tilsløre widgetten med andet indhold på dine sider.
Opdatere DOCTYPE
Sørg for, at websider, hvor du implementerer widgetten, bruger HTML5 DOCTYPE:
<!DOCTYPE html>
Denne doctype skal være det første linjeelement i HTML-koden på din side. Brug af HTML 5 DOCTYPE sikrer, at webbrowsere gengiver dine sider i standardtilstand i stedet for quirks-tilstand. Quirks-tilstand henviser til en teknik, der bruges af nogle webbrowsere til at opretholde bagudkompatibilitet med websider, der er udviklet til ældre browsere, i stedet for at overholde W3C- og IETF-standarder strengt i standardtilstand.
Tilføj butikswidgetten
For at vise dine kunder, at du bruger Google Kundeanmeldelser, skal du føje butikswidgetten til de sider på websitet, hvor du vil have, at den skal vises.
Sådan føjer du butikswidgetten til dit website:
- Gå til den grænseflade, hvor du kan redigere HTML-koden på dit website. Det gør du ved at vælge det trin, der passer bedst til dig:
- Find den kilde-HTML, der gælder for alle sider på dit website.
- Gå til den side, hvor du vil vise widgetten.
- Kopiér nedenstående kode, og indsæt den i
<head>-sektionen i HTML-koden.-
Valgfrit: Widgetten er som standard fastgjort nederst til højre på din side. Hvis du vil placere widgetten nederst til venstre på siden, skal du erstatte den gule sektion af koden nedenfor med "
LEFT_BOTTOM".
-
<!-- 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 →
- Sælgere har også mulighed for at tilpasse positioneringen af widgetten. Der introduceres 4 parametre under tilpasningen af positioneringen:
- sideMargin: antal pixels fra widgetten til sidekanten. Når positionen er indstillet til LEFT_BOTTOM, er det margenen til venstre kant, når den er RIGHT_BOTTOM, er det margenen til højre kant. Angiv 36 som standard.
- bottomMargin: antal pixels fra widgetten til sidekanten. Angiv 36 som standard.
- mobileSideMargin: sideMargin, når du bruger en mobilskærm. Angiv 16 som standard.
- mobileBottomMargin: bottomMargin, når du bruger en mobilskærm. Angiv 46 som standard.
Her er et eksempel på, hvordan du tilpasser positionering:
<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>
Efter konfigurationen skal din HTML-kode se ud som nedenstående kode. Sørg for, at din HTML-fil har <!DOCTYPE html> som første linje:
<!DOCTYPE html>
<html>
<head>
<title>Google-eksempel</title>
<meta charset="UTF-8">
<meta name="description" content="Eksempel på en HTML-side med en head-sektion">
<meta name="keywords" content="HTML, eksempel, head-sektion">
<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 --> // <- indsæt denne kode i head-sektionen
</head>
<body>
<h1>Velkommen til Google </h1>
<p>Dette er et grundlæggende HTML-dokument</p>
<p>Gå til <a href="https://www.google.com">Googles startside</a>.</p>
<script>
function greetGoogle() {
alert("Hej Google! Hav en god dag".);
}
greetGoogle();
</script>
</body>
</html>
- Du har også mulighed for at tilpasse regioner (valgfrit). Hvis det ikke er angivet, bruger widgetten globaliseringslogik til at bestemme regionen.
Sådan fjerner du det gamle kodestykke til butikswidgetten
Vejledning:
- Gå til dit websites HTML-kode, og find koden til butikswidgetten.
- Slet følgende HTML for at fjerne widgetten.
Eller
Hvis du udkommenterer følgende kode, fjernes den også fra dit website.
<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>
Ofte stillede spørgsmål
Hvordan gengives widgetten og panelet i den mobilvenlige visning sammenlignet med den computervenlige visning?
Mit website administreres af Shopify. Kan jeg stadig implementere denne funktion?
- Bemærk! Der er feedback fra Shopify-sælgere, som fortæller, at Shopify automatisk afkorter alle mellemrum i scriptet. Mellemrummene i scriptet er tilsigtet, så sørg for, at de ikke forkortes.
Hvor kommer de data, der vises i panelet, fra? Hvordan kan jeg se, hvordan mit program klarer sig?
Kan kunder lukke widgetten helt?
Widgetten vil altid være synlig. Kunder kan klikke på widgetten for at maksimere panelet, og når panelet er åbent, kan de klikke på lukkeikonet for at minimere panelet, mens widgetten stadig vises.