https://www.growthbook.io/ logo
#give-feedback
Title
# give-feedback
f

freezing-ram-13953

02/29/2024, 12:05 PM
[WordPress SDK] The auto.min.js script is called
async
in the implementation instructions, which adds significant rc/timing complications, especially as DOM changes also need to wait for DOMContentLoaded. For example, the following HEAD script, based on the sample code, is brittle when the script is loaded
async
, but fine when loaded blocking:
Copy code
<script async
  data-api-host="<https://cdn.growthbook.io>"
  data-client-key="sdk-abc123"
  src="<https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/auto.min.js>"
></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
  // This code is brittle, even if called inside a DOMContentLoaded listener...
  // It can return false or fail depending on status of GB
  if (window._growthbook?.isOn("my-feature")) {
    console.log("Feature is enabled!");
  }
});
</script>
While async is preferred for performance, the current script doesn’t seem to offer any easy way to register an onReady callback. Be great if a jQuery / GTM / Wistia push style loader could be used to simplify the use of async. For example, it would be great to be able to implement the above code as follows, where onReady fires after features are loaded:
Copy code
<script async
  data-api-host="<https://cdn.growthbook.io>"
  data-client-key="sdk-abc123"
  src="<https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/auto.min.js>"
></script>
<script>
window.addEventListener('DOMContentLoaded', function() {
  window._growthbook = window._growthbook || [];
  _growthbook.push({onReady: function(){
    // Should be able to rely on features being loaded here
    if (window._growthbook?.isOn("my-feature")) {
      console.log("Feature is enabled!");
    }
  }});
});
</script>
Otherwise, it might be better to change the documentation/examples to include a ready-check. Eg something like:
Copy code
<script async
 onload="gbReady()"
 data-api-host="<https://cdn.growthbook.io>"
 data-client-key="sdk-abc123"
 src="<https://cdn.jsdelivr.net/npm/@growthbook/growthbook/dist/bundles/auto.min.js>"
></script>
<script>
function gbReady() {
  window._growthbook.loadFeatures().then(function() {
    if (document.readyState !== "loading") { 
	  onReady();
    } else {
	  document.addEventListener("DOMContentLoaded", onReady);
    }
});}
function onReady() {
  // Do all your feature checking here...
  if (window._growthbook?.isOn("my-feature")) {
    console.log("Feature is enabled!");
  }
}
</script>
Or maybe there’s something already available I’m missing? Thanks Rob
f

future-teacher-7046

02/29/2024, 2:09 PM
Thanks for the feedback. We're working on improvements to this script soon and will make sure to include an easier way to provide a callback.
🙌 1
f

freezing-ram-13953

03/01/2024, 10:47 AM
@future-teacher-7046 - I also found a bug in the GTM datalayer push for this script. It pushes an array, not an object with the event name defined:
Copy code
window.dataLayer.push(["event", "experiment_viewed", n]),
A valid event push would be like so:
Copy code
window.dataLayer.push({
    'event': 'experiment_viewed',
    'experiment_id': experiment.key,
    'variation_id': result.key
  });
Cheers Rob
p

polite-afternoon-32745

04/12/2024, 10:04 AM
As i encountered the same issue: see this thread https://growthbookusers.slack.com/archives/C01T6Q1SVFV/p1712839855877889 for explanation as to why that's going in as an array and the workaround involving doing data layer push yourself
9 Views