Streaming live at 10am (PST)

Google Product Reviews for Ecommerce

Hi guys,

I’m trying to add the following snippet to the Order Confirmation page. Is there an easy way to populate the variables with the right info? I can see that when adding the code to the page settings I’m not able to access the data for instance populating “email”: “CUSTOMER_EMAIL”, with the correct date.

<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": 12345678,
          "order_id": "ORDER_ID",
          "email": "CUSTOMER_EMAIL",
          "delivery_country": "COUNTRY_CODE",
          "estimated_delivery_date": "YYYY-MM-DD",

          // OPTIONAL FIELDS
          "products": [{"gtin":"GTIN1"}, {"gtin":"GTIN2"}]
        });
    });
  }
</script>

Here’s the guidelines from Google: https://support.google.com/merchants/answer/7106244

Thanks!

Joe

1 Like

@federico- any ideas?

Hi @JoeDigital

If I understand correctly you’re trying to get the data you need to fill those required fields?

If the data you need is displayed in the page you can definitely get it. This is an example project I have. As you can see if you inspect element the div containing the email address has an attribute data-wf-bindings that you could use to select the div and get the email.

These should work to give you the email address and country code

var email = document.querySelector("div[data-wf-bindings*='customerEmail']").innerHTML;
var country = document.querySelector("div[data-wf-bindings*='shippingAddressCountry']").innerHTML;

For the order ID you can get it from the url (e.g. ?orderId=ce5-8af). To get the search part of the url you can use window.location.search and then parse the string to get orderId.

Merchant ID I guess you could hardcode it if your store sell things from only one merchant?

Estimated delivery date I’m not sure it’s displayed on the page so it might be tricky. But maybe you can calculate it depending on the selected shipping method: if you know “Standard” delivery takes 5 days you could calculate it with

var date = new Date(); // get today date
date.setDate(date.getDate() + 5); // add 5 days

// get date in YYYY-MM-DD format
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var deliveryDate = [year, month, day].join('-');

Let me know if this helps!

Best,
Federico

Hey @federico,

Thank you so much for that, majorly helpful. I’m just stuck on how to get the product GTIN’s in…

I’ve used an embed block to surface the barcode and have set the opacity to 0 so it’s hidden from the user. Just not sure how to add those values to the code. We only have two products.

Live website is here: https://www.naturalbarber.co/order-confirmation

Below is the current code and this is the documentation to integrate reviews for individual products
https://support.google.com/merchants/answer/7519329?hl=en&ref_topic=7105160

<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>

<script>
var orderIdString = window.location.search; // get URL query string for order id
var orderIdArray = orderIdString.split("="); // parse the query string 
var orderId = orderIdArray[1] // get order id number from array
var email = document.querySelector("div[data-wf-bindings*='customerEmail']").innerHTML;
var country = document.querySelector("div[data-wf-bindings*='shippingAddressCountry']").innerHTML;
var date = new Date(); // get today date
date.setDate(date.getDate() + 5); // add 5 days

// get date in YYYY-MM-DD format
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var deliveryDate = [year, month, day].join('-');
  window.renderOptIn = function() {
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render(
        {
          // REQUIRED FIELDS
          "merchant_id": 123565248,
          "order_id": orderId,
          "email": email,
          "delivery_country": country,
          "estimated_delivery_date": deliveryDate,

          // OPTIONAL FIELDS
          "products": [{"gtin":"GTIN1"}, {"gtin":"GTIN2"}]
        });
    });
  }
</script>

From the docs it says that I need to "dynamically add a “gtin” object to the “products” array for every distinct product in the order. "

What you could do is to add a custom field gtin to your Products collection, add the gtin for each product in the order confirmation page, hide it from the user and give it specific class so you can query it with document.querySelectorAll

Ok great, I’ve got the individual gtin numbers coming through on the console log using the following code. I now need to find a way to dynamically add an these objects to the “products” array… thinking it might be something to do with a splice function?

This is the snippet:

var gtinNodeList = document.querySelectorAll("div.product-gtin"); // get array of order item GTINs
console.log(gtinNodeList)

gtinNodeList.forEach(function(textContent) { // do something with array items
  console.log(textContent.firstChild.nodeValue);
});

This is the full code so far:

<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
var orderIdString = window.location.search; // get URL query string for order id
var orderIdArray = orderIdString.split("="); // parse the query string 
var orderId = orderIdArray[1] // get order id number from array
var email = document.querySelector("div[data-wf-bindings*='customerEmail']").innerHTML;
var country = document.querySelector("div[data-wf-bindings*='shippingAddressCountry']").innerHTML;
var date = new Date(); // get today date
date.setDate(date.getDate() + 5); // add 5 days

