Merge pull request #294 from ngx-rocket/feature/analytics

Add support for analytics with Angulartics2.

generators/app/prompts.js

@@ -104,5 +104,38 @@ module.exports = [
     message: 'Do you want lazy loading?',
     default: false,
     when: props => props.ui !== 'ionic'
+  },
+  {
+    type: 'confirm',
+    name: 'angulartics',
+    message: 'Do you want analytics support (with Angulartics2)?',
+    default: false
+  },
+  {
+    type: 'list',
+    name: 'analyticsProvider',
+    message: 'What analytics provider are you using?',
+    choices: [
+      {
+        value: 'ga',
+        name: 'Google Analytics'
+      },
+      {
+        value: 'gtm',
+        name: 'Google Tag Manager'
+      },
+      {
+        value: 'other',
+        name: 'Other'
+      }
+    ],
+    when: props => props.angulartics,
+    default: 'ga'
+  },
+  {
+    type: 'input',
+    name: 'googleAnalyticsAccount',
+    message: 'What is your Google Analytics account (e.g. UA-1234567-1)?',
+    when: props => props.angulartics && props.analyticsProvider === 'ga'
   }
 ];

generators/app/templates/_package.json

@@ -69,6 +69,9 @@
     "@angular/flex-layout": "5.0.0-beta.13",
     "material-design-icons-iconfont": "^3.0.3",
     "hammerjs": "^2.0.8",
+<% } -%>
+<% if (props.angulartics) { -%>
+    "angulartics2": "^5.2.0",
 <% } -%>
     "core-js": "^2.5.2",
     "lodash": "^4.17.4",

generators/app/templates/docs/_analytics.md

