Skip to content
This repository was archived by the owner on Dec 18, 2024. It is now read-only.

chore: send analytics data on all navigation ends #401

Merged
merged 1 commit into from
Feb 22, 2018
Merged

chore: send analytics data on all navigation ends #401

Show file tree
Hide file tree
Changes from all commits
Commits
Show all changes
1 commit
Select commit
File filter

Filter by extension

Filter by extension
Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions src/app/app-module.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -35,6 +35,7 @@ import {
import {HttpClientModule} from '@angular/common/http';
import {ServiceWorkerModule} from '@angular/service-worker';
import {environment} from '../environments/environment';
import {GaService} from './shared/ga/ga';

@NgModule({
imports: [
Expand Down Expand Up @@ -66,6 +67,7 @@ import {environment} from '../environments/environment';
providers: [
ComponentPageTitle,
DocumentationItems,
GaService,
GuideItems,
StyleManager,
ThemeStorage,
Expand Down
4 changes: 3 additions & 1 deletion src/app/material-docs-app.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -2,6 +2,7 @@ import {Component, ViewEncapsulation} from '@angular/core';
import {Router, NavigationEnd} from '@angular/router';
import {filter} from 'rxjs/operators/filter';

import {GaService} from './shared/ga/ga';

@Component({
selector: 'material-docs-app',
Expand All @@ -11,7 +12,7 @@ import {filter} from 'rxjs/operators/filter';
})
export class MaterialDocsApp {

constructor(router: Router) {
constructor(router: Router, ga: GaService) {
let previousRoute = router.routerState.snapshot.url;

router.events
Expand All @@ -24,6 +25,7 @@ export class MaterialDocsApp {
}

previousRoute = data.urlAfterRedirects;
ga.locationChanged(data.urlAfterRedirects);
});
}
}
Expand Down
41 changes: 41 additions & 0 deletions src/app/shared/ga/ga.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -0,0 +1,41 @@
import {Injectable} from '@angular/core';

import {environment} from '../../../environments/environment';

@Injectable()
/**
* Google Analytics Service - captures app behaviors and sends them to Google Analytics (GA).
* Presupposes that GA script has been loaded from a script on the host web page.
* Associates data with a GA "property" from the environment (`gaId`).
*/
export class GaService {

private previousUrl: string;

constructor() {
this.ga('create', environment['matGaId'] , 'auto', 'mat');
this.ga('create', environment['ngGaId'] , 'auto', 'ng');
}

locationChanged(url: string) {
this.sendPage(url);
}

sendPage(url: string) {
// Won't re-send if the url hasn't changed.
if (url === this.previousUrl || !environment.production) {
return;
}
this.previousUrl = url;
this.ga('set', 'page', '/' + url);
this.ga('mat.send', 'pageview');
this.ga('ng.send', 'pageview');
}

ga(...args: any[]) {
const gaFn = (window as any)['ga'];
if (gaFn) {
gaFn(...args);
}
}
}
4 changes: 3 additions & 1 deletion src/environments/environment.prod.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
@@ -1,3 +1,5 @@
export const environment = {
production: true
matGaId: 'UA-8594346-24', // Production id
ngGaId: 'UA-8594346-15', // Production id
production: true,
};
4 changes: 3 additions & 1 deletion src/environments/environment.ts
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -4,5 +4,7 @@
// The list of which env maps to which file can be found in `angular-cli.json`.

export const environment = {
production: false
matGaId: '', // No development id for Material
ngGaId: 'UA-8594346-26', // Development id
production: false,
};
12 changes: 8 additions & 4 deletions src/index.html
View file
Open in desktop
Original file line number Diff line number Diff line change
Expand Up @@ -24,16 +24,20 @@
<body class="docs-app-background">
<material-docs-app></material-docs-app>
<script>
window.ga=window.ga||function(){(ga.q=ga.q||[]).push(arguments)};ga.l=+new Date;
ga('create', 'UA-8594346-24', 'auto');
ga('send', 'pageview');
// Note this is a customised version of the GA tracking snippet
// See the comments below for more info
(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;
~i.name.indexOf('NG_DEFER_BOOTSTRAP')|| // only load library if not running e2e tests
Copy link

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

e2e tests run on local host or other non-prod host, this causes all the GA pings to be ignored/filtered out automatically. In other words, it's typically not necessary to treat e2e tests differently.

m.parentNode.insertBefore(a,m)
})(window,document,'script','https://www.google-analytics.com/analytics.js','ga');
</script>
<script>
// This hides the address bar on mobile browsers
// https://developers.google.com/web/fundamentals/native-hardware/fullscreen/
window.addEventListener('load',function() { window.scrollTo(0, 1); });
</script>
<script async src='https://www.google-analytics.com/analytics.js'></script>
<script src="https://ajax.googleapis.com/ajax/libs/hammerjs/2.0.8/hammer.min.js"></script>
<script src="https://cdnjs.cloudflare.com/ajax/libs/web-animations/2.2.5/web-animations.min.js"></script>
</body>
Expand Down