Analytics is a way for you to track how users interact with your data. To use our analytics services some configuration needs to take place. By default analytic tracking is not setup in the application. This means that page views and events will not be tracked. To enable page tracking and custom event tracking follow the steps below.

The two analytic services that we provide are Piwik and Splunk.

Adding the Analytics Module

By default you must inject the availity.config dependency to your app.

var app = angular.module('testApp', ['availity.config']); module.exports = app;

Virtual Page Tracking

Virtual page tracking is enabled by default, to enable virtual page tracking you will need to set to call avPiwikAnalyticsProvider.virtualPageTracking() or avSplunkAnalyticsProvider.virtualPageTracking() and pass in true. Once this is enabled all page visits will be tracked.

app.config(function($scope, avPiwikAnalyticsProvider) { avPiwikAnalyticsProvider.setVirtualPageTracking(true); });

Anatomy of an Event

The following descriptions were copied from

  • category - This is the name you want to give for the collection where actions you want to track will occur. An example of category could be Video’s or Datasheets.
  • label - This is an optional string which can be valuable in adding a dimension to the event data. Usually I use it to differentiate content. For example, if you want to know which specific video is played or which datasheet is downloaded.
  • action - This is a string which is paired with each category, and most often is used to describe the user interaction with your content. An example could be play, click or download.
  • value - This is a number, which you can use to provide a numerical dimension to a user action. Normally, I leave this blank unless I have an ecommerce reason. For example if you have a form, where a user can fill in a price or quantity, you can pass this value via an event.

Event Tracking

To add event tracking to an element on the page you will need to use the av-analytics-on directive. The example below will demonstrate how to use the directive. When applying analytics with Piwik you should include the av-analytics-on directive on the element you want to track, this will pull the inner text of the element and set it as a label. Optionally if no inner text exists, include the av-analytics-label attribute on the element . There are also two optional attributes av-analytics-value, av-analytics-category that you can append to an element for more detailed events.

  • av-analytics - required for tracking analytics, you can set your category on this directive
  • av-analytics-on - required for tracking analytics, defaults to click
  • av-analytics-label - required for Piwik
  • av-analytics-action - optional for Piwik
  • av-analytics-value - optional for Piwik - numeric only
<div data-av-analytics="{&apos;category&apos;: &apos;Category One&apos;}"> <button data-av-analytics-on="" data-av-analytics-label="Intro Movie" data-av-analytics-action="Play" data-av-analytics-value="0"> Button </button> </div>

To register a new analytic service you would call analyticsProvider.registerPlugins() passing in a array of services you want to register.

app.config(function(avAnalyticsProvider) { avAnalyticsProvider.registerPlugins([ 'test1AnalyticService', 'test2AnalyticService' ]); });

Enabling Plugins

To 'enable' your plugins and set the site ID correctly, use avPiwikAnalyticsProvider.enabled(true) and avPiwikAnalyticsProvider.setSiteID(1).

app.config(function(avPiwikAnalyticsProvider) { avPiwikAnalyticsProvider.enabled(true); avPiwikAnalyticsProvider.setSiteID(1); });

Custom Variables

Currently custom variables are only provided via Piwik and are scoped throughout the users session.

In order to access custom variables you must go through the avPiwikAnalyticsServiceProvider from your configuration and use .setVisitVariable with parameters index, valueName and value.

Due to restrictions on Piwik you are currently limited to only 5 variables in index 1 through 5, reusing an index will reset the values assigned to it, but not the amount of actions associated with it.

Note: index must be an int and valueName must be defined or the function will return errors.{ avPiwikAnalyticsProvider.setVisitVariable(1, 'name', 'value'); });

Exception Handler

The Angular $exceptionHandler has been enhanced using Tracekit for consistent metrics on strack traces occurring across all browsers.

Open debugger to see exceptionHandler send a message to api/v1/log-messages with normalized error message information along with the stack trace.

// sample payload { "level": "error", "entries": { "errorDate": "2015-06-21T19:21:17.283Z", "errorName": "Error", "errorMessage": "Oh snap!", "errorStack": "[00] Object.$ http://localhost:3000/js/docs-demos.js:46:15\n[01] Parser.functionCall\n[02] ngEventDirectives.(anonymous function).compile.element.on.callback\n[03] Scope.$get.Scope.$eval\n[04] Scope.$get.Scope.$apply\n[05] HTMLButtonElement.<anonymous>\n[06] HTMLButtonElement.m.event.dispatch\n[07] HTMLButtonElement.m.event.add.r.handle", "url": "http://localhost:3000/core.html", "appId": "N/A", "userAgent": "Mozilla/5.0 (Macintosh; Intel Mac OS X 10_9_5) AppleWebKit/537.36 (KHTML, like Gecko) Chrome/43.0.2357.81 Safari/537.36", "referrer": "http://localhost:3000/core.html", "host": "localhost", "screenWidth": 744, "screenHeight": 723, "sdkVersion": "v0.0.0" } }


Organizations & Payers

<form name="dropdownForm"> <div class="form-group"> <label for="dropdownOrg">Organization</label> <select id="dropdownOrg" class="form-control select2" placeholder="Select an Organization" data-av-dropdown="" data-ng-model="model.selectedOrg" data-ng-options=" as for org in organizations" data-ng-change="onSelectOrg()" data-placeholder="Select an Organization"> </select> </div> <div class="form-group"> <label for="dropdownPayer">Payer</label> <select id="dropdownPayer" class="form-control select2" placeholder="Select a Payer" data-av-dropdown="" data-ng-model="model.selectedPayer" data-ng-options="payer.payerId as payer.payerName for payer in payers" data-ng-change="onSelectPayer()" data-placeholder="Select an Payer"> </select> </div> </form> <!-- Javascript --> <script> availity.demo.controller('AuthPayerOrgController', function($scope, $log, avUserAuthorizations) { var model = { permissionId: 452, selectedOrg: null, selectedPayer: null }; $scope.model = model; avUserAuthorizations.getOrganizations(model.permissionId).then(function(orgs) { $scope.organizations = orgs; }); $scope.onSelectOrg = function() { $; avUserAuthorizations.getPayers(model.permissionId, model.selectedOrg).then(function(payers) { $scope.payers = payers; }); }; $scope.onSelectPayer = function() { $; }; }); </script>


<form name="dropdownForm"> <div class="form-group" ng-class="success: model.isAuthorized"> <label for="dropdownOrg">Permissions</label> <input id="permission" class="form-control" ng-change="checkIsAuthorized()" data-ng-model="model.permissionId"> </div> </form> <!-- Javascript --> <script> availity.demo.controller('AuthIsAuthorizedController', function($scope, $log, avUserAuthorizations) { var model = { permissionId: 452, isAuthorized: null }; $scope.model = model; $scope.checkIsAuthorized = function() { avUserAuthorizations.isAuthorized(model.permissionId).then(function(isAuthorized) { $; model.isAuthorized = isAuthorized; }); }; $scope.checkIsAuthorized(); }); </script>



Utility method that fixes window.print() for IE8-11 and Firefox from within an <iframe>


Converts any object into a string


Copied from Angular. A consistent way of creating unique IDs. The ID is a sequence of alpha numeric characters such as '012ABC'. The reason why we are not using simply a number counter is that the number string gets longer over time, and it can also overflow, where as the nextId will grow much slower, it is a string, and it will never overflow.