Dev 276 google analytics rebase

default/src/app/app.module.ts

@@ -9,7 +9,7 @@ import { AUTH_PROVIDERS } from 'angular2-jwt';
 import { FocusMeDirective } from './shared/focus-me.directive';
 import { BackendService } from './shared/backend.service';
 import { KeysPipe } from './shared/keys.pipe';
-
+import {GoogleAnalyticsService} from './shared/google.analytics.service';
 
 import { AppComponent }  from './app.component';
 import { ReportComponent } from './report/index';
@@ -42,6 +42,7 @@ let providers = [
     HTTP_PROVIDERS,
     AuthService,
     BackendService,
+    GoogleAnalyticsService,
 ];
 
 let declarations = [

default/src/app/auth/auth-button.component.spec.ts

@@ -12,6 +12,7 @@ import { AuthService } from './auth.service';
 import { AuthButtonComponent } from './auth-button.component';
 import {BehaviorSubject}    from 'rxjs/Rx';
 import { User } from '../shared/user';
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 
 
 
@@ -35,11 +36,21 @@ class MockAuthService {
 
 }
 
+class MockGoogleAnalyticsService {
+    event(eventCategory: string, eventAction: string, eventLabel: string) {
+    }
+    setUserId(userId: string) {
+    }
+    unsetUserId() {
+    }
+}
+
 describe('AuthButtonComponent', () => {
     beforeEach(() => {
         addProviders([
             AuthButtonComponent,
-            {provide: AuthService, useClass: MockAuthService}
+            {provide: AuthService, useClass: MockAuthService},
+            {provide: GoogleAnalyticsService, useClass: MockGoogleAnalyticsService}
         ]);
     });
 
@@ -64,4 +75,17 @@ describe('AuthButtonComponent', () => {
         expect(authButtonComponent.loggedIn).toBe(false);
 
     }));
+
+    it('should record GA event for login and logout', inject(
+                // Note that we pass AuthService, NOT MockAuthService
+                [AuthButtonComponent, GoogleAnalyticsService], (authButtonComponent: AuthButtonComponent,
+                                                                             ga: MockGoogleAnalyticsService
+        ) => {
+
+        spyOn(ga, 'event');
+        authButtonComponent.login();
+        expect(ga.event).toHaveBeenCalledWith('Auth', 'Login', 'click');
+        authButtonComponent.logout();
+        expect(ga.event).toHaveBeenCalledWith('Auth', 'Logout', 'click');
+    }));
 });

default/src/app/auth/auth-button.component.ts

@@ -3,7 +3,7 @@
  */
 import { Component } from '@angular/core';
 import { AuthService } from './auth.service';
