{"id":13481764,"url":"https://github.com/angulartics/angulartics2","last_synced_at":"2025-05-16T04:03:38.063Z","repository":{"id":37413207,"uuid":"48817245","full_name":"angulartics/angulartics2","owner":"angulartics","description":"Vendor-agnostic analytics for Angular2 applications.","archived":false,"fork":false,"pushed_at":"2024-09-06T06:58:01.000Z","size":3410,"stargazers_count":1009,"open_issues_count":86,"forks_count":189,"subscribers_count":33,"default_branch":"master","last_synced_at":"2025-05-06T23:51:53.704Z","etag":null,"topics":["analytics","angular","angular2","angular4","angular5","angulartics","angulartics2","application-insights","baidu-analytics","facebook-pixel","google-analytics","google-tag-manager","hack","hacktoberfest","kissmetrics","mixpanel","ngx","piwik","segmentio"],"latest_commit_sha":null,"homepage":"","language":"TypeScript","has_issues":true,"has_wiki":null,"has_pages":null,"mirror_url":null,"source_name":null,"license":"mit","status":null,"scm":"git","pull_requests_enabled":true,"icon_url":"https://github.com/angulartics.png","metadata":{"files":{"readme":"README.md","changelog":null,"contributing":".github/CONTRIBUTING.md","funding":null,"license":"LICENSE","code_of_conduct":".github/CODE_OF_CONDUCT.md","threat_model":null,"audit":null,"citation":null,"codeowners":null,"security":null,"support":null,"governance":null,"roadmap":null,"authors":null,"dei":null,"publiccode":null,"codemeta":null}},"created_at":"2015-12-30T19:56:55.000Z","updated_at":"2025-04-30T12:07:45.000Z","dependencies_parsed_at":"2024-02-05T18:30:28.353Z","dependency_job_id":"97075bc3-3036-4d9c-9c36-8cafc5a92dc1","html_url":"https://github.com/angulartics/angulartics2","commit_stats":{"total_commits":445,"total_committers":85,"mean_commits":5.235294117647059,"dds":0.4786516853932584,"last_synced_commit":"d1d5038ff8ffc1c6c150956a1243a9ceabf949ce"},"previous_names":[],"tags_count":128,"template":false,"template_full_name":null,"repository_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angulartics%2Fangulartics2","tags_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angulartics%2Fangulartics2/tags","releases_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angulartics%2Fangulartics2/releases","manifests_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories/angulartics%2Fangulartics2/manifests","owner_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners/angulartics","download_url":"https://codeload.github.com/angulartics/angulartics2/tar.gz/refs/heads/master","host":{"name":"GitHub","url":"https://github.com","kind":"github","repositories_count":254464891,"owners_count":22075570,"icon_url":"https://github.com/github.png","version":null,"created_at":"2022-05-30T11:31:42.601Z","updated_at":"2022-07-04T15:15:14.044Z","host_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub","repositories_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repositories","repository_names_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/repository_names","owners_url":"https://repos.ecosyste.ms/api/v1/hosts/GitHub/owners"}},"keywords":["analytics","angular","angular2","angular4","angular5","angulartics","angulartics2","application-insights","baidu-analytics","facebook-pixel","google-analytics","google-tag-manager","hack","hacktoberfest","kissmetrics","mixpanel","ngx","piwik","segmentio"],"created_at":"2024-07-31T17:00:55.307Z","updated_at":"2025-05-16T04:03:38.042Z","avatar_url":"https://github.com/angulartics.png","language":"TypeScript","funding_links":[],"categories":["UI Components","TypeScript","Development Utilities","Uncategorized","API","Awesome Angular [![Awesome TipeIO](https://img.shields.io/badge/Awesome%20Angular-@TipeIO-6C6AE7.svg)](https://github.com/gdi2290/awesome-angular) [![Awesome devarchy.com](https://img.shields.io/badge/Awesome%20Angular-@devarchy.com-86BDC1.svg)](https://github.com/brillout/awesome-angular-components)"],"sub_categories":["Miscellaneous","Analytics","Uncategorized","Others","Angular \u003ca id=\"angular\"\u003e\u003c/a\u003e","Picker"],"readme":"# angulartics2\n\n[![NPM version](https://img.shields.io/npm/v/angulartics2.svg)](https://npmjs.org/package/angulartics2) [![NPM downloads](https://img.shields.io/npm/dm/angulartics2.svg)](https://npmjs.org/package/angulartics2)\n[![Build Status](https://api.travis-ci.org/angulartics/angulartics2.svg?branch=master)](https://travis-ci.org/angulartics/angulartics2)\n[![MIT license](http://img.shields.io/badge/license-MIT-blue.svg)](LICENSE)\n\n[![Gitter Chat](https://img.shields.io/gitter/room/nwjs/nw.js.svg)](https://gitter.im/angulartics/angulartics2)\n\nVendor-agnostic Analytics for Angular Applications. [angulartics.github.io/angulartics2](https://angulartics.github.io/angulartics2 \"Angulartics Docs\")\n\n- [Installation](#installation)\n  - [Include it in your application](#include-it-in-your-application)\n- [Usage](#usage)\n  - [Tracking events in templates/HTML](#tracking-events-in-templateshtml)\n  - [Tracking events in the code](#tracking-events-in-the-code)\n  - [Configuring the Module](#configuring-the-module)\n    - [Exclude routes from automatic pageview tracking](#exclude-routes-from-automatic-pageview-tracking)\n    - [Remove IDs from url paths](#remove-ids-from-url-paths)\n    - [Remove Query Params from url paths](#remove-query-params-from-url-paths)\n    - [Remove Hash from url paths](#remove-hash-from-url-paths)\n  - [Using Without A Router](#using-without-a-router)\n  - [Using With UI-Router](#using-with-ui-router)\n  - [SystemJS](#systemjs)\n- [Supported providers](#supported-providers)\n  - [For other providers](#for-other-providers)\n  - [Minimal setup for Google Analytics](#minimal-setup-for-google-analytics)\n- [Contributing](#contributing)\n- [License](#license)\n\n## Dependencies\nLatest version available for each version of Angular\n\n| Angulartics2 | Angular   |\n| ------------ | --------- |\n| 8.3.0        | 8.x       |\n| 9.1.0        | 9.x       |\n| 10.1.0       | 10.x      |\n| 11.0.0       | 12.x      |\n| 12.0.0       | 13.x      |\n| 13.0.0       | 14.x      |\n| latest       | 15.x      |\n\n## Installation\n\n```sh\nnpm install angulartics2 --save\n```\n\n### Include it in your application\n\n1. Add `Angulartics2Module` to your root NgModule passing any options desired\n```ts\nimport { NgModule } from '@angular/core';\nimport { BrowserModule } from '@angular/platform-browser';\nimport { RouterModule, Routes } from '@angular/router';\n\nimport { Angulartics2Module } from 'angulartics2';\nimport { Angulartics2GoogleAnalytics } from 'angulartics2';\n\nconst ROUTES: Routes = [\n  { path: '',      component: HomeComponent },\n  { path: 'about', component: AboutComponent },\n];\n\n@NgModule({\n  imports: [\n    BrowserModule,\n    RouterModule.forRoot(ROUTES),\n\n    // added to imports\n    Angulartics2Module.forRoot(),\n  ],\n  declarations: [AppComponent],\n  bootstrap: [AppComponent],\n})\n```\n\u003e Note the different imports when [Using Without A Router](#using-without-a-router) or [Using With UI-Router](#using-with-ui-router).\n\n2. __Required__: Import your providers in the root component. Call `startTracking()` to start the tracking of route changes.\n```ts\n// component\nimport { Angulartics2GoogleAnalytics } from 'angulartics2';\n\n@Component({  ...  })\nexport class AppComponent {\n  constructor(angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics) {\n    angulartics2GoogleAnalytics.startTracking();\n  }\n}\n```\n\n## Usage\n\n### Tracking events in templates/HTML\n\nTo track events you can inject the directive ```angulartics2On``` into any component and use the attributes ```angulartics2On```, ```angularticsAction``` and ```angularticsCategory```:\n\n```ts\n// component\nimport { Component } from '@angular/core';\n\n@Component({\n  selector: 'song-download-box',\n  template: `\n    \u003cdiv \n      angulartics2On=\"click\" \n      angularticsAction=\"DownloadClick\" \n      [angularticsCategory]=\"song.name\"\u003e\n      Click Me\n    \u003c/div\u003e\n  `,\n})\nexport class SongDownloadBox {}\n\nimport { NgModule } from '@angular/core';\nimport { Angulartics2Module } from 'angulartics2';\n\n@NgModule({\n  imports: [\n    Angulartics2Module,\n  ],\n  declarations: [\n    SongDownloadBox,\n  ]\n})\n```\n\nIf you need event label, you can use\n```html\n\u003cdiv \n  angulartics2On=\"click\" \n  angularticsAction=\"DownloadClick\" \n  angularticsLabel=\"label-name\" \n  angularticsValue=\"value\" \n  [angularticsCategory]=\"song.name\" \n  [angularticsProperties]=\"{'custom-property': 'Fall Campaign'}\"\u003e\n  Click Me\n\u003c/div\u003e\n```\n\n\n### Tracking events in the code\n\n```ts\nimport { Angulartics2 } from 'angulartics2';\n\nconstructor(private angulartics2: Angulartics2) {\n  this.angulartics2.eventTrack.next({ \n    action: 'myAction', \n    properties: { category: 'myCategory' },\n  });\n}\n```\n\nIf you need event label, you can use\n```ts\nthis.angulartics2.eventTrack.next({ \n  action: 'myAction',\n  properties: { \n    category: 'myCategory', \n    label: 'myLabel',\n  },\n});\n```\n\n### Configuring the Module\n\n#### Exclude routes from automatic pageview tracking\n\nPass string literals or regular expressions to exclude routes from automatic pageview tracking.\n````ts\nAngulartics2Module.forRoot({\n  pageTracking: {\n    excludedRoutes: [\n      /\\/[0-9]{4}\\/[0-9]{2}\\/[a-zA-Z0-9|\\-]*/,\n      '2017/03/article-title'\n    ],\n  }\n}),\n````\n\n#### Remove IDs from url paths\n\n`/project/12981/feature` becomes `/project/feature`\n````ts\nAngulartics2Module.forRoot({\n  pageTracking: {\n    clearIds: true,\n  }\n}),\n````\nBy 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}$`.\n\nYou can set your own regexp if you need to : \n\n `/project/a01/feature` becomes `/project/feature`\n ````ts\n Angulartics2Module.forRoot({\n   pageTracking: {\n     clearIds: true,\n     idsRegExp: new RegExp('^[a-z]\\\\d+$') /* Workaround: No NgModule metadata found for 'AppModule' */\n   }\n }),\n ````\n\n#### Remove Query Params from url paths\n\nThis can be combined with clearIds and idsRegExp\n\n`/project/12981/feature?param=12` becomes `/project/12981/feature`\n````ts\nAngulartics2Module.forRoot({\n  pageTracking: {\n    clearQueryParams: true,\n  }\n}),\n````\n\n#### Remove Hash from url paths\n\n`/callback#authcode=123\u0026idToken=456` becomes `/callback`\n````ts\nAngulartics2Module.forRoot({\n  pageTracking: {\n    clearHash: true,\n  }\n}),\n````\n\n### Using Without A Router\n\n__Warning:__ this support is still experiemental  \n`@angular/router` must still be installed! However, it will not be used.\n````ts\nimport { Angulartics2RouterlessModule } from 'angulartics2';\n@NgModule({\n  // ...\n  imports: [\n    BrowserModule,\n    Angulartics2RouterlessModule.forRoot(),\n  ],\n})\n````\n\n### Using With UI-Router\n\n__Warning:__ this support is still experiemental  \n`@angular/router` must still be installed! However, it will not be used.  \n````ts\nimport { Angulartics2UirouterModule } from 'angulartics2';\n@NgModule({\n  // ...\n  imports: [\n    BrowserModule,\n    Angulartics2UirouterModule.forRoot(),\n  ],\n})\n````\n\n### SystemJS\n\nUsing SystemJS? If you aren't using `defaultJSExtensions: true` you may need to use:\n```ts\nSystem.config({\n    packages: {\n        \"/angulartics2\": {\"defaultExtension\": \"js\"},\n    },\n});\n```\n\n## Supported providers\n\n* [Google Analytics](/src/lib/providers/ga) (`analytics.js`)\n* [Google Tag Manager](/src/lib/providers/gtm)\n* [Google Enhanced Ecom](/src/lib/providers/ga-enhanced-ecom)\n* [Google Global Site Tag](/src/lib/providers/gst) (`gtag.js`)\n* [Kissmetrics](/src/lib/providers/kissmetrics)\n* [Mixpanel](/src/lib/providers/mixpanel)\n* [Matomo](/src/lib/providers/matomo)\n* [Segment](/src/lib/providers/segment)\n* [Baidu Analytics](/src/lib/providers/baidu)\n* [Facebook Pixel](/src/lib/providers/facebook)\n* [Application Insights](/src/lib/providers/appinsights)\n* [Hubspot](/src/lib/providers/hubspot)\n* [Adobe Analytics (Omniture)](/src/lib/providers/adobeanalytics)\n* [Launch, by Adobe](src/lib/providers/launch) (works with DTM, too)\n* [Incendium](/src/lib/providers/incendium)\n* [Intercom](/src/lib/providers/intercom)\n* [Woopra](/src/lib/providers/woopra)\n* [Clicky](/src/lib/providers/clicky)\n* [IBM Digital Analytics](/src/lib/providers/ibm-digital-analytics)\n* [Splunk](/src/lib/providers/splunk)\n* [Pyze](/src/lib/providers/pyze)\n* [Posthog](/src/lib/providers/posthog)\n\n### For other providers\n\nIf there's no Angulartics2 plugin for your analytics vendor of choice, please feel free to write yours and PR it!\n\n### Minimal setup for Google Analytics\n\n- See [Google Analytics](/src/lib/providers/ga) if your code snippet contains `analytics.js`\n- See [Google Tag Manager](/src/lib/providers/gtm) if your code snippet contains `gtag.js`\n- See [Google Global Site Tag](/src/lib/providers/gst) if your code snippet contains `gtag.js`\n\n\n## Contributing\n\nPlease see the [CONTRIBUTING](https://github.com/angulartics/angulartics2/blob/master/.github/CONTRIBUTING.md) and [CODE_OF_CONDUCT](https://github.com/angulartics/angulartics2/blob/master/.github/CODE_OF_CONDUCT.md) files for guidelines.\n\n## License\n\n[MIT](LICENSE)\n\n## Related Projects\n+ [analytics-angular](https://github.com/segmentio/analytics-angular): Write analytics code once, collect customer data from any source, and send it to over 250+ destinations with [Segment](https://segment.com/).\n","project_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangulartics%2Fangulartics2","html_url":"https://awesome.ecosyste.ms/projects/github.com%2Fangulartics%2Fangulartics2","lists_url":"https://awesome.ecosyste.ms/api/v1/projects/github.com%2Fangulartics%2Fangulartics2/lists"}