Integration guide

Integrate the survey opt-in module

The survey opt-in module lets customers choose whether to take part in the Google Customer Reviews (GCR) program and also transmits the necessary transaction information to Google. This module is required on all order confirmation pages to participate in Google Customer Reviews.

This section includes the following topics:

If a user opts in, Google sends them a survey after their product arrives. For more information, see Google Customer Reviews survey.

The survey opt-in works on desktop and mobile. Be sure to add the opt-in code snippet to both your desktop and mobile sites.

Integration instructions

To include the survey opt-in module on the order confirmation page, you must:

  1. Update the DOCTYPE
  2. Add the opt-in code

The survey opt-in module's code should be placed on the order confirmation page of your checkout flow(s). All confirmation pages must use HTTPS (not HTTP).

Because this module triggers the GCR customer survey opt-in, the order details in this module must be accurate to the best of your ability.

If your check-out process uses a third-party processor, it must redirect back to the confirmation page on your domain.

Do not obscure the GCR customer survey opt-in module with any other content on your order confirmation page.

Update the DOCTYPE

Be sure that the confirmation page uses the HTML5 DOCTYPE:

<!DOCTYPE html>

This doctype must be the first line item in the HTML code on your page. Using the HTML5 DOCTYPE ensures that web browsers will render your pages in standard mode instead of quirks mode. Quirks mode refers to a technique used by some web browsers to maintain backward compatibility with web pages designed for older browsers, instead of strictly complying with W3C and IETF standards in standards mode.

NOTE: Do not include comments or whitespace before the DOCTYPE.

Add the opt-in code

To give your customers the option of submitting a review of their experience buying from you, add the opt-in module to your order confirmation page.

To add the survey opt-in module to your order confirmation page:

  1. Paste the following HTML snippet into your order confirmation page:
    
    <!-- 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 -->
    

    Place the code just before the closing </BODY> tag. When you place the survey module code with the badge code, the order does not matter: the survey module code can be before or after the badge code.

  2. Replace the values in red with your site-specific, dynamic values. The following table describes the available settings:

     

    Variable Required? Description

    MERCHANT_ID

    (Merchant ID)

    Required Your Merchant Center ID. You can get this value from the Google Merchant Center.

    ORDER_ID

    (Order ID)

    Required A unique ID for the order.

    CUSTOMER_EMAIL

    (Customer email)

    Required The customer's email address, in the format name@domain.com.

    COUNTRY_CODE

    (Country code)

    Required The two-letter country code identifies where the customer's order will be delivered. This value must be in ISO 3166-1 alpha-2 format. Do not use “ZZ” for this field. For example, "US". 

    ESTIMATED_DELIVERY_DATE

    (Estimated delivery date)

    Required The estimated delivery date for the order, where YYYY is the year, MM is the month, and DD is the day. For example, "2016-09-13".

    OPT_IN_STYLE

    (Opt-in style)

    Optional Specifies how the opt-in module's dialog box is displayed. Possible values are:
    • "CENTER_DIALOG": Displayed as a dialog box in the center of the view.
    • "BOTTOM_RIGHT_DIALOG": Displayed as a dialog box at the bottom right of the view.
    • "BOTTOM_LEFT_DIALOG": Displayed as a dialog box at the bottom left of the view.
    • "TOP_RIGHT_DIALOG": Displayed as a dialog box at the top right of the view.
    • "TOP_LEFT_DIALOG": Displayed as a dialog box at the top left of the view.
    • "BOTTOM_TRAY": Displayed in the bottom of the view.

    The default value is "CENTER_DIALOG".

     

  3. Specify the language that the opt-in module should use by pasting the following code snippet into your web page:
    
    <!-- BEGIN GCR Language Code -->
    <script>
      window.___gcfg = {
        lang: 'LANGUAGE'
      };
    </script>
    <!-- END GCR Language Code -->
    

    Place the code just before the closing </BODY> tag on the page. When placed with the opt-in code, the order does not matter.

    Set the value of the lang parameter by replacing LANGUAGE with one of the following supported languages:

    • af
    • ar-AE
    • cs
    • da
    • de
    • 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

    If you do not specify a value for the lang parameter, the survey module uses a language setting based on the user's browsers settings.

Example survey opt-in code

The variable values are typically replaced on your order confirmation page with server-side code. The following example shows how you might implement the opt-in module code with 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 -->

If the opt-in module does not appear on your page, or you get errors when loading the page, see Troubleshooting.

Troubleshooting

This section describes some common errors that you might encounter when implementing the GCR opt-in module code.

The opt-in module is not visible

If the opt-in module is not visible on the page, look for the following possible sources of problems:

Problem Diagnosis
The HTML source does not contain the opt-in module code View the HTML source in your browser and check that exactly one instance of the opt-in module code block appears on the page.
The opt-in module is off-screen or blocked by other elements The module might be rendered beyond the boundaries of the viewable area. Try scrolling vertically and horizontally around the page to see the module.

The page encounters JavaScript errors

The following table lists common sources of issues with the opt-in module's JavaScript:

Problem Diagnosis
A required parameter is missing When implementing the opt-in module code, the following parameters are required:

 

  • merchant_id
  • order_id
  • email
  • delivery_country
  • estimated_delivery_date
DOCTYPE must be HTML 5 Be sure that your order confirmation page uses the HTML5 DOCTYPE:
<!DOCTYPE html>
estimated_delivery_date is invalid The date must be in the format YYYY-MM-DD, where YYYY is the four-digit year, MM is the two-digit month, and DD is the two-digit day. The value is a string and must be surrounded by quotation marks. For example, "2016-09-13".
opt_in_style is invalid The value of the optional opt_in_style parameter can be one of the following strings:
  • "CENTER_DIALOG"
  • "BOTTOM_RIGHT_DIALOG"
  • "BOTTOM_LEFT_DIALOG"
  • "TOP_RIGHT_DIALOG"
  • "TOP_LEFT_DIALOG"
  • "BOTTOM_TRAY"
Your browser is unsupported Your browser must support HTML 5. Update it to the latest version.

 

Chrome Autofill can help make your checkout experience even easier for your customers. Learn how to add Chrome Autofill to your checkout page.
Was this article helpful?
How can we improve it?