@@ -0,0 +1,66 @@
+# Analytics
+<% if (!props.angulartics) { -%>
+
+This project does not come with any analytics library.
+Should you decide to use one, you may want to consider [Angulartics2](https://github.com/angulartics/angulartics2).
+
+<% } else { -%>
+
+Analytics in this app are managed through the [Angulartics2](https://github.com/angulartics/angulartics2) library.
+
+It is already pre-configured to track page views, and provides examples to track events from both TypeScript code and HTML elements.
+Here is a quick usage documentation, you can read further information on the official website.
+
+## Registering your provider
+<% if (props.analyticsProvider === 'ga') { -%>
+
+Google Analytics is already registered as the project's analytics provider.
+Should you need to change the account identifier, you can do so in the call to `ga(...)` performed in the body of `index.html`.
+
+<% } else { -%>
+
+Currently, only Google Analytics is fully installed from the starter kit.
+Do not worry, this only means you will need to select and import your provider yourself.
+Simply follow the instructions detailed in the [official documentation](https://github.com/angulartics/angulartics2#supported-providers).
+
+<% } -%>
+## Tracking events
+
+### Declarative event tracking
+
+The simplest way to do event tracking is by adding the attributes `angulartics2On`, `angularticsCategory` and `angularticsAction` to an HTML element.
+The homepage generated by the starter kit contains one such button.
+For reference, here is a UI-framework-agnostic example.
+
+```html
+<button
+  angulartics2On="click"
+  angularticsAction="Button clicked"
+  [angularticsCategory]="quote">
+  Click me to send the current quote as an Analytics event
+</button>
+```
+
+### Using the API
+<% if (props.analyticsProvider === 'ga') { -%>
+
+As an example, the application  already comes configured to track its startup through an event.
+You may use the example as reference: it can be found in the first lines of `ngOnInit()` in `app.component.ts`.
+
+<% } -%>
+To access the API, inject your provider :
+
+```typescript
+constructor(...
+            private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
+            ...)
+```
+
+You may then use the `eventTrack` function:
+
+```typescript
+this.angulartics2GoogleAnalytics.eventTrack('Something happened', {category: 'My category'});
+this.angulartics2GoogleAnalytics.eventTrack('Something else happened', {category: 'My other category', label: 'My custom label'});
+```
+
+<% } -%>

generators/app/templates/src/_index.html

@@ -22,6 +22,17 @@
 <% } -%>
 </head>
 <body>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+  <!-- Google Analytics -->
+  <script>
+    (function(i,s,o,g,r,a,m){i['GoogleAnalyticsObject']=r;i[r]=i[r]||function(){
+      (i[r].q=i[r].q||[]).push(arguments)},i[r].l=1*new Date();a=s.createElement(o),
+      m=s.getElementsByTagName(o)[0];a.async=1;a.src=g;m.parentNode.insertBefore(a,m)
+    })(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
+    ga('create', '<%= props.googleAnalyticsAccount %>', 'auto');
+  </script>
+  <!-- End Google Analytics -->
+<% } -%>
 <% if (props.target.includes('web')) { -%>
   <!--[if lt IE 10]>
   <p>

generators/app/templates/src/app/_app.component.spec.ts

@@ -9,6 +9,10 @@ import { Keyboard } from '@ionic-native/keyboard';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 <% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+import { Angulartics2Module } from 'angulartics2';
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+<% } -%>
 
 import { CoreModule } from '@app/core';
 import { AppComponent } from './app.component';
@@ -19,6 +23,9 @@ describe('AppComponent', () => {
       imports: [
 <% if (props.ui === 'ionic') { -%>
         IonicModule.forRoot(AppComponent),
+<% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+        Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
 <% } -%>
         RouterTestingModule,
         TranslateModule.forRoot(),

generators/app/templates/src/app/_app.component.ts

@@ -22,6 +22,9 @@ import { Keyboard } from '@ionic-native/keyboard';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 <% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+<% } -%>
 
 import { environment } from '@env/environment';
 import { Logger, I18nService } from '@app/core';
@@ -52,6 +55,11 @@ export class AppComponent implements OnInit {
               private keyboard: Keyboard,
               private statusBar: StatusBar,
               private splashScreen: SplashScreen,
+<% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+              // do not remove the analytics injection, even if the call in ngOnInit() is removed
+              // this injection initializes page tracking through the router
+              private angulartics2GoogleAnalytics: Angulartics2GoogleAnalytics,
 <% } -%>
               private i18nService: I18nService) { }
 
@@ -63,6 +71,10 @@ export class AppComponent implements OnInit {
 
     log.debug('init');
 
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+    this.angulartics2GoogleAnalytics.eventTrack(environment.version, {category: 'App initialized'});
+<% } -%>
+
     // Setup translations
     this.i18nService.init(environment.defaultLanguage, environment.supportedLanguages);
 

generators/app/templates/src/app/_app.module.ts

@@ -26,6 +26,12 @@ import { Keyboard } from '@ionic-native/keyboard';
 import { StatusBar } from '@ionic-native/status-bar';
 import { SplashScreen } from '@ionic-native/splash-screen';
 <% } -%>
+<% if (props.angulartics) { -%>
+import { Angulartics2Module } from 'angulartics2';
+<% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+import { Angulartics2GoogleAnalytics } from 'angulartics2/ga';
+<% } -%>
 
 <% if (props.pwa) { -%>
 import { environment } from '@env/environment';
@@ -67,6 +73,11 @@ import { AppRoutingModule } from './app-routing.module';
 <% } -%>
 <% if (props.auth) { -%>
     LoginModule,
+<% } -%>
+<% if (props.angulartics && props.analyticsProvider === 'ga') { -%>
+    Angulartics2Module.forRoot([Angulartics2GoogleAnalytics]),
+<% } else if (props.angulartics ) { -%>
+    Angulartics2Module.forRoot([]),
 <% } -%>
     AppRoutingModule
   ],

generators/app/templates/src/app/home/__bootstrap.home.component.html → generators/app/templates/src/app/home/__bootstrap._home.component.html

@@ -6,5 +6,16 @@ <h1>
     </h1>
     <app-loader [isLoading]="isLoading"></app-loader>
     <q [hidden]="isLoading">{{quote}}</q>
+<% if (props.angulartics) { -%>
+    <p>
+      <button
+        class="btn btn-primary"
+        angulartics2On="click"
+        angularticsAction="Click button below quote"
+        [angularticsCategory]="quote">
+        Click me to send an Analytics event
+      </button>
+    </p>
+<% } -%>
   </div>
 </div>

generators/app/templates/src/app/home/__ionic.home.component.html → generators/app/templates/src/app/home/__ionic._home.component.html

@@ -17,6 +17,17 @@
         <app-loader [isLoading]="isLoading"></app-loader>
         <q [hidden]="isLoading">{{quote}}</q>
       </p>
+<% if (props.angulartics) { -%>
+      <p>
+        <button
+          ion-button
+          angulartics2On="click"
+          angularticsAction="Click button below quote"
+          [angularticsCategory]="quote">
+          Click me to send an Analytics event
+        </button>
+      </p>
+<% } -%>
     </ion-card-content>
   </ion-card>
 </ion-content>

generators/app/templates/src/app/home/__material.home.component.html → generators/app/templates/src/app/home/__material._home.component.html

@@ -9,6 +9,17 @@
         <app-loader [isLoading]="isLoading" size="1.5"></app-loader>
         <q [hidden]="isLoading">{{quote}}</q>
       </mat-card-subtitle>
+<% if (props.angulartics) { -%>
+      <mat-card-actions>
+        <button
+          mat-raised-button
+          angulartics2On="click"
+          angularticsAction="Click button below quote"
+          [angularticsCategory]="quote">
+          Click me to send an Analytics event
+        </button>
+      </mat-card-actions>
+<% } -%>
     </mat-card-content>
   </mat-card>
 </div>

generators/app/templates/src/app/home/__raw.home.component.html → generators/app/templates/src/app/home/__raw._home.component.html

@@ -5,4 +5,14 @@ <h1>
   </h1>
   <app-loader [isLoading]="isLoading"></app-loader>
   <q [hidden]="isLoading">{{quote}}</q>
+<% if (props.angulartics) { -%>
+  <p>
+    <button
+      angulartics2On="click"
+      angularticsAction="Click button below quote"
+      [angularticsCategory]="quote">
+      Click me to send an Analytics event
+    </button>
+  </p>
+<% } -%>
 </div>

generators/app/templates/src/app/home/_home.component.spec.ts

@@ -6,6 +6,10 @@ import { IonicModule } from 'ionic-angular';
 import { BrowserAnimationsModule } from '@angular/platform-browser/animations';
 import { FlexLayoutModule } from '@angular/flex-layout';
 <% } -%>