// get date in YYYY-MM-DD format
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var deliveryDate = [year, month, day].join('-');

var gtinNodeList = document.querySelectorAll("div.product-gtin"); // get array of order item GTINs
console.log(gtinNodeList)
gtinNodeList.forEach(function(textContent) { // do something with array items
  console.log(textContent.firstChild.nodeValue);
});

  window.renderOptIn = function() {
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render(
        {
          // REQUIRED FIELDS
          "merchant_id": 123565248,
          "order_id": orderId,
          "email": email,
          "delivery_country": country,
          "estimated_delivery_date": deliveryDate,

          // OPTIONAL FIELDS
           "opt_in_style": "BOTTOM_LEFT_DIALOG",
          "products": [{"gtin":"GTIN1"}, {"gtin":"GTIN2"}]
        });
    });
  }
</script>

Great! Then you can just do this

var products = [];
gtinNodeList.forEach(function(textContent) {
  var gtin = textContent.firstChild.nodeValue;
  products.push({gtin});
});

And then you can use products array as "products": products

Woo! You’re a legend, thank you. Updated code is below but wondering how I can test it without ability to do a test transaction? Any tips? I’ve been using the Editor view in Webflow where dummy content is generated to test in the console so far.

<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
var orderId = window.location.search.split('=')[1];
var email = document.querySelector("div[data-wf-bindings*='customerEmail']").innerHTML;
var country = document.querySelector("div[data-wf-bindings*='shippingAddressCountry']").innerHTML;
var date = new Date(); // get today date
date.setDate(date.getDate() + 5); // add 5 days

// get date in YYYY-MM-DD format
var day = date.getDate();
var month = date.getMonth() + 1;
var year = date.getFullYear();
if (month.length < 2) month = '0' + month;
if (day.length < 2) day = '0' + day;
var deliveryDate = [year, month, day].join('-');
console.log('data', email, country)
var gtinNodeList = document.querySelectorAll("div.product-gtin"); // get array of order item GTINs
console.log('gtin node list', gtinNodeList)

var products = [];
gtinNodeList.forEach(function(el) {
  var gtin = el.textContent
  products.push({gtin});
});
  window.renderOptIn = function() {
    window.gapi.load('surveyoptin', function() {
      window.gapi.surveyoptin.render(
        {
          // REQUIRED FIELDS
          "merchant_id": 123565248,
          "order_id": orderId,
          "email": email,
          "delivery_country": country,
          "estimated_delivery_date": deliveryDate,

          // OPTIONAL FIELDS
           "opt_in_style": "BOTTOM_LEFT_DIALOG",
          "products": products
        });
    });
  }
</script>

Ok so I’ve got the final working code here now for anyone that needs to use it. I just tested it.
There was an issue where because the order details are loading from an API that I needed to add a delay to running the Google Reviews Survey. Works now!

<!-- BEGIN GCR Opt-in Module Code -->
<script src="https://apis.google.com/js/platform.js?onload=renderOptIn" async defer></script>
<script>
function initGoogleReviews() {
  var orderId = window.location.search.split('=')[1];
  var email = document.querySelector("div[data-wf-bindings*='customerEmail']").innerHTML;
  var country = document.querySelector("div[data-wf-bindings*='shippingAddressCountry']").innerHTML;
  var date = new Date(); // get today date
  date.setDate(date.getDate() + 5); // add 5 days

  // get date in YYYY-MM-DD format
  var day = date.getDate();
  var month = date.getMonth() + 1;
  var year = date.getFullYear();
  if (month.toString().length < 2) month = '0' + month;
  if (day.toString().length < 2) day = '0' + day;
  var deliveryDate = [year, month, day].join('-');
  var gtinNodeList = document.querySelectorAll("div.product-gtin"); // get array of order item GTINs

  var products = [];
  gtinNodeList.forEach(function(el) {
    var gtin = el.textContent
    products.push({gtin});
  });

  if (products[0].gtin.length === 0) {
    setTimeout(initGoogleReviews, 1000)
    return
  }
    window.renderOptIn = function() {
      window.gapi.load('surveyoptin', function() {
        window.gapi.surveyoptin.render(
          {
            // REQUIRED FIELDS
            "merchant_id": 123565248,
            "order_id": orderId,
            "email": email,
            "delivery_country": country,
            "estimated_delivery_date": deliveryDate,

            // OPTIONAL FIELDS
             "opt_in_style": "CENTER_DIALOG",
            "products": products
          });
      });
    }
    window.renderOptIn()
}
initGoogleReviews()
</script>
<!-- END GCR Opt-in Module Code -->

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