Skip to main content

Analytics JS

Requirements​

  • Edit permission to the source code of your website to modify the code.

Guideline​

Notice about identify() call

  • identify() must be called before track() to incorporate your user_id in any upcoming track calls.

  • Use this method right after user has just sign in/sign up or anytime a trait of an user is updated (Eg: profile update). Example:

import { filumAnalytics } from './analytics';

if (<conditions>) { // user password/credentials check is successful
    ...
    filumAnalytics.identify(user_id, {
        Email: "example@com.vn",
        Name: "Harry Potter",
        Gender: "Male"
    });
}

Inject Analytics JS script​

For landing pages or server-side render applications​

Apply your Write Key to this script and inject it into your <head> tag of your website:

<script>
  !(function () {
    var t = window.filumanalytics || []
    if (0 === t.length) {
      ;(t.methods = [
        'load',
        'track',
        'identify',
        'ready',
        'reset',
        'getAnonymousId',
        'setAnonymousId'
      ]),
        (t.factory = function (e) {
          return function () {
            var a = Array.prototype.slice.call(arguments)
            return a.unshift(e), t.push(a), t
          }
        })
      for (var e = 0; e < t.methods.length; e++) {
        var a = t.methods[e]
        t[a] = t.factory(a)
      }
      ;(t.loadJS = function (t, e) {
        var a = document.createElement('script')
        ;(a.type = 'text/javascript'),
          (a.async = !0),
          (a.src =
            'https://filum-assets.sgp1.digitaloceanspaces.com/sdk/filum-analytics.min.js')
        var n = document.getElementsByTagName('script')[0]
        n.parentNode.insertBefore(a, n)
      }),
        t.loadJS(),
        t.load('REPLACE_YOUR_WRITE_KEY_HERE', 'https://event.filum.ai/events'),
        (window.filumanalytics = t)
    }
  })()
</script>

You can track your own event by calling:

window.filumanalytics.track('Transaction Completed', {
  'Transaction ID': '#001',
  ...
})

For single-page applications​

Inject it into your <head> tag of your website. (DON’T worry about WRITE KEY yet)

<script type="text/javascript">
  !(function () {
    var t = window.filumanalytics || []
    if (0 === t.length) {
      ;(t.methods = [
        'load',
        'track',
        'identify',
        'ready',
        'reset',
        'getAnonymousId',
        'setAnonymousId'
      ]),
        (t.factory = function (e) {
          return function () {
            var a = Array.prototype.slice.call(arguments)
            return a.unshift(e), t.push(a), t
          }
        })
      for (var e = 0; e < t.methods.length; e++) {
        var a = t.methods[e]
        t[a] = t.factory(a)
      }
      ;(t.loadJS = function (t, e) {
        var a = document.createElement('script')
        ;(a.type = 'text/javascript'),
          (a.async = !0),
          (a.src =
            'https://filum-assets.sgp1.digitaloceanspaces.com/sdk/filum-analytics.min.js')
        var n = document.getElementsByTagName('script')[0]
        n.parentNode.insertBefore(a, n)
      }),
        t.loadJS(),
        (window.filumanalytics = t)
    }
  })()
</script>

If you use TypeScript, add the following declaration as Typescript is not aware of the filumanalytics’s existence

declare global {
  interface Window {
    filumanalytics: any
  }
}

In a module where you want to track an event, let's call filumAnalytics.js. Create FilumAnalytics definition in a module to use throughout your application:

class FilumAnalytics {
  constructor() {
    window.filumanalytics.load(
      'REPLACE_YOUR_WRITE_KEY_HERE',
      'https://event.filum.ai/events'
    )
  }
  track = (name, properties) => {
    window.filumanalytics.track(name, properties)
  }
}

export default new FilumAnalytics()

Track your events:

import filumAnalytics from './filumAnalytics'

filumAnalytics.track('Transaction Completed', {
  'Transaction ID': '#001',
  ...
})

Reset​

Use this method right after the user has just logged out. It will clear the user_id of the currently logged in user and generate new anonymous_id for a new user.

filumAnalytics.reset()