@masonmcelvain, have you had any luck implementing the Google Customer Reviews opt-in survey? I'm currently looking into how to set it up for our Shopify Plus store. @jarthorn, do you have any advice on this?
Here is an example of what I'm trying to accomplish with a Checkout UI block rendered on the Thank You page. I'm aware the object "window" or "document" are not supported. How can I work around that limitation?
import { useEffect } from "react";
import {
reactExtension,
useEmail,
useOrder,
useShippingAddress,
} from "@shopify/ui-extensions-react/checkout";
// Alternative to loading the script in the component
// import "./platform.js";
export default reactExtension("purchase.thank-you.block.render", () => (
<GoogleSurveyOptIn />
));
const GoogleSurveyOptIn = () => {
const email = useEmail();
const order = useOrder();
const shippingAddress = useShippingAddress();
useEffect(() => {
// I'm aware Checkout UI Extensions don't support script tags
const script = document.createElement("script");
script.src="https://apis.google.com/js/platform.js?onload=renderOptIn";
script.async = true;
script.defer = true;
(window as any).renderOptIn = function () {
(window as any).gapi.load("surveyoptin", function () {
(window as any).gapi.surveyoptin.render({
email,
merchant_id: process.env.MERCHANT_ID,
order_id: order.id,
delivery_country: shippingAddress.countryCode,
estimated_delivery_date: new Date(
Date.now() + 7 * 24 * 60 * 60 * 1000,
)
.toISOString()
.split("T")[0],
products: [{ gtin: "GTIN1" }, { gtin: "GTIN2" }],
});
});
};
document.body.appendChild(script);
return () => {
document.body.removeChild(script);
};
}, []);
return null;
};
