All Projects → angulartics → Angulartics2

angulartics / Angulartics2

Licence: mit
Vendor-agnostic analytics for Angular2 applications.

Programming Languages

typescript
32286 projects

Projects that are alternatives of or similar to Angulartics2

Ngx Daterangepicker Material
Pure Angular 2+ date range picker with material design theme, a demo here:
Stars: ✭ 169 (-82.45%)
Mutual labels:  angular2, angular4, angular5, ngx
Ngx Smart Modal
Modal/Dialog component crafted for Angular
Stars: ✭ 256 (-73.42%)
Mutual labels:  angular2, angular4, angular5
Angular Froala Wysiwyg
Angular 4, 5, 6, 7, 8 and 9 plugin for Froala WYSIWYG HTML Rich Text Editor.
Stars: ✭ 696 (-27.73%)
Mutual labels:  angular2, angular4, angular5
Ng Snotify
Angular 2+ Notification Center
Stars: ✭ 304 (-68.43%)
Mutual labels:  angular2, angular4, angular5
Ngx Permissions
Permission and roles based access control for your angular(angular 2,4,5,6,7,9+) applications(AOT, lazy modules compatible
Stars: ✭ 749 (-22.22%)
Mutual labels:  angular2, angular4, angular5
ngx-smart-loader
Smart loader handler to manage loaders everywhere in Angular apps.
Stars: ✭ 28 (-97.09%)
Mutual labels:  angular2, angular4, angular5
Angular Prest
pREST component for Angular
Stars: ✭ 16 (-98.34%)
Mutual labels:  angular2, angular4, angular5
angular-rollbar-source-maps
Angular 2+ implementation to upload sourcemaps to Rollbar
Stars: ✭ 17 (-98.23%)
Mutual labels:  angular2, angular4, angular5
Ionic Audio
An audio player for Ionic 3 and Angular 4. Works with HTML 5 audio or native audio using Cordova Media plugin.
Stars: ✭ 332 (-65.52%)
Mutual labels:  angular2, angular4, angular5
Angular2 Toaster
Angular2-toaster is an asynchronous, non-blocking Angular Toaster Notification library
Stars: ✭ 333 (-65.42%)
Mutual labels:  angular2, angular4, angular5
Angular2 Carousel
An lightweight , touchable and responsive library to create a carousel for angular 2 / 4 / 5
Stars: ✭ 26 (-97.3%)
Mutual labels:  angular2, angular4, ngx
ionic-modal-custom-transitions
Add Custom Transitions to Ionic Modals.
Stars: ✭ 22 (-97.72%)
Mutual labels:  angular2, angular4, angular5
angular-progress-bar
This component allow you to easy incorporate progress-bar to angular/ionic project, providing binding and color options
Stars: ✭ 26 (-97.3%)
Mutual labels:  angular2, angular4, angular5
Nebular
💥 Customizable Angular UI Library based on Eva Design System 🌚✨Dark Mode
Stars: ✭ 7,368 (+665.11%)
Mutual labels:  angular2, angular4, angular5
ng2-timezone-selector
A simple Angular module to create a timezone selector using moment-timezone.
Stars: ✭ 12 (-98.75%)
Mutual labels:  angular2, angular4, angular5
Ngx Scroll To
Scroll to any element to enhance scroll-based features in you app. Works for Angular 4+, both AoT and SSR. No dependencies.
Stars: ✭ 269 (-72.07%)
Mutual labels:  angular2, angular4, ngx
Angular Material App
基于最新Angular 9框架与Material 2技术的web中后台前端应用框架。
Stars: ✭ 509 (-47.14%)
Mutual labels:  angular2, angular4, angular5
ng-toggle
Bootstrap-styled Angular Toggle Component
Stars: ✭ 14 (-98.55%)
Mutual labels:  angular2, angular4, angular5
angular-landing-page
Beautiful Angular landing page with firebase, chat, poll, dynamic features/gallary, and nice animations/scrolling.
Stars: ✭ 43 (-95.53%)
Mutual labels:  angular2, angular4, angular5
Ng Http Loader
🍡 Smart angular HTTP interceptor - Intercepts automagically HTTP requests and shows a spinkit spinner / loader / progress bar
Stars: ✭ 327 (-66.04%)
Mutual labels:  angular2, angular4, angular5

angulartics2

NPM version NPM downloads Build Status MIT license

Gitter Chat

Vendor-agnostic Analytics for Angular Applications. angulartics.github.io/angulartics2

Dependencies

Latest version available for each version of Angular

Angulartics2 Angular
5.4.0 4.x
6.3.1 5.x
7.5.2 6.x - 7.x
8.3.0 8.x
9.1.0 9.x
latest 10.x

Installation

npm install angulartics2 --save

Include it in your application

  1. Add Angulartics2Module to your root NgModule passing any options desired
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
import { RouterModule, Routes } from '@angular/router';

import { Angulartics2Module } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';

const ROUTES: Routes = [
  { path: '',      component: HomeComponent },
  { path: 'about', component: AboutComponent },
];

@NgModule({
  imports: [
    BrowserModule,
    RouterModule.forRoot(ROUTES),

    // added to imports
    Angulartics2Module.forRoot(),
  ],
  declarations: [AppComponent],
  bootstrap: [AppComponent],
})

Note the different imports when Using Without A Router or Using With UI-Router.

  1. Required: Import your providers in the root component. Call startTracking() to start the tracking of route changes.
// component
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';

@Component({  ...  })
export class AppComponent {
  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {
    angulartics2GoogleAnalytics.startTracking();
  }
}

Usage

Tracking events in templates/HTML

To track events you can inject the directive angulartics2On into any component and use the attributes angulartics2On, angularticsAction and angularticsCategory:

// component
import { Component } from '@angular/core';

@Component({
  selector: 'song-download-box',
  template: `
    <div 
      angulartics2On="click" 
      angularticsAction="DownloadClick" 
      [angularticsCategory]="song.name">
      Click Me
    </div>
  `,
})
export class SongDownloadBox {}

import { NgModule } from '@angular/core';
import { Angulartics2Module } from 'angulartics2';

@NgModule({
  imports: [
    Angulartics2Module,
  ],
  declarations: [
    SongDownloadBox,
  ]
})

If you need event label, you can use

<div 
  angulartics2On="click" 
  angularticsAction="DownloadClick" 
  angularticsLabel="label-name" 
  angularticsValue="value" 
  [angularticsCategory]="song.name" 
  [angularticsProperties]="{'custom-property': 'Fall Campaign'}">
  Click Me
</div>

Tracking events in the code

import { Angulartics2 } from 'angulartics2';

constructor(private angulartics2: Angulartics2) {
  this.angulartics2.eventTrack.next({ 
    action: 'myAction', 
    properties: { category: 'myCategory' },
  });
}

If you need event label, you can use

this.angulartics2.eventTrack.next({ 
  action: 'myAction',
  properties: { 
    category: 'myCategory', 
    label: 'myLabel',
  },
});

Configuring the Module

Exclude routes from automatic pageview tracking

Pass string literals or regular expressions to exclude routes from automatic pageview tracking.

Angulartics2Module.forRoot({
  pageTracking: {
    excludedRoutes: [
      /\/[0-9]{4}\/[0-9]{2}\/[a-zA-Z0-9|\-]*/,
      '2017/03/article-title'
    ],
  }
}),

Remove IDs from url paths

/project/12981/feature becomes /project/feature

Angulartics2Module.forRoot({
  pageTracking: {
    clearIds: true,
  }
}),

By default, it removes IDs matching this pattern (ie. either all numeric or UUID) : ^\d+$|^[0-9a-fA-F]{8}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{4}-[0-9a-fA-F]{12}$.

You can set your own regexp if you need to :

/project/a01/feature becomes /project/feature

Angulartics2Module.forRoot({
  pageTracking: {
    clearIds: true,
    idsRegExp: new RegExp('^[a-z]\\d+$') /* Workaround: No NgModule metadata found for 'AppModule' */
  }
}),

Remove Query Params from url paths

This can be combined with clearIds and idsRegExp

/project/12981/feature?param=12 becomes /project/12981/feature

Angulartics2Module.forRoot({
  pageTracking: {
    clearQueryParams: true,
  }
}),

Remove Hash from url paths

/callback#authcode=123&idToken=456 becomes /callback

Angulartics2Module.forRoot({
  pageTracking: {
    clearHash: true,
  }
}),

Using Without A Router

Warning: this support is still experiemental
@angular/router must still be installed! However, it will not be used.

import { Angulartics2RouterlessModule } from 'angulartics2/routerlessmodule';
@NgModule({
  // ...
  imports: [
    BrowserModule,
    Angulartics2RouterlessModule.forRoot(),
  ],
})

Using With UI-Router

Warning: this support is still experiemental
@angular/router must still be installed! However, it will not be used.

import { Angulartics2UirouterModule } from 'angulartics2/uiroutermodule';
@NgModule({
  // ...
  imports: [
    BrowserModule,
    Angulartics2UirouterModule.forRoot(),
  ],
})

SystemJS

Using SystemJS? If you aren't using defaultJSExtensions: true you may need to use:

System.config({
    packages: {
        "/angulartics2": {"defaultExtension": "js"},
    },
});

Supported providers

For other providers

If there's no Angulartics2 plugin for your analytics vendor of choice, please feel free to write yours and PR it!

Minimal setup for Google Analytics

Contributing

Please see the CONTRIBUTING and CODE_OF_CONDUCT files for guidelines.

License

MIT

Related Projects

  • analytics-angular: Write analytics code once, collect customer data from any source, and send it to over 250+ destinations with Segment.
Note that the project description data, including the texts, logos, images, and/or trademarks, for each open source project belongs to its rightful owner. If you wish to add or remove any projects, please contact us at [email protected].