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.
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('-');
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.
Below is the current code and this is the documentation to integrate reviews for individual products
<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>
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>
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 -->
