Facebook Analytics for Auth0

This article explains how to install and configure the Facebook Analytics for Auth0 integration. You can use this integration on your own page that is using Lock or you can use this on the hosted Lock pages. Additionally, you will find instructions on how to configure funnels and reports inside of Facebook Analytics to get the most out of this integration.

Install

To add the Facebook Analytics integration to your app, include a reference to the Auth0 Analytics.js script on any pages with Auth0 Lock. Include the script reference after Lock and set the configuration options before the script reference.

<script>
window.auth0AnalyticsOptions = {
  // Options
}
</script>
<script src="https://cdn.auth0.com/js/lock/10.20/lock.min.js"></script>
<script src="https://cdn.auth0.com/js/analytics/X.Y.Z/analytics.min.js"></script>

The script version above uses a placeholder version X.Y.Z. For example, to reference release 1.2.0 use https://cdn.auth0.com/js/analytics/1.2.0/analytics.min.js. To find the latest release, see the releases on github.

Setup

There are several ways you can use the Facebook Analytics integration. If you already have either the Facebook Tracking Pixel or the Facebook Javascript SDK referenced on your site, configure Auth0 Analytics with the preload option as shown below. If you don't have either script loaded you need to set your Facebook Analytics App ID using the Facebook Javascript SDK configuration below.

The simplest configuration is to let the Analytics script load the Facebook Javascript SDK. You can do this by providing your Facebook Analytics App ID to the analytics options as shown below.

<script>
window.auth0AnalyticsOptions = {
  'facebook-analytics': {
    id: 'YOUR_APP_ID'
  }
}
</script>

If you have already loaded the Facebook Javascript SDK on your site, configure Auth0 Analytics to not load it again as shown below.

<script>
window.auth0AnalyticsOptions = {
  'facebook-analytics': {
    preloaded: true
  }
}
</script>

Using Facebook Pixel

If you already have the Facebook Pixel installed on your site you can use that configuration mode. Note that with the Facebook Pixel, certain features of Facebook Analytics are not availible. The configuration for using the pixel is shown below.

<script>
window.auth0AnalyticsOptions = {
  'facebook-pixel': {
    preloaded: true
  }
}
</script>

Usage

After installation on your site there is nothing else you need to do to start collecting data. Auth0 Analytics will immedately begin sending events to Facebook Analytics.

You will see the following events being logged:

  • Auth0 Lock show
  • Auth0 Lock hide
  • Auth0 Lock unrecoverable_error
  • Auth0 Lock authenticated
  • Auth0 Lock authorization_error
  • Auth0 Lock forgot_password ready
  • Auth0 Lock forgot_password submit
  • Auth0 Lock signin submit
  • Auth0 Lock signup submit
  • Auth0 Lock federated login

Note that some events that Lock emits like hash_parsed are not used for analytics purposes. Also, be aware that some events are only availible in newer versions of Lock. If you are using an older version of Lock you will only see some of these events. We suggest upgrading to the latest version of Lock to get the most of the Auth0 Analytics integration.

For more information on the events that are sent see the Lock API documentation.

Reporting

For the most up to date information on using Facebook Analytics, check out the Facebook Analytics documentation.

We recommend creating funnels to measure the success of your aquistion and registration flows using these new events.