Installing Google Customer Reviews code

Enabling Google Customer Reviews

To enable Google Customer Reviews you must first have set up a Google Merchant Center account for your website. Ensure that you have verified and claimed your website within the merchant center. Then select Growth > Manage programs from the left menu of your Merchant Center account:

Find ‘Customer Reviews’ and select Enable:

Read the ‘Google Customer Reviews Programme Agreement’, tick to agree to its terms and then select save & continue.

Adding the ‘Survey opt-in’ module to your live theme’s code

To add the ‘opt-in survey’ to your website, you will need to add some code to the 'Conversion Code' box on the 'Visitor Tracking' page.

To do this navigate to Settings > Visitor Monitoring > Visitor Tracking from the menu.

Find the 'Conversion Code' box and paste the following code into it:

<!-- 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 FIELDS
          "merchant_id": MERCHANT_ID,
          "order_id": "{{ order.reference }}",
          "email": "{{ order.billing_email|escape('js') }}",
          "delivery_country": "GB",
          "estimated_delivery_date": "{{ order.date|date_modify("+5 days")|date("Y-m-d")|escape('js') }}",
          // OPTIONAL
          "opt_in_style": "CENTRE_DIALOG",

		  // OPTIONAL FIELDS
          "products": {{ order.products|map(item => {"gtin": item.gtin})|filter(item => item.gtin)|json_encode|raw }}
        });
    });
  }
</script>
	<!-- END GCR Opt-in Module Code -->

Replace MERCHANT_ID with the merchant ID from your merchant center account.

The estimated_delivery_date value should be completed in order for Google to know when to send out the email to your customers. The variable {{ order.date }} will output the date the order is placed, so you should modify it for a day in the future that, on average, you typically deliver your products to customers. The code above tells Google that the delivery date is 5 days after the order date. You can adjust this as you see fit.

Once you’ve added the code, ensure the the box beside 'Tick here if you'd like to add dynamic content into this code using Twig variables' is ticked underneath the 'Conversion Code' box.

Then save your changes to the page.

Adding the Google Customer Reviews badge to your live theme’s code

To add the Google Customer Reviews badge to your website you will need to add the code to your live theme’s files. As for the ‘survey opt-in’ module, you will need to add this code to the master.twig file. You should add this code just before the closing </body> tag at the bottom of the file:

Create a new line before the closing </body> tag and paste the following code:

<!-- 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 -->
	

Replace MERCHANT_ID with the merchant ID from your merchant center account.

The above code will have the badge float in the bottom left corner of your website. If you would like the badge to display in a different location, the other available values can be found here.