feat: update loading logic and fix ssr

- Add 3 second timeout, show default variant if Google Optimize fails to
load (e.g. due to ad blocking)
- Add check for `typeof window !== 'undefined'`, show default variant
for SSR
- Use `window.google_optimize` to check if script is already loaded
- Don't rely on `dataLayer.hide.end` being present to decide whether to
wait

Author: dobesv

src/Experiment.js

@@ -4,58 +4,84 @@ import OptimizeContext from "./OptimizeContext";
 
 class Experiment extends React.Component {
   static defaultProps = {
-    loader: null
+    loader: null,
+    timeout: 3000
   };
 
   static propTypes = {
     id: PropTypes.string.isRequired,
     loader: PropTypes.node,
+    timeout: PropTypes.number,
     children: PropTypes.node
   };
 
   state = {
     variant: null
   };
 
+  updateVariantTimeout = null;
+
   updateVariant = value => {
+    clearTimeout(this.updateVariantTimeout);
     // if experiment not active, render original
-    this.setState({
-      variant: value === undefined || value === null ? "0" : value
-    });
+    const newVariant = value === undefined || value === null ? "0" : value;
+    if (newVariant !== this.state.variant) {
+      this.setState({
+        variant: newVariant
+      });
+    }
   };
 
-  delayedInitialization = () => {
+  updateVariantFromGlobalState = () => {
     const value =
-      window.google_optimize && window.google_optimize.get(this.props.id);
+      typeof window !== "undefined" && window.google_optimize
+        ? window.google_optimize.get(this.props.id)
+        : null;
     this.updateVariant(value);
   };
 
+  setupOptimizeCallback = () => {
+    this.updateVariantTimeout = setTimeout(
+      this.updateVariantFromGlobalState,
+      this.props.timeout
+    );
+    const oldHideEnd = window.dataLayer.hide.end;
+    window.dataLayer.hide.end = () => {
+      this.updateVariantFromGlobalState();
+      oldHideEnd && oldHideEnd();
+    };
+
+    window.gtag &&
+      window.gtag("event", "optimize.callback", {
+        name: this.props.id,
+        callback: this.updateVariant
+      });
+  };
+
   componentDidMount() {
     if (!this.props.id) {
       throw new Error("Please specify the experiment id");
     }
 
     // Delayed init
-    const hideEnd =
-      window.dataLayer && window.dataLayer.hide && window.dataLayer.hide.end;
-    if (hideEnd) {
-      window.dataLayer.hide.end = () => {
-        this.delayedInitialization();
-        hideEnd();
-      };
+    if (typeof window !== "undefined" && !window.google_optimize) {
+      if (!window.dataLayer) {
+        window.dataLayer = [];
+      }
+      if (!window.dataLayer.hide) {
+        window.dataLayer.hide = { start: Date.now() };
+      }
+
+      this.setupOptimizeCallback();
     } else {
-      this.delayedInitialization();
+      // Google Optimize already loaded, or we're doing server-side rendering
+      this.updateVariantFromGlobalState();
     }
-
-    window.gtag &&
-      window.gtag("event", "optimize.callback", {
-        name: this.props.id,
-        callback: this.updateVariant
-      });
   }
 
   componentWillUnmount() {
-    window.gtag &&
+    typeof window !== "undefined" &&
+      window.gtag &&
       window.gtag("event", "optimize.callback", {
         name: this.props.id,
         callback: this.updateVariant,

test/specs/experiment.spec.js

@@ -10,6 +10,8 @@ describe("experiment", () => {
 
   describe("on optimize already loaded", () => {
     it("should render original variant on experiment not active", () => {
+      window.google_optimize = { get: sinon.stub().returns(null) };
+
       const wrapper = shallow(<Experiment id="abc" />);
 
       expect(wrapper.state("variant")).to.be.equal("0");
@@ -27,18 +29,9 @@ describe("experiment", () => {
     });
   });
 
-  describe("on optmize loading", () => {
-    beforeEach(() => {
-      window.dataLayer = {
-        hide: { end: () => {} }
-      };
-    });
-
-    afterEach(() => {
-      delete window.dataLayer;
-    });
-
+  describe("on optimize not loaded yet", () => {
     it("should render loader", () => {
+      delete window.dataLayer;
       const Loader = () => <div>loader</div>;
       const wrapper = shallow(<Experiment id="abc" loader={<Loader />} />);