[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:

<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:

<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:

<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

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.

@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:

window.dataLayer.push(["event", "experiment_viewed", n]),

A valid event push would be like so:

window.dataLayer.push({
    'event': 'experiment_viewed',
    'experiment_id': experiment.key,
    'variation_id': result.key
  });

Cheers Rob

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