ngAnalytics

AngularJS Directive for Google Analytics Embed API
1 person uses it
Author: 4303495?v=3 flyacts
Submitted by: 2264672?v=3 KillerCodeMonkey

ngAnalytics

AngularJS Directive for Google Analytics Embed API

Functionality

  • Authorization
  • Add DataCharts
  • Add ViewSelectors
  • Connect DataCharts with ViewSelectors
  • Create Reports

Installation

  • bower install nganalytics or bower install fly-analytics
  • or download src/ng-analytics[.min].js
  • or download latest [release]

Usage

  • include ng-analytics[.min].js in your index.html before your module definition
  • add the ng-analytics module to your module/app dependencies
  • set your Google Analytics clientId in your run block
  • add ng-analytics directives to your DOM

Directives

Authorization - ng-analytics-auth

Handles user authorization with Google.

Usage

<ng-analytics-auth label="Hallo:&nbsp;" hide-on-auth="true" auth-container="embed-api-auth-container"></ng-analytics-auth>

Attributes

  • label (optional, default: Google default) - string with label of user account (e.g. "You are logged in as: " -> result: "You are logged in as: xxxxx@googlemail.com")
  • hide-on-auth (optional, default: 'false') - bool-string if account string (see "label") should be hidden after authorization
  • auth-container (optional, default: 'embed-api-auth-container') - string for the id of the created DOM-element

ViewSelector - ng-analytics-view

Shows dropdowns to switch views for a website.

Usage

<ng-analytics-view view-selector-container="view-selector-container" auth-container="embed-api-auth-container"></ng-analytics-view>

Attributes

  • auth-container (optional, default: 'embed-api-auth-container') - string of the id of the auth-container - required to connect view with the authorization
  • view-selector-container (optional, default: 'view-selector-container') - string for id of the created DOM-element

DataChart - ng-analytics-chart

Adds a chart and can be connected to a viewSelector.

Usage

<ng-ga-chart chart="chart" view-selector-container="view-selector-container" auth-container="embed-api-auth-container"></ng-ga-chart>

Attributes

  • chart (required) - object (scope variable) for a google analytics ('ids' are not necessary if connected with viewSelector, 'container' is required to build DOM-nodes and inject the Google chart-object)
  • view-selector-container (optional) - string of id for connected viewSelector
  • auth-container (optional, default: 'embed-api-auth-container') - string of the id of the auth-container - required to connect chart with the authorization

Report - ng-analytics-report

Adds report functionality to angular. Sends single or multiple report-queries and get informed about the repsonse.

Usage

<ng-analytics-report queries="queries" auth-container="embed-api-auth-container" view-selector-container="view-selector-container"></ng-analytics-report>

Attributes

  • queries (required) - array of report-query object (scope variable) (query. ids is required for each report-query

  • view-selector-container (optional) - string of id for connected viewSelector

  • auth-container (optional, default: 'embed-api-auth-container') - string of the id of the auth-container - required to connect report with the authorization

Events

AngularJS events which are triggered by the directive.

  • $gaReportSuccess - triggered after all report requests finished successfully, returns results of the queries and the connected DOM-element to easily process the data and put it in the DOM (like using chart.js)
  • $gaReportError - triggered if a report request failed, returns results of the query and the connected DOM-element to easily process the error-data and put it in the DOM
comments powered by Disqus
This page was last updated almost 3 years ago.