Google カスタマー レビューのバッジコードは、Google カスタマー レビューを実装するために設置する 2 つのコード スニペットの 1 番目のコードです。このバッジの設置は任意です。バッジコードを組み込む際に問題が生じた場合は、トラブルシューティングをお試しください。
このセクションでは次のトピックについて説明します。
組み込み手順
ページ上に Google カスタマー レビュー バッジを組み込むには次のタスクを行う必要があります。
タスクの詳細については、以下のセクションで説明します。
ページ上にバッジコードを挿入すると、次の画像が表示されます。
評価の値は異なります。原則として、バッジにショップの評価が表示されるには、特定の国における過去 1 年間のレビュー数が 100 件以上ある必要があります。
バッジがページ上の他のコンテンツによって隠れないようにしてください。
DOCTYPE の更新
バッジを設置するウェブページには、HTML5 DOCTYPE を使用する必要があります。
<!DOCTYPE html>
この DOCTYPE は、ページ上の HTML コード内の最初の行に表示される必要があります。HTML5 DOCTYPE を使用することで、ウェブブラウザでのページのレンダリングが後方互換モードではなく標準モードで行われるようになります。後方互換モードは、一部のウェブブラウザで使われている技術で、標準モードの W3C と IETF 標準に厳密に準拠することなく、古いバージョンのブラウザ向けに設計されたウェブページとの下位互換性が維持されます。
Google カスタマー レビュー バッジの追加
Google カスタマー レビューを使用していることをお客様に示すには、ウェブサイトの任意のページに Google カスタマー レビュー バッジを追加して表示します。
バッジをインラインで表示する場合は、Google カスタマー レビュー バッジをインラインで追加するで説明している方法を使用してください。または、以下の方法を使用して、ページの右下または左下に Google カスタマー レビュー バッジを配置することもできます。
サイトに Google カスタマー レビュー バッジを追加するには:
- 次のコード スニペットをウェブページに貼り付けます。
<!-- BEGIN GCR Badge Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderBadge"
async defer>
</script>
<script>MERCHANT_ID
window.renderBadge = function() {
var ratingBadgeContainer = document.createElement("div");
document.body.appendChild(ratingBadgeContainer);
window.gapi.load('ratingbadge', function() {
window.gapi.ratingbadge.render(
ratingBadgeContainer, {
// REQUIRED
"merchant_id": ,POSITION
// OPTIONAL
"position": ""
});
});
}
</script>
<!-- END GCR Badge Code -->
コピーしたコードをページの終了タグ（</BODY>）の直前に挿入します。アンケートのオプトイン コードも挿入する場合、順序はどちらが先であっても構いません。
- 変数をサイト固有の動的な値に置き換えます。次の表は、利用可能な設定について説明しています。
| 変数 | 必須かどうか | 説明 |
|---|---|---|
| MERCHANT_ID | 必須 | Merchant Center ID。この値は Google Merchant Center で入手できます。 |
| POSITION | 省略可 |
次のいずれかの場所にバッジを表示します。
バッジのデフォルト位置は「BOTTOM_RIGHT」です。 |
- 必要であれば、次のコード スニペットをウェブページに貼り付け、バッジで使用する言語を指定します。lang パラメータの値を指定しなかった場合は、ユーザーのブラウザ設定に基づいて自動的に選択された言語がバッジで使用されます。
<!-- BEGIN GCR Language Code -->
<script>
window.___gcfg = {
lang: 'LANGUAGE'
};
</script>
<!-- END GCR Language Code -->
コピーしたコードをページの終了タグ（</BODY>）の直前に挿入します。バッジコードも挿入する場合、順序はどちらが先であっても構いません。
lang パラメータの値「LANGUAGE」を、言語コード列にある、以下のサポートされているコードのいずれかに置き換えます。
|
コード |
言語名 |
|---|---|
|
af |
アフリカーンス語 |
|
ar |
アラビア語 |
|
cs |
チェコ語 |
|
da |
デンマーク語 |
|
de |
ドイツ語 |
|
en |
英語 |
|
en-AU |
英語 (オーストラリア) |
|
en-GB |
英語（イギリス） |
|
en-US |
英語 (アメリカ) |
|
es |
スペイン語 |
|
es-419 |
スペイン語（ラテンアメリカ） |
|
fil |
フィリピン語 |
|
fr |
フランス語 |
|
ga |
アイルランド語 |
|
id |
インドネシア語 |
|
it |
イタリア語 |
|
ja |
日本語 |
|
ms |
マレー語 |
|
ml |
オランダ語 |
|
no |
ノルウェー語 |
|
pl |
ポーランド語 |
|
pt-BR |
ポルトガル語 (ブラジル) |
|
pt-PT |
ポルトガル語 |
|
ru |
ロシア語 |
|
sv |
スウェーデン語 |
|
tr |
トルコ語 |
|
zh-CN |
中国語 (簡体) |
|
zh-TW |
中国語 (繁体) |
- バッジを表示させるすべてのウェブページで、手順 1 から 3 を繰り返します。
- Google カスタマー レビューの実装を完了するには、注文確認ページにアンケート オプトイン モジュールを追加する必要があります。アンケートのオプトイン モジュールの組み込みは必須です。
Google カスタマー レビュー バッジをインラインで追加するには:
- HTML ページの body 終了タグの前に次の行を貼り付けて、バッジの JavaScript を読み込みます。
<script src="https://apis.google.com/js/platform.js" async defer></script>
- バッジを表示する HTML ページ上の位置に次の行を貼り付けます。
<g:ratingbadge merchant_id=MERCHANT_ID></g:ratingbadge>
MERCHANT_ID を自分の Merchant Center ID に置き換えます。
- バッジで使用する言語を、こちらの説明のように指定します。
- アンケートのオプトイン モジュールを注文確認ページに追加します。アンケートのオプトイン モジュールの組み込みは必須です。
バッジコードのサンプル
次の例は、販売者 ID 42 のバッジをページ左下に配置するコードを示しています。
<!-- BEGIN GCR Badge Code -->
<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": 42,
"position": "BOTTOM_LEFT"
});
});
}
</script>
<!-- END GCR Badge Code →
<!-- BEGIN GCR Language Code -->
<script>
window.___gcfg = {
lang: 'en_US'
};
</script>
<!-- END GCR Language Code -->
ページにバッジが表示されない場合や、ページの読み込み時にエラーが発生する場合は、トラブルシューティングをお試しください。