Skip to content

Commit

Permalink
feat: v7 Merge pull request #292 from angulartics/next
Browse files Browse the repository at this point in the history
BREAKING CHANGE: requires angular 6.
BREAKING CHANGE: providers will no longer start tracking events by default. a call to startTracking() will be necessary to maintain functionality
BREAKING CHANGE: no longer requires passing of providers to Angulartics2Module.forRoot

shoutout to @rossedfort

closes #282
  • Loading branch information
scttcper committed Oct 9, 2018
2 parents e517f0f + 0061636 commit 6e5c886
Show file tree
Hide file tree
Showing 64 changed files with 4,928 additions and 3,289 deletions.
40 changes: 25 additions & 15 deletions README.md
Original file line number Diff line number Diff line change
Expand Up @@ -11,7 +11,7 @@ Vendor-agnostic Analytics for Angular Applications. [angulartics.github.io/angul
- [Installation](#installation)
- [Include it in your application](#include-it-in-your-application)
- [Usage](#usage)
- [Tracking events in templates/HTML](#tracking-events-in-templates-html)
- [Tracking events in templates/HTML](#tracking-events-in-templateshtml)
- [Tracking events in the code](#tracking-events-in-the-code)
- [Configuring the Module](#configuring-the-module)
- [Exclude routes from automatic pageview tracking](#exclude-routes-from-automatic-pageview-tracking)
Expand All @@ -24,10 +24,17 @@ Vendor-agnostic Analytics for Angular Applications. [angulartics.github.io/angul
- [Supported providers](#supported-providers)
- [For other providers](#for-other-providers)
- [Minimal setup for Google Analytics](#minimal-setup-for-google-analytics)
- [v4 Migration and Breaking Changes](#v4-migration-and-breaking-changes)
- [Contributing](#contributing)
- [License](#license)

## Dependencies
Latest version available for each version of Angular

| Angulartics2 | Angular |
| ------------ | ------- |
| 5.4.0 | 4.x |
| 6.3.1 | 5.x |

## Installation

```sh
Expand All @@ -36,7 +43,7 @@ npm install angulartics2 --save

### Include it in your application

1. Add `Angulartics2Module` to your root NgModule passing an array of providers to enable
1. Add `Angulartics2Module` to your root NgModule passing any options desired
```ts
import { NgModule } from '@angular/core';
import { BrowserModule } from '@angular/platform-browser';
Expand All @@ -56,22 +63,24 @@ const ROUTES: Routes = [
RouterModule.forRoot(ROUTES),

// added to imports
Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
Angulartics2Module.forRoot(),
],
declarations: [AppComponent],
bootstrap: [AppComponent],
})
```
> Note the different imports when [Using Without A Router](#using-without-a-router) or [Using With UI-Router](#using-with-ui-router).
2. __Required__: Import your providers in the root component. This starts the tracking of route changes.
2. __Required__: Import your providers in the root component. Call `startTracking()` to start the tracking of route changes.
```ts
// component
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';

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

Expand All @@ -93,7 +102,8 @@ import { Component } from '@angular/core';
angularticsAction="DownloadClick"
[angularticsCategory]="song.name">
Click Me
</div>`,
</div>
`,
})
export class SongDownloadBox {}

Expand Down Expand Up @@ -154,7 +164,7 @@ this.angulartics2.eventTrack.next({

Pass string literals or regular expressions to exclude routes from automatic pageview tracking.
````ts
Angulartics2Module.forRoot([providers], {
Angulartics2Module.forRoot({
pageTracking: {
excludedRoutes: [
/\/[0-9]{4}\/[0-9]{2}\/[a-zA-Z0-9|\-]*/,
Expand All @@ -168,7 +178,7 @@ Angulartics2Module.forRoot([providers], {

`/project/12981/feature` becomes `/project/feature`
````ts
Angulartics2Module.forRoot([providers], {
Angulartics2Module.forRoot({
pageTracking: {
clearIds: true,
}
Expand All @@ -180,7 +190,7 @@ You can set your own regexp if you need to :

`/project/a01/feature` becomes `/project/feature`
````ts
Angulartics2Module.forRoot([providers], {
Angulartics2Module.forRoot({
pageTracking: {
clearIds: true,
idsRegExp: new RegExp('^[a-z]\\d+$') /* Workaround: No NgModule metadata found for 'AppModule' */
Expand All @@ -194,7 +204,7 @@ This can be combined with clearIds and idsRegExp

`/project/12981/feature?param=12` becomes `/project/12981/feature`
````ts
Angulartics2Module.forRoot([providers], {
Angulartics2Module.forRoot({
pageTracking: {
clearQueryParams: true,
}
Expand All @@ -205,7 +215,7 @@ Angulartics2Module.forRoot([providers], {

`/callback#authcode=123&idToken=456` becomes `/callback`
````ts
Angulartics2Module.forRoot([providers], {
Angulartics2Module.forRoot({
pageTracking: {
clearHash: true,
}
Expand All @@ -222,7 +232,7 @@ import { Angulartics2RouterlessModule } from 'angulartics2/routerlessmodule';
// ...
imports: [
BrowserModule,
Angulartics2RouterlessModule.forRoot([Angulartics2GoogleAnalytics]),
Angulartics2RouterlessModule.forRoot(),
],
})
````
Expand All @@ -237,7 +247,7 @@ import { Angulartics2UirouterModule } from 'angulartics2/uiroutermodule';
// ...
imports: [
BrowserModule,
Angulartics2UirouterModule.forRoot([Angulartics2GoogleAnalytics]),
Angulartics2UirouterModule.forRoot(),
],
})
````
Expand All @@ -256,7 +266,7 @@ System.config({
## Supported providers

* [Google Analytics](/src/lib/providers/ga) (`analytics.js`)
* [Google Tag Manager](/src/lib/providers/gtm) (`gtag.js`)
* [Google Tag Manager](/src/lib/providers/gtm)
* [Google Enhanced Ecom](/src/lib/providers/ga-enhanced-ecom)
* [Google Global Site Tag](/src/lib/providers/gst) (`gtag.js`)
* [Kissmetrics](/src/lib/providers/kissmetrics)
Expand Down
115 changes: 33 additions & 82 deletions package.json
Original file line number Diff line number Diff line change
Expand Up @@ -20,54 +20,54 @@
},
"private": true,
"dependencies": {
"@angular/animations": "^6.0.9",
"@angular/cdk": "^6.4.1",
"@angular/common": "^6.0.9",
"@angular/compiler": "^6.0.9",
"@angular/core": "^6.0.9",
"@angular/forms": "^6.0.9",
"@angular/material": "^6.4.1",
"@angular/platform-browser": "^6.0.9",
"@angular/platform-browser-dynamic": "^6.0.9",
"@angular/router": "^6.0.9",
"@ng-bootstrap/ng-bootstrap": "2.2.0",
"@uirouter/angular": "^2.0.1",
"bootstrap": "^4.1.2",
"@angular/animations": "^6.1.9",
"@angular/cdk": "^6.4.7",
"@angular/common": "^6.1.9",
"@angular/compiler": "^6.1.9",
"@angular/core": "^6.1.9",
"@angular/forms": "^6.1.9",
"@angular/material": "^6.4.7",
"@angular/platform-browser": "^6.1.9",
"@angular/platform-browser-dynamic": "^6.1.9",
"@angular/router": "^6.1.9",
"@ng-bootstrap/ng-bootstrap": "3.3.0",
"@uirouter/angular": "^2.0.2",
"bootstrap": "^4.1.3",
"core-js": "^2.5.7",
"rxjs": "6.2.2",
"rxjs": "6.3.3",
"zone.js": "^0.8.26"
},
"devDependencies": {
"@angular-devkit/build-angular": "~0.6.8",
"@angular/cli": "^6.0.8",
"@angular/compiler-cli": "^6.0.9",
"@angular/language-service": "^6.0.9",
"@types/applicationinsights-js": "^1.0.5",
"@angular-devkit/build-angular": "~0.8.4",
"@angular/cli": "^6.2.4",
"@angular/compiler-cli": "^6.1.9",
"@angular/language-service": "^6.1.9",
"@types/applicationinsights-js": "^1.0.7",
"@types/facebook-pixel": "^0.0.19",
"@types/fs-extra": "^5.0.4",
"@types/google.analytics": "^0.0.39",
"@types/jasmine": "^2.8.8",
"@types/node": "~10.5.2",
"@types/jasmine": "^2.8.9",
"@types/node": "~10.11.5",
"@types/segment-analytics": "^0.0.28",
"codelyzer": "^4.4.2",
"commitizen": "^2.10.1",
"codelyzer": "^4.5.0",
"commitizen": "^3.0.2",
"cz-conventional-changelog": "^2.1.0",
"fs-extra": "^7.0.0",
"jasmine-core": "2.99.1",
"karma": "^2.0.4",
"jasmine-core": "3.2.1",
"karma": "^3.0.0",
"karma-chrome-launcher": "^2.2.0",
"karma-cli": "^1.0.1",
"karma-coverage-istanbul-reporter": "^2.0.1",
"karma-coverage-istanbul-reporter": "^2.0.4",
"karma-jasmine": "^1.1.2",
"karma-jasmine-html-reporter": "0.2.2",
"karma-jasmine-html-reporter": "1.3.1",
"karma-mocha-reporter": "^2.2.5",
"ng-packagr": "4.0.0",
"ng-packagr": "4.3.0",
"rimraf": "^2.6.2",
"semantic-release": "^15.8.1",
"travis-deploy-once": "^5.0.1",
"ts-node": "^7.0.0",
"semantic-release": "^15.9.17",
"travis-deploy-once": "^5.0.9",
"ts-node": "^7.0.1",
"tslint": "^5.11.0",
"typescript": "2.7.2"
"typescript": "2.9.2"
},
"release": {
"branch": "master"
Expand All @@ -84,54 +84,5 @@
"commitizen": {
"path": "cz-conventional-changelog"
}
},
"contributors": [
"Luis Farzati <lfarzati@gmail.com> (http://github.com/luisfarzati)",
"Tim Elfelt <timelf123@gmail.com> (https://github.com/timelf123)",
"Simon Morvan <garphy@zone84.net> (https://github.com/morvans)",
"Corinna Cohn <ccohn@fusionalliance.com>",
"Tarun Garg <tarun1793@users.noreply.github.com> (https://github.com/tarun1793)",
"Ruben Oostinga <roostinga@xebia.com> (https://github.com/0xR)",
"Adam Creeger <adamcreeger@gmail.com> (https://github.com/acreeger)",
"Jan Nicklas <j.nicklas@me.com> (https://github.com/jantimon)",
"Tomás Escobar <tomasescobar@users.noreply.github.com> (https://github.com/tomasescobar)",
"Martin Crawford <bemisguided@users.noreply.github.com> (https://github.com/bemisguided)",
"Contantine Kim <elegantcoder@gmail.com> (https://github.com/elegantcoder)",
"Larry Botha <larry@fixate.it> (https://github.com/larrybotha)",
"Justin Russell <jus.russell@gmail.com> (https://github.com/jtrussell)",
"William Li <wli@williamhli.com> (https://github.com/wli)",
"pcw216 <pwinters@rallydev.com>",
"Nhat Nguyen <ndnhat@hotmail.com> (https://github.com/ndnhat)",
"Chris Mendis <chris.mendis@gmail.com> (https://github.com/chrismendis)",
"Sampo Savolainen <sampo.savolainen@spatineo.com> (https://github.com/sampov2)",
"Michał Gołębiowski <m.goleb@gmail.com> (https://github.com/mzgol)",
"Haim Litvak <haim.litvak@hp.com>",
"Hannah Fouasnon <hanelifou@gmail.com> (https://github.com/fouasnon)",
"Martin <martinlogdberg@gmail.com> (https://github.com/malog84)",
"tlekan <tom.lekan@gmail.com> (https://github.com/tlekan)",
"Blake Blackshear <bblackshear@nextgxdx.com> (https://github.com/blakeblackshear)",
"Guillermo Alcantara <guillermo.alcantara@gmail.com> (https://github.com/eipipuz)",
"Michael Cameron Delaney <michaelcamerondelaney@gmail.com> (https://github.com/NewMediaRoc)",
"Chris Soyars <ctso@ctso.me> (https://github.com/ctso)",
"Fil Maj <maj.fil@gmail.com> (https://github.com/filmaj)",
"Adam Yost <swimmadude66@users.noreply.github.com> (https://github.com/swimmadude66)",
"Adam S. Kirschner <accounts@adamskirschner.com> (https://github.com/hikirsch)",
"Tyler Danielson <tysdanielson@gmail.com> (https://github.com/tydanielson)",
"Bruno Bruzzano <brunano21@gmail.com> (https://github.com/brunano21)"
],
"keywords": [
"angular2",
"ng2",
"angular",
"analytics",
"tracking",
"google analytics",
"google tag manager",
"woopra",
"splunk",
"piwik",
"page tracking",
"event tracking",
"inspectlet"
]
}
}
24 changes: 0 additions & 24 deletions src/app/app.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -21,27 +21,3 @@ <h1 class="display-4">Angulartics 2</h1>
<section id="providers" scrollby-offset="20%">
<app-providers></app-providers>
</section>

<section id="getting-started" data-offset="50">
<div class="container providers mb-5">
<div class="row">
<div class="col-12 mb-2">
<h3>Getting Started</h3>
</div>
<div class="col-12 mb-2">
<p>1. Install</p>
<pre><code>npm install angulartics2</code></pre>
<p>2. Import Angulartics2Module in root module</p>
<pre><code>{{ importModule }}</code></pre>
<p>3. Import all providers in root component</p>
<pre><code>{{ importComponent }}</code></pre>
<p>4. Follow setup instructions for active providers</p>
<p>ex:
<a href="https://github.com/angulartics/angulartics2/tree/master/src/lib/providers/ga">
Google Analytics Setup
</a>
</p>
</div>
</div>
</div>
</section>
28 changes: 1 addition & 27 deletions src/app/app.component.ts
Original file line number Diff line number Diff line change
@@ -1,33 +1,7 @@
import { Component } from '@angular/core';

const importModule = `import { Angulartics2Module } from 'angulartics2';
import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@NgModule({
imports: [
// added to imports
Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
],
})
`;

const importComponent = `import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
@Component({
selector: 'app',
template: \`your template\`
})
export class AppComponent {
// initializes the service and starts event subscriptions
constructor(googleAnalytics: Angulartics2GoogleAnalytics) {}
}
`;

@Component({
selector: 'app-root',
templateUrl: './app.component.html',
})
export class AppComponent {
importModule = importModule;
importComponent = importComponent;
}
export class AppComponent {}
1 change: 0 additions & 1 deletion src/app/navbar/navbar.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -18,7 +18,6 @@
<ul class="navbar-nav">
<li class="nav-item">
<a class="nav-link p-2" href="https://github.com/angulartics/angulartics2" target="_blank" rel="noopener" aria-label="GitHub">
<mat-icon svgIcon="github"></mat-icon>
GitHub
</a>
</li>
Expand Down
12 changes: 1 addition & 11 deletions src/app/navbar/navbar.component.ts
Original file line number Diff line number Diff line change
@@ -1,12 +1,10 @@
import { Component } from '@angular/core';
import { MatIconRegistry } from '@angular/material';
import { DomSanitizer } from '@angular/platform-browser';

@Component({
selector: 'app-navbar',
templateUrl: './navbar.component.html',
styles: [`
.mat-icon {
svg {
width: 1.1rem !important;
max-height: 1.1rem !important;
vertical-align: text-top !important;
Expand All @@ -15,12 +13,4 @@ import { DomSanitizer } from '@angular/platform-browser';
})
export class NavbarComponent {
navbarCollapsed = true;
constructor(iconRegistry: MatIconRegistry, sanitizer: DomSanitizer) {
iconRegistry.addSvgIcon(
'github',
sanitizer.bypassSecurityTrustResourceUrl(
`assets/svg/github.svg`,
),
);
}
}
1 change: 1 addition & 0 deletions src/app/providers/providers.component.html
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@
<div class="row">
<div class="col-12 mb-2">
<h3>Providers</h3>
<p>Select a provider to see setup instructions. All providers are supported by the Angular community and their contributions.</p>
</div>

<div class="col-6 col-md-4 col-lg-3 mb-4" *ngFor="let provider of providers">
Expand Down

0 comments on commit 6e5c886

Please sign in to comment.