Installing Google Customer Reviews code

Google Customer Reviews is a new programme launched in Spring 2017.

You can read more about the programme here. It is our understanding that Google will be phasing out it's Trusted Stores programme.

Google Customer Reviews has 4 main features, 2 of which require the addition of code to your theme.

Google Customer Reviews badge (a badge on pages of your website that displays your seller rating on a score of 1 - 5 stars).

Google Customer Reviews survey (an optional, brief questionnaire enabling customers to rate their purchasing experience).

SSL certificate

It is a requirement of the programme that your website have an SSL certificate.

This can be ordered through your account by clicking 'your account' from the left menu and then 'ssl certificate'.

Adding the opt-in code

To add the code you'll need to use the page editor.

Open the master.twig file which is located in the 'views/other' folder.

Locate the </body> tag at the very bottom of the page and just before it copy & paste the code below.

{% if global.current_path == '/checkout/complete' %}
    <!-- 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.reference }}",
          "email": "{{ order.billing_email }}",
          "delivery_country": "GB",
          "estimated_delivery_date": "{{ order.date|date_modify("+5 days")|date("Y-m-d") }}",
          // OPTIONAL
          "opt_in_style": "CENTRE_DIALOG"
        }); 
    });
    }
    </script>
    <!-- END GCR Opt-in Module Code -->
{% endif %}

Replace the text MERCHANT_ID with the merchant ID supplied by Google.

The estimated_delivery_date value needs to be completed so that Google knows when to email your customers asking to rate their experience. The variable {{ order.date }} will output the date the order is placed (i.e. today) so this needs to be modified for a day in the future when you expect, on average, to deliver an item to a customer. In the example above we've estimated 5 days.

Other configuration options are also available, you can find out more information here.

Adding the badge code

After the code you have just added for the survey opt-in, copy and paste the code below.

<!-- 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": "BOTTOM_LEFT"
          });           
     });
  }
</script>
<!-- END GCR Badge Code -->

You'll need to replace MERCHANT_ID with the merchant ID supplied by Google.

A different position can be declared, the available values are described here.

Other configuration options are also available, you can find out more information here.