実装ガイド

アンケートのオプトイン モジュールの組み込み

アンケートのオプトイン モジュールを設置すると、お客様が Google カスタマー レビュー プログラムに参加するかどうかを選択できるようになり、同意した場合は Google に必要な取引情報が送信されます。Google カスタマー レビューに参加するためには、このモジュールをすべての注文確認ページに設置する必要があります。

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

ユーザーがオプトインを選択すると、商品の到着後に Google からアンケートが送信されます。詳細については、Google カスタマー レビュー アンケートについての記事をご覧ください。

アンケートのオプトインは、パソコンとモバイルの両方に表示できます。必ずパソコンサイトとモバイルサイトの両方にオプトイン コード スニペットを追加してください。

組み込み手順

注文確認ページにアンケートのオプトイン モジュールを設置するには次のタスクを行う必要があります。

  1. DOCTYPE の更新
  2. オプトイン コードの追加

アンケートのオプトイン モジュールのコードは、ご購入手続きで表示される注文確認ページに設置します。すべての確認ページでは HTTPS を使用する必要があります(HTTP は不可)。

このモジュールによって Google カスタマー レビューのカスタマー アンケート オプトインが表示されるため、このモジュール内の注文の詳細はできる限り正確に表示する必要があります。

ご購入手続きにサードパーティの処理システムを使用している場合は、お使いのドメイン上の確認ページにリダイレクトし直す必要があります。

注文確認ページ上の他のコンテンツによって、Google カスタマー レビューのカスタマー アンケート オプトイン モジュールが隠れることのないようにしてください。

DOCTYPE の更新

確認ページには、HTML5 DOCTYPE を使用する必要があります。

<!DOCTYPE html>

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

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

オプトイン コードの追加

商品を購入した際の利便性についてお客様がレビューを送信できるようにするには、注文確認ページにオプトイン モジュールを追加します。

アンケートのオプトイン モジュールを注文確認ページに追加するには:

  1. 次の HTML スニペットを注文確認ページに追加します。
    
    <!-- BEGIN GCR Opt-in Module Code -->
    <script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
      async defer>
    </script>
    
    <script>
      window.renderOptIn = function() { 
        window.gapi.load('surveyoptin', function() {
          window.gapi.surveyoptin.render(
            {
              // REQUIRED
              "merchant_id":"MERCHANT_ID",
              "order_id": "ORDER_ID",
              "email": "CUSTOMER_EMAIL",
              "delivery_country": "COUNTRY_CODE",
              "estimated_delivery_date": "YYYY-MM-DD",
    
              // OPTIONAL
              "opt_in_style": "OPT_IN_STYLE"
            }); 
         });
      }
    </script>
    <!-- END GCR Opt-in Module Code -->
    

    コードを終了タグ(</BODY>)の直前に挿入します。アンケート モジュールのコードをバッジコードと一緒に挿入する場合、順番はどちらが先であっても構いません。

  2. 赤で表示された値をサイト固有の動的な値と置き換えます。次の表は、利用可能な設定について説明しています。

     

    変数 必須かどうか 説明

    MERCHANT_ID

    販売者 ID

    必須 Merchant Center ID。この値は Google Merchant Center で入手できます。

    ORDER_ID

    注文 ID

    必須 注文の一意の ID。

    CUSTOMER_EMAIL

    顧客のメール

    必須 お客様のメールアドレス(name@domain.com の形式)。

    COUNTRY_CODE

    国コード

    必須 国コード(2 文字)。お客様が注文した商品の配送先を表しています。この値は、ISO 3166-1 alpha-2 形式である必要があります。このフィールドには「ZZ」を使用しないでください(例: US)。

    ESTIMATED_DELIVERY_DATE

    配送予定日

    必須 注文の配送予定日。YYYY は西暦、MM は月、DD は日付を指します(例: "2016-09-13")。

    OPT_IN_STYLE

    オプトインの種類

    省略可 オプトイン モジュールのダイアログ ボックスを表示する形式を指定します。指定できる値は次のとおりです。
    • 「CENTER_DIALOG」: ページ中央のダイアログ ボックスに表示されます。
    • 「BOTTOM_RIGHT_DIALOG」: ページ下部右側のダイアログ ボックスに表示されます。
    • 「BOTTOM_LEFT_DIALOG」: ページ下部左側のダイアログ ボックスに表示されます。
    • 「TOP_RIGHT_DIALOG」: ページ上部右側のダイアログ ボックスに表示されます。
    • 「TOP_LEFT_DIALOG」: ページ上部左側のダイアログ ボックスに表示されます。
    • "BOTTOM_TRAY": ページ下部のダイアログ ボックスに表示されます。

    デフォルト値は「CENTER_DIALOG」です。

     

  3. 次のコード スニペットをウェブページに貼り付け、オプトイン モジュールで使用する言語を指定します。
    
    <!-- BEGIN GCR Language Code -->
    <script>
      window.___gcfg = {
        lang: 'LANGUAGE'
      };
    </script>
    <!-- END GCR Language Code -->
    

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

    lang パラメータの値「LANGUAGE」を、サポートされている次のいずれかの言語の値と置き換えます。

    • af
    • ar-AE
    • cs
    • da
    • de
    • en_AU
    • en_GB
    • en_US
    • es
    • ES_419
    • fil
    • fr
    • ga
    • id
    • it
    • iw
    • ja
    • ko
    • ms
    • nl
    • no
    • pl
    • pt_BR
    • pt_PT
    • ru
    • sv
    • th
    • tr
    • uk
    • vi
    • zh-CN
    • zh-TW

    lang パラメータの値を指定しなかった場合は、ユーザーのブラウザ設定に基づいた言語設定がアンケート モジュールで使用されます。

