実装ガイド

省略可: バッジコードの組み込み

Google カスタマー レビューのバッジコードは、Google カスタマー レビューを実装するために設置する 2 つのコード スニペットの 1 番目のコードです。このバッジの設置は任意です。バッジコードを組み込む際に問題が生じた場合は、トラブルシューティングをお試しください。

このセクションでは次のトピックについて説明します。

組み込み手順

ページ上に Google カスタマー レビュー バッジを組み込むには次のタスクを行う必要があります。

  1. DOCTYPE の更新
  2. Google カスタマー レビュー バッジの追加

タスクの詳細については、以下のセクションで説明します。

ページ上にバッジコードを挿入すると、次の画像が表示されます(評価の値は異なります)。

原則として、バッジに販売者評価が表示されるには、特定の国における過去 1 年間のレビュー数が 100 件以上ある必要があります。

ページ上の他のコンテンツによって、バッジが隠れないようにしてください。

DOCTYPE の更新

バッジを設置するウェブページには、HTML5 DOCTYPE を使用する必要があります。

<!DOCTYPE html>

この DOCTYPE は、ページ上の HTML コード内の最初の行に表示される必要があります。HTML5 DOCTYPE を使用することで、ウェブブラウザでのページのレンダリングが互換モードではなく標準モードで行われるようになります。互換モードは、一部のウェブブラウザによって使われている技術で、標準モードの W3C と IETF 標準に厳密に準拠することなく、古いバージョンのブラウザ向けに設計されたウェブページとの下位互換性が維持されます。

注: DOCTYPE の前にコメントや空白文字を含めないでください。

Google カスタマー レビュー バッジの追加

Google カスタマー レビューを使用していることをお客様に示すには、ウェブサイトの任意のページに Google カスタマー レビュー バッジを追加して表示します。

バッジをインラインで表示する場合は、下記の手順を使用してください。または、以下の方法を使用して、ページの右下または左下に Google カスタマー レビュー バッジを配置することもできます。

サイトに Google カスタマー レビュー バッジを追加するには:

  1. 次のコード スニペットをウェブページに貼り付けます。

    <!-- 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, {
                // REQUIRED
                "merchant_id":
    MERCHANT_ID,
                // OPTIONAL
                "position": "
    POSITION"
              });           
         });
      }
    </script>
    <!-- END GCR Badge Code -->

    コピーしたコードを、ページの終了タグ(</BODY>)の直前に挿入します。アンケートのオプトイン コードも挿入する場合、順番はどちらが先であっても構いません。

  2. 変数をサイト固有の動的な値に置き換えます。次の表は、利用可能な設定について説明しています。
     
    変数 必須かどうか 説明
    MERCHANT_ID 必須 Merchant Center ID。この値は Google Merchant Center で入手できます。
    POSITION 省略可 次のいずれかの場所にバッジを表示します。
    • 「BOTTOM_RIGHT」: ページ右下にバッジをフローティング表示します。
    • 「BOTTOM_LEFT」: ページ左下にバッジをフローティング表示します。
    • 「INLINE」: コードが表示される場所にバッジをレンダリングします。このオプションを使用するときは、ページの他の要素がバッジをブロックしたり隠したりしないか確認してください。より簡単な方法については、Google カスタマー レビュー バッジをインラインで追加する方法をご覧ください。

    バッジのデフォルト位置は「BOTTOM_RIGHT」です。

     

  3. 次のコード スニペットをウェブページに貼り付け、バッジで使用する言語を指定します。
     
    
    <!-- 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
    • nl
    • no
    • pl
    • pt-BR
    • pt-PT
    • ru
    • sv
    • tr
    • zh-CN
    • zh-TW

    lang パラメータの値を指定しなかった場合は、ユーザーのブラウザ設定に基づいて自動的に選択された言語がバッジで使用されます。

  4. バッジを表示させるすべてのウェブページで、手順 1 から 3 を繰り返します。
  5. Google カスタマー レビューの実装を完了するには、注文確認ページにアンケート オプトイン モジュールを追加する必要があります。アンケートのオプトイン モジュールの組み込みは必須です。

Google カスタマー レビュー バッジをインラインで追加するには:

  1. HTML ページの body 終了タグの前に次の行を貼り付けて、バッジの JavaScript を読み込みます。

    
    <script src="https://apis.google.com/js/platform.js" async defer></script>
    
  2. バッジを表示する HTML ページ上の位置に次の行を貼り付けます。
    
    <g:ratingbadge merchant_id=MERCHANT_ID></g:ratingbadge>
    

    MERCHANT_ID を自分の Merchant Center ID に置き換えます。

  3. こちらで説明されているとおり、バッジが使用する言語を指定します。

  4. アンケートのオプトイン モジュールを注文確認ページに追加します。アンケートのオプトイン モジュールの組み込みは必須です。

バッジコードのサンプル

次の例は、販売者 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 -->

バッジがページに表示されない場合、またはページ読み込み時にエラーが表示される場合は、トラブルシューティングをお試しください。

この情報は役に立ちましたか?
改善できる点がありましたらお聞かせください。

さらにサポートが必要な場合

問題を迅速に解決できるよう、ログインして追加のサポート オプションをご利用ください。