Googlen asiakasarvostelut -merkki on muuttunut uudeksi kauppawidgetiksi. Päivitetyssä versiossa on uusi ulkoasu ja näkyvämmät näyttövaihtoehdot, joiden avulla voit korostaa kaupan arviota, arvostelujen kokonaismäärää ja laatutietoja paremmin verkkosivustollasi.
Kauppawidgetin koodi on ensimmäinen kahdesta koodinpätkästä, jotka lisätään kauppawidgetin koodin integroinnin yhteydessä. Widgetin käyttö on valinnaista.
Sisällys
Integrointiohjeet
Kauppawidgetin integrointi sivulle onnistuu näin:
Nämä tehtävät on kuvattu tarkemmin alla olevissa osioissa.
Kun lisäät widgetin koodin sivuille, niillä näkyy jokin seuraavista widgeteistä:
| Arvostettu kauppias ‐widget | Kauppa-arviowidget | Kaupan laatu ‐widget |
| Milloin: | Milloin: | Milloin: |
Jos käytät tällä hetkellä vanhaa merkkiä, näet yhden kolmesta widgetversiosta kauppasi laatuarvion perusteella.
Älä peitä widgetiä sivun muulla sisällöllä.
DOCTYPEn päivittäminen
Varmista, että verkkosivut, joihin lisäät widgetin, käyttävät HTML5 DOCTYPE ‑määrittelyä:
<!DOCTYPE html>
Tämän DOCTYPE-ilmoituksen pitää olla sivusi HTML-koodin ensimmäinen rivi. Käyttämällä HTML5 DOCTYPE ‑ilmoitusta varmistat, että sivusi näkyvät selaimissa normaalissa tilassa quirks-tilan sijasta. Quirks-tila tarkoittaa joidenkin selainten käyttämää tekniikkaa, jonka avulla vanhemmille selainversioille suunnitellut verkkosivut voivat näkyä. Tällöin normaalitilan tiukat W3C- ja IETF-standardit voi jättää osin huomiotta.
Kauppawidgetin lisääminen
Jos haluat kertoa asiakkaillesi, että käytät Googlen asiakasarvosteluja, lisää kauppawidget erikseen kaikille verkkosivustosi sivuille, joilla haluat sen näkyvän.
Näin lisäät kauppawidgetin sivustollesi:
- Siirry käyttöliittymään, jossa voit muokata verkkosivustosi HTML-koodia. Valitse alta sinulle parhaiten sopiva tapa:
- Etsi HTML-lähdekoodi, jota käytetään kaikilla sivustosi sivuilla.
- Siirry sivulle, jolla haluat widgetin näkyvän.
- Kopioi ja liitä alla oleva koodi HTML-koodin
<head>-osioon.-
Valinnainen: Merkki sijaitsee oletuksena sivun oikeassa alakulmassa. Jos haluat sijoittaa merkin sivun vasempaan alakulmaan, korvaa alla olevan koodin keltainen osa koodilla
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 →
- Kauppiaat voivat myös itse muuttaa widgetin sijaintia. Valittavissa on neljä parametria:
- sideMargin: Pikselimäärä widgetistä sivun reunaan. Etäisyys tarkoittaa vasenta reunaa, kun sijainnin arvo on LEFT_BOTTOM, ja oikeaa reunaa, kun sijainnin arvo on RIGHT_BOTTOM. Oletusarvo on 36.
- bottomMargin: Pikselimäärä widgetistä sivun alareunaan. Oletusarvo on 36.
- mobileSideMargin: sideMargin mobiilinäytöllä. Oletusarvo on 16.
- mobileBottomMargin: bottomMargin mobiilinäytöllä. Oletusarvo on 46.
Sijaintia voi muokata näin:
<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>
Käyttöönoton jälkeen HTML-koodin tulisi näyttää alla olevalta koodilta. Varmista, että HTML-tiedoston ensimmäinen rivi on <!DOCTYPE html>:
<!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 --> // <- put this code in head section
</head>
<body>
<h1>Tervetuloa Googleen </h1>
<p>Tämä on perus-HTML-asiakirja</p>
<p>Siirry <a href="https://www.google.com">Googlen etusivulle</a>.</p>
<script>
function greetGoogle() {
alert('Hello, Google! Have a great day!');
}
greetGoogle();
</script>
</body>
</html>
- Voit myös halutessasi muokata alueita. Jos aluetta ei ole asetettu, widget määrittää sen globalisaatiologiikan perusteella.
Usein kysyttyä
Miten widget ja paneeli renderöityvät mobiilinäkymässä tietokonenäkymään verrattuna?
Sivustoani ylläpidetään Shopifyn kautta. Voinko silti ottaa tämän ominaisuuden käyttöön?
- Huom. Shopify-kauppiaat ovat antaneet palautetta siitä, että Shopify lyhentää automaattisesti skriptin kaikki välilyönnit. Välilyönnit ovat pakollisia skriptissä, joten varmista, että niitä ei lyhennetä.
Mistä paneelissa näkyvä data on peräisin? Mistä näen ohjelman tulokset?
Voivatko asiakkaat sulkea widgetin kokonaan?
Widget on aina näkyvissä. Asiakas voi suurentaa paneelin klikkaamalla widgetiä. Avoinna olevan paneelin voi pienentää klikkaamalla sulkemiskuvaketta. Widget pysyy näkyvissä.