Initializing FunnelEnvy with an Asynchronous Function

Our snippet installation article describes the preferred approach to installing the FunnelEnvy snippet on your site. This is often the easiest approach for most websites and it loads FunnelEnvy synchronously in the document head preventing content flash when running campaigns.

There are however situations where customers have to initialize FunnelEnvy asynchronously through a Javascript function. In this situation we recommend using a CustomEvent listener that handles the FunnelEnvy.available window event as described below.

How it Works

The FunnelEnvy snippet (which can be found under Org Settings) actually consists of two <script> tags:

<!-- loads FunnelEnvy Javascript library -->
<script src="//cdn2.funnelenvy.com/organization/ORGANIZATION_ID/backstage-client.js"></script>

<!-- initializes FunnelEnvy on the page -->
<script type="text/javascript">window.funnelEnvy = new FunnelEnvy({customerId: "ORGANIZATION_ID", apiUrl: "//backstage.funnelenvy.com"});</script>

The initialization code must be executed after the FunnelEnvy script is fully loaded and the window.FunnelEnvy object is available on the page. If you want to move initialization to a separate function, you'll need to add a custom event listener for the FunnelEnvy.available event which fires when the library is loaded and passes a reference to the window.FunnelEnvy object in the event details for convenience.

Here's an example:

// listener for window.FunnelEnvy to become available
window.addEventListener('FunnelEnvy.available', function (evt) {
  console.log('initializing FunnelEnvy');

  // evt.detail includes a reference to the FunnelEnvy object
  // you can also use window.FunnelEnvy here
  var FunnelEnvyObject = evt.detail;
  window.funnelEnvy = new FunnelEnvyObject({
    customerId: "ORGANIZATION_ID", 
    apiUrl:   "//backstage.funnelenvy.com"});
}, false);

Some things to keep in mind:

Replace ORGANIZATION_ID and if necessary apiUrl with the settings from your FunnelEnvy organization.
The listener must be set before the custom event is dispatched
Unlike the default setup the initialization code will execute asynchronously after load in the browser