アンケートのオプトイン コードサンプル

変数値は通常、注文確認ページでサーバーサイド コードと置き換えられます。次のサンプルは、PHP でオプトイン モジュール コードを挿入する方法を示しています。


<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn"
  async defer>
</script>

<script>
  window.renderOptIn = function() { 
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render(
        {
          "merchant_id": 42,
          "order_id": "<?php echo $order_id ?>",
          "email": "<?php echo $email_address ?>",
          "delivery_country": "<?php echo $user_country ?>",
          "estimated_delivery_date": "<?php echo $delivery_date ?>",
          "opt_in_style": "BOTTOM_LEFT_DIALOG"
        }); 
     });
  }
</script>
<!-- END GCR Opt-in Module Code -->

<!-- BEGIN GCR Language Code -->
<script>
  window.___gcfg = {
    lang: 'en_US'
  };
</script>
<!-- END GCR Language Code -->

ページ上にオプトイン モジュールが表示されない場合、またはページ読み込み時にエラーが表示される場合は、トラブルシューティングをご覧ください。

トラブルシューティング

このセクションでは、Google カスタマー レビューのオプトイン モジュール コードを挿入する際に、発生する可能性のある一般的なエラーについて説明します。

オプトイン モジュールが表示されない

ページにオプトイン モジュールが表示されない場合、次のような原因で問題が発生していないか確認してください。

問題 診断
HTML ソースにオプトイン モジュール コードが含まれていない ブラウザで HTML ソースを表示し、オプトイン モジュール コードの 1 つのインスタンスのブロックのみが表示されていることを確認します。
オプトイン モジュールが画面からはみ出しているか、他の要素によってブロックされている モジュールが視認可能領域外に表示されている可能性があります。ページの周りを垂直および水平方向にスクロールして、モジュールを確認します。

ページで JavaScript エラーが発生する

次の表に、オプトイン モジュールの JavaScript でよく発生する問題とその原因を示します。

問題 診断
必要なパラメータが含まれていない オプトイン モジュール コードを組み込む際は、次のパラメータが必須となります。

 

  • merchant_id
  • order_id
  • email
  • delivery_country
  • estimated_delivery_date
DOCTYPE が HTML 5 でない 注文確認ページが HTML5 DOCTYPE であることを確認します。
<!DOCTYPE html>
estimated_delivery_date が無効 日付の形式は、YYYY-MM-DD である必要があります。YYYY は 4 桁の西暦、MM は 2 桁の月、DD は 2 桁の日付を指定します。値の文字列は引用符で囲む必要があります(例: "2016-09-13")。
opt_in_style が無効 オプションの opt_in_style パラメータの値には、次の文字列を指定する必要があります。
  • 「CENTER_DIALOG」
  • 「BOTTOM_RIGHT_DIALOG」
  • 「BOTTOM_LEFT_DIALOG」
  • 「TOP_RIGHT_DIALOG」
  • 「TOP_LEFT_DIALOG」
  • 「BOTTOM_TRAY」
ブラウザがサポートされていない HTML 5 をサポートしているブラウザを使用する必要があります。ブラウザを最新のバージョンに更新してください。

 

Chrome の自動入力を利用すると、購入手続きをさらに簡単にすることができます。ご購入手続きページに Chrome の自動入力を追加する方法をご確認ください。
この記事は役に立ちましたか?
改善できる点がありましたらお聞かせください。