-
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 
 @Component({
     selector: 'auth-button',
@@ -13,7 +13,7 @@ import { AuthService } from './auth.service';
 export class AuthButtonComponent {
     public loggedIn = false;
 
-    constructor(public auth: AuthService) {
+    constructor(public auth: AuthService, private ga: GoogleAnalyticsService) {
       this.auth.getUser().subscribe(
             user => {
                 if (user && user.loggedIn) {
@@ -25,9 +25,11 @@ export class AuthButtonComponent {
         );
     }
     login() {
+        this.ga.event('Auth', 'Login', 'click');
         this.auth.login();
     }
     logout() {
+        this.ga.event('Auth', 'Logout', 'click');
         this.auth.logout();
     }
 }

default/src/app/auth/auth.service.ts

@@ -8,10 +8,7 @@ import { Observable, BehaviorSubject }  from 'rxjs/Rx';
 import { User } from '../shared/user';
 import { BackendService } from '../shared/backend.service';
 import { Integration } from '../shared/integration';
-
-
-// Declare ga function as ambient
-declare var ga: Function;
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 
 @Injectable()
 export class AuthService {
@@ -28,7 +25,7 @@ export class AuthService {
         }
     );
 
-    constructor(private fb_auth: AngularFireAuth, private backend: BackendService) {
+    constructor(private fb_auth: AngularFireAuth, private backend: BackendService, private ga: GoogleAnalyticsService) {
 
         this.fb_auth.subscribe(
             // An auth event happened.
@@ -63,10 +60,10 @@ export class AuthService {
         this.getUser().subscribe(
             (user: User) => {
                 if (user && user.loggedIn) {
-                    ga('set', 'userId', user.uid); // Set the user ID using signed-in user_id.
+                    this.ga.setUserId(user.uid); // Set the user ID using signed-in user_id.
                 }
                 if (user && !user.loggedIn) {
-                    ga('unset', 'userId', null);
+                    this.ga.unsetUserId();
                 }
             }
         );

default/src/app/report/report.component.spec.ts

@@ -4,6 +4,7 @@ import { QueryService } from '../query/index';
 import { AuthService} from '../auth/auth.service';
 import { Observable, BehaviorSubject, Observer }   from 'rxjs';
 import { User } from '../shared/user';
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 // Note that this also imports moment itself.
 import * as moment from 'moment-timezone';
 
@@ -38,6 +39,15 @@ class MockAuthService {
 
 }
 
+class MockGoogleAnalyticsService {
+    event(eventCategory: string, eventAction: string, eventLabel: string) {
+    }
+    setUserId(userId: string) {
+    }
+    unsetUserId() {
+    }
+}
+
 // TODO: This isn't actually testing the component on the webpage, but is calling the items directly.
 // TODO: RC5 adds TestBed Class.. see
 // TODO: We can use https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/
@@ -46,7 +56,8 @@ describe('SearchComponent', () => {
         addProviders([
             ReportComponent,
             {provide: QueryService, useClass: MockQueryService},
-            {provide: AuthService, useClass: MockAuthService}
+            {provide: AuthService, useClass: MockAuthService},
+            {provide: GoogleAnalyticsService, useClass: MockGoogleAnalyticsService}
         ]);
     });
     it('should not call QueryService.getQueries() when user is logged out.',
@@ -281,5 +292,34 @@ describe('SearchComponent', () => {
                 }
             )
         );
+
+        it('should record GA event when clicking Show more button',
+            inject([ReportComponent, QueryService, GoogleAnalyticsService],
+                (component: ReportComponent, querySrv: QueryService, ga: MockGoogleAnalyticsService) => {
+
+                    spyOn(querySrv, 'getQueries').and.callFake(() => {
+                        return Observable.create(
+                            (observer: Observer<any>) => {
+                                observer.next({
+                                    'cursor': 'fake',
+                                    'payload': [
+                                        {
+                                            'query': 'asdfasdf',
+                                            'tags': ['fake-tag'],
+                                            'timestamp': '2016-09-01T22:04:38.787362'
+                                        }
+                                    ]
+                                });
+                                observer.complete();
+                            }
+                        );
+                    });
+
+                    spyOn(ga, 'event');
+                    component.getMoreData('cursor_coming_through');
+                    expect(ga.event).toHaveBeenCalledWith('Report', 'Show more', 'click');
+                }
+            )
+        );
     });
 });

default/src/app/report/report.component.ts

@@ -5,6 +5,7 @@
 import { Component } from '@angular/core';
 import { QueryService } from '../query/query.service';
 import { AuthService } from '../auth/index';
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 // Note that this also imports moment itself.
 import * as moment from 'moment-timezone';
 
@@ -46,7 +47,7 @@ export class ReportComponent {
         moment.tz.setDefault(this.tz);
     }
 
-    constructor(private queryService: QueryService, private auth: AuthService) {
+    constructor(private queryService: QueryService, private auth: AuthService, private ga: GoogleAnalyticsService) {
         this.setTimezone();
 
         this.auth.getUser().subscribe(
@@ -95,6 +96,7 @@ export class ReportComponent {
     }
 
     getMoreData(cursor: string) {
+        this.ga.event('Report', 'Show more', 'click');
         this.queryService.getQueries(cursor).subscribe(
             (data: any[]) => {
                 this.data = this.data.concat(this.processData(data['payload'], data['cursor']));

default/src/app/search/search.component.spec.ts

@@ -4,6 +4,7 @@ import { QueryService } from '../query/index';
 import { AuthService} from '../auth/auth.service';
 import { Observable, BehaviorSubject, Observer }   from 'rxjs';
 import { User } from '../shared/user';
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 
 class MockQueryService {
 
@@ -38,6 +39,15 @@ class MockAuthService {
 
 }
 
+class MockGoogleAnalyticsService {
+    event(eventCategory: string, eventAction: string, eventLabel: string) {
+    }
+    setUserId(userId: string) {
+    }
+    unsetUserId() {
+    }
+}
+
 // TODO: This isn't actually testing the component on the webpage, but is calling the items directly.
 // TODO: RC5 adds TestBed Class.. see
 // TODO: We can use https://developers.livechatinc.com/blog/testing-angular-2-apps-dependency-injection-and-components/
@@ -46,7 +56,8 @@ describe('SearchComponent', () => {
         addProviders([
             SearchComponent,
             {provide: QueryService, useClass: MockQueryService},
-            {provide: AuthService, useClass: MockAuthService}
+            {provide: AuthService, useClass: MockAuthService},
+            {provide: GoogleAnalyticsService, useClass: MockGoogleAnalyticsService}
         ]);
     });
     it('submit button should NOT send a query if search field is empty',
@@ -106,4 +117,57 @@ describe('SearchComponent', () => {
         })
 
     );
+
+    it('should record the GA event for submit button on clicking it or pressing enter key',
+        inject([SearchComponent, GoogleAnalyticsService], (component: SearchComponent,
+                                                           ga: MockGoogleAnalyticsService
+        ) => {
+            spyOn(component, 'doSearch').and.callFake(() => {
+                return Observable.create(
+                    (observer: Observer<any>) => {
+                        observer.next({
+                               'success': 'true',
+                               'payload': {
+                                    'redirect': 'http://google.com/q#=whatever',
+                                },
+                               'cursor': null
+                        });
+                        observer.complete();
+                    }
+                );
+            });
+            spyOn(ga, 'event');
+            component.submit('whatever');
+            expect(ga.event).toHaveBeenCalledWith('Search', 'submit', 'clicking submit button');
+            component.onPressEnter({'keyCode' : 13}, 'whatever');
+            expect(ga.event).toHaveBeenCalledWith('Search', 'submit', 'pressing enter');
+        })
+    );
+
+    it('should record the GA event for source',
+        inject([SearchComponent, QueryService, GoogleAnalyticsService], (component: SearchComponent,
+                                                                         querySrv: MockQueryService,
+                                                                         ga: MockGoogleAnalyticsService
+        ) => {
+            spyOn(querySrv, 'doQuery').and.callFake(() => {
+                return Observable.create(
+                    (observer: Observer<any>) => {
+                        observer.next({
+                               'success': 'true',
+                               'payload': {
+                                    'redirect': 'http://google.com/q#=whatever',
+                                },
+                               'cursor': null
+                        });
+                        observer.complete();
+                    }
+                );
+            });
+            spyOn(ga, 'event');
+            component.doSearch('whatever');
+            expect(ga.event).toHaveBeenCalledWith('Search', 'source', 'site-search');
+            component.recordOmniSearch('http://localhost:8080/?q=hello');
+            expect(ga.event).toHaveBeenCalledWith('Search', 'source', 'omnibox');
+        })
+    );
 });

default/src/app/search/search.component.ts

@@ -2,6 +2,7 @@
 import { Component } from '@angular/core';
 import { QueryService } from '../query/index';
 import {AuthService} from '../auth/auth.service';
+import { GoogleAnalyticsService } from '../shared/google.analytics.service';
 
 @Component({
     selector: 'search',
@@ -12,24 +13,27 @@ import {AuthService} from '../auth/auth.service';
 export class SearchComponent {
 
     private preSearchText: any;
-    constructor(private queryService: QueryService, private auth: AuthService) {
+    constructor(private queryService: QueryService, private auth: AuthService, private ga: GoogleAnalyticsService) {
         this.preSearchText = this.populateSearch(window.location.href);
         this.recordOmniSearch(window.location.href);
     }
 
     submit(searchField: string) {
         if (searchField !== '') {
           this.doSearch(searchField)  ;
+          this.ga.event('Search', 'submit', 'clicking submit button');
         }
     }
 
     onPressEnter(e: any, searchField: any) {
         if (e.keyCode === 13 && searchField !== '') {
             this.doSearch(searchField);
+            this.ga.event('Search', 'submit', 'pressing enter');
         }
     }
 
     doSearch(searchField: any) {
+        this.ga.event('Search', 'source', 'site-search');
         this.queryService.doQuery(searchField, 'site-search').subscribe(
             data => {
                 // If when data is returned from a query with a redirect set, do the redirect.
@@ -50,6 +54,7 @@ export class SearchComponent {
         if (parameters['q'] != null) {
             this.queryService.doQuery(parameters['q'], 'omnibox').subscribe(
               response => {
+                  this.ga.event('Search', 'source', 'omnibox');
                   return;
               }, error => {
                   console.log('Error happened: ' + error);

default/src/app/shared/google.analytics.service.ts

@@ -0,0 +1,15 @@
+declare var ga: Function;
+
+export class GoogleAnalyticsService {
+
+    public event(eventCategory: string, eventAction: string, eventLabel: string) {
+        ga('send', 'event', eventCategory, eventAction, eventLabel);
+    }
+    public setUserId(userId: string) {
+        ga('set', 'userId', userId);
+    }
+    public unsetUserId() {
+        ga('unset', 'userId', null);
+    }
+
+}