+<% if (props.angulartics) { -%>
+import { RouterTestingModule } from '@angular/router/testing';
+import { Angulartics2Module } from 'angulartics2';
+<% } -%>
 
 import { CoreModule } from '@app/core';
 import { SharedModule } from '@app/shared';
@@ -28,6 +32,10 @@ describe('HomeComponent', () => {
           BrowserAnimationsModule,
           FlexLayoutModule,
           MaterialModule,
+<% } -%>
+<% if (props.angulartics) { -%>
+          RouterTestingModule,
+          Angulartics2Module.forRoot([]),
 <% } -%>
           CoreModule,
           SharedModule,

generators/app/templates/src/app/home/_home.module.ts

@@ -6,6 +6,9 @@ import { IonicModule } from 'ionic-angular';
 <% } else if (props.ui === 'material') { -%>
 import { FlexLayoutModule } from '@angular/flex-layout';
 <% } -%>
+<% if (props.angulartics) { -%>
+import { Angulartics2Module } from 'angulartics2';
+<% } -%>
 
 import { CoreModule } from '@app/core';
 import { SharedModule } from '@app/shared';
@@ -27,6 +30,9 @@ import { QuoteService } from './quote.service';
 <% } else if (props.ui === 'material') { -%>
     FlexLayoutModule,
     MaterialModule,
+<% } -%>
+<% if (props.angulartics) { -%>
+    Angulartics2Module,
 <% } -%>
     HomeRoutingModule
   ],

scripts/tests/app/web/bootstrap.json

@@ -3,5 +3,8 @@
   "pwa": false,
   "ui": "bootstrap",
   "auth": false,
-  "lazy": false
+  "lazy": false,
+  "angulartics": true,
+  "analyticsProvider": "ga",
+  "googleAnalyticsAccount": "UA-116237171-1"
 }

scripts/tests/app/web/ionic.json

@@ -3,5 +3,6 @@
   "pwa": false,
   "ui": "ionic",
   "auth": false,
-  "lazy": false
+  "lazy": false,
+  "angulartics": false
 }

scripts/tests/app/web/material.json

@@ -5,5 +5,6 @@
   "layout": "simple",
   "auth": false,
   "lazy": false,
+  "angulartics": false,
   "location": "hash"
 }

scripts/tests/app/web/raw.json

@@ -3,5 +3,7 @@
   "pwa": false,
   "ui": "raw",
   "auth": false,
-  "lazy": false
+  "lazy": false,
+  "angulartics": true,
+  "analyticsProvider": "other"
 }