The following topics are covered in this article:

The Funnelfly JavaScript integration exposes several methods that allow you to integrate Funnelfly into your current website or web application. This integration is pre-built, for you, to communicate back to Funnelfly's API and to your account. However, before you can do any of the above, you must correctly install and setup the JavaScript integration.

Installation and Setup

In order to unlock the ability to track and identify events, forms, and users, you must correctly setup the Funnelfly JavaScript integration. By completing this process, you are including the Funnelfly JavaScript integration on your website or web application and configuring it with your unique public API key. When you do this, we augment the global window variable and expose a funnelfly object that includes core methods for your use.

The following snippet must be included before the closing </body> tag, and will load Funnelfly onto the page asynchronously, so your page load speed won't be affected. Notice that you must include your JavaScript public API key within the quotes in the funnelfly.load() method where we have the placeholder JAVASCRIPT_PUBLIC_API_KEY_GOES_HERE. You can get your public API key by going to the Funnelfly interface, and navigating to the Developer tab under Settings.

<script type="text/javascript">  (function(){var funnelfly=window.funnelfly=window.funnelfly||[];if(funnelfly.initialize)return;if(funnelfly.invoked){if(window.console&&console.error){console.error('funnelfly snippet included twice.')}return}funnelfly.invoked=!0;funnelfly.methods=['identify','track','page'];funnelfly.factory=function(method){return function(){var args=Array.prototype.slice.call(arguments);args.unshift(method);funnelfly.push(args);return funnelfly}};for(var i=0;i<funnelfly.methods.length;i++){var key=funnelfly.methods[i];funnelfly[key]=funnelfly.factory(key)}funnelfly.load=function(key,options){var script=document.createElement('script');script.type='text/javascript';script.async=!0;script.src='http://js.funnelfly.com/widget';var first=document.getElementsByTagName('script')[0];first.parentNode.insertBefore(script,first);funnelfly._loadOptions=options;funnelfly._apiKey=key};    funnelfly.load("JAVASCRIPT_PUBLIC_API_KEY_GOES_HERE");    funnelfly.identify();  })();</script>

You can verify the integration is setup correctly by navigating to your website or web application, opening the console, and executing funnelfly. You should see not see an error returned.

Track Custom Events

In order to use this feature, you must install and setup the Funnelfly JavaScript integration correctly.

When users interact with your website, you want to track their interactions. In Funnelfly, these actions trigger what we call "events". A few reasons to trigger events might be a customer makes a purchase or views a page. Tracking an event can be accomplished like so:

<script type="text/javascript">  funnelfly.track("Signup");</script>

Notice that the method must be executed inside of a JavaScript context, and that the name of the event is wrapped in quotes. Events can be anything that helps you learn more about your customers. Events can also have extra data associated with them. Here's an example:

<script type="text/javascript">  funnelfly.track("Purchase Shirt", {    color: "red"  });</script>

Notice that in order to send extra data with an event, you must send the data in the form of an object.

Identify Users

In order to use this feature, you must install and setup the Funnelfly JavaScript integration correctly.

Tracking users that are logged in and are engaging with the site is just as vital as tracking visitors. Funnelfly's JavaScrpt integration exposes an identify method that allows information to be shared about a user. This information can be used in conjunction with other Funnelfly JavaScript integration methods like track to share a full story of a user's activity.

<script type="text/javascript">
  funnelfly.identify({
    firstName: 'John', 
    lastName: 'Doe', 
    email: '[email protected]',    customFields: {      plan: 'basic'    }
  });
</script>

Depending on how your site is built, you might need to use a templating language or variables to pass along user data. Additionally, the identify method exposes access to customFields which allow any extra data to be shared with Funnelfly when identifying users.

<script type="text/javascript">
  funnelfly.identify({
    firstName: "#{{user.firstName}}",
    lastName: "#{{user.lastName}}",
    email: "#{{user.email}}",
    customFields: {
      plan: "#{{plan.name}}"
    }
  });
</script>

Send Form Leads

In order to use this feature, you must install and setup the Funnelfly JavaScript integration correctly.

The Funnelfly JavaScript integration makes it easy for form leads to be communicated back to Funnelfly. When calling the onFormSubmit method, you must pass in a selector for the form as the first argument. The second argument is a callback that returns the ID of each field in the form, the name of each field in the form as a fallback, or the final fallback being a generic name for each field. These returned parameters are case sensitive, and must exist exactly as the IDs or names on the form inputs.

<script type="text/javascript">
  var form = document.getElementById("someFormName");
  funnelfly.onFormSubmit(form, function(formValues) {
    funnelfly.identify({
      email: formValues.email,
      firstName: formValues.firstName,
      lastName: formValues.lastName,
      phone: formValues.phone,
      company: {
        name: formValues.companyName
      }
    });
  });
</script>

The onFormSubmit method also exposes access to customFields which allow any extra data to be shared with Funnelfly on form submission.

<script type="text/javascript">  var form = document.getElementById("someFormName");  funnelfly.onFormSubmit(form, function(formValues) {    funnelfly.identify({      email: formValues.email,      firstName: formValues.firstName,      lastName: formValues.lastName,      phone: formValues.phone,      company: {        name: formValues.companyName      },      customFields: {        middleInitial: formValues.middleInitial      }    });  });</script>
Did this answer your question?