All Collections
Initializing FunnelEnvy with an Asynchronous Function
Initializing FunnelEnvy with an Asynchronous Function

It's preferable to load & initialize synchronously, however for some environments you may have to initialize our snippet with a function.

Arun Sivashankaran avatar
Written by Arun Sivashankaran
Updated over a week ago

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="//"></script>

<!-- initializes FunnelEnvy on the page -->
<script type="text/javascript">window.funnelEnvy = new FunnelEnvy({customerId: "ORGANIZATION_ID", apiUrl: "//"});</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:   "//"});
}, 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

Did this answer your question?