Skip to content

Commit 78ebd4e

Browse files
trungvosetrungvose
committed
Replace index.prod.html and set up google analytics
1 parent 0c762ac commit 78ebd4e

File tree

9 files changed

+152
-17
lines changed

9 files changed

+152
-17
lines changed

‎angular.json‎

Lines changed: 4 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -62,6 +62,10 @@
6262
"with": "src/environments/environment.prod.ts"
6363
}
6464
],
65+
"index": {
66+
"input": "src/index.prod.html",
67+
"output": "index.html"
68+
},
6569
"optimization": true,
6670
"outputHashing": "all",
6771
"sourceMap": false,

‎src/app/app.module.ts‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -43,7 +43,7 @@ import { TwitterButtonComponent } from './components/twitter-button/twitter-butt
4343
GithubComponent,
4444
TwitterButtonComponent,
4545
],
46-
imports: [BrowserModule, environment.production ? [] : AkitaNgDevtools.forRoot()],
46+
imports: [BrowserModule, AkitaNgDevtools.forRoot()],
4747
providers: [],
4848
bootstrap: [AppComponent],
4949
})

‎src/app/components/github/github.component.html‎

Lines changed: 4 additions & 2 deletions
Original file line numberDiff line numberDiff line change
@@ -8,12 +8,14 @@
88
</div>
99
<div class="tweet-button top"
1010
*ngIf="max$ | async as maxPoint">
11-
<t-twitter-button [tweetUrl]="getTweetMaxScoreShareUrl(maxPoint)">
11+
<t-twitter-button [tweetUrl]="getTweetMaxScoreShareUrl(maxPoint)"
12+
(click)="sendTwitterShareMaxScoreEvent()">
1213
Share Your Score - {{ maxPoint }}
1314
</t-twitter-button>
1415
</div>
1516
<div class="tweet-button">
16-
<t-twitter-button [tweetUrl]="tweetAngularTetrisUrl">
17+
<t-twitter-button [tweetUrl]="tweetAngularTetrisUrl"
18+
(click)="sendTwitterShareEvent()">
1719
Tweet
1820
</t-twitter-button>
1921
</div>

‎src/app/components/github/github.component.scss‎

Lines changed: 1 addition & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -44,7 +44,7 @@
4444
.tweet-button {
4545
cursor: pointer;
4646
margin-top: 5px;
47-
margin-bottom: 5px;
47+
margin-bottom: 7px;
4848

4949
&.top {
5050
margin-top: 15px;

‎src/app/components/github/github.component.ts‎

Lines changed: 10 additions & 1 deletion
Original file line numberDiff line numberDiff line change
@@ -1,6 +1,7 @@
11
import { Component, OnInit } from '@angular/core';
22
import { TetrisQuery } from '@trungk18/state/tetris/tetris.query';
33
import { Observable } from 'rxjs';
4+
import { GoogleAnalyticsService } from '@trungk18/services/google-analytics.service';
45
const HASHTAG = 'angular,angulartetris,akita,typescript';
56

67
@Component({
@@ -12,7 +13,7 @@ export class GithubComponent implements OnInit {
1213
max$: Observable<number>;
1314
tweetAngularTetrisUrl = `https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=Awesome%20Tetris%20game%20built%20with%20Angular%2010%20and%20Akita%2C%20can%20you%20get%20999999%20points%3F&hashtags=${HASHTAG}`;
1415

15-
constructor(private _query: TetrisQuery) {}
16+
constructor(private _query: TetrisQuery, private _googleAnalytics: GoogleAnalyticsService) {}
1617

1718
ngOnInit(): void {
1819
this.max$ = this._query.max$;
@@ -24,4 +25,12 @@ export class GithubComponent implements OnInit {
2425
);
2526
return `https://twitter.com/intent/tweet?url=https%3A%2F%2Fgithub.com%2Ftrungk18%2Fangular-tetris&text=${text}&hashtags=${HASHTAG}`;
2627
}
28+
29+
sendTwitterShareMaxScoreEvent() {
30+
this._googleAnalytics.sendEvent('Share Twitter High Score', 'button');
31+
}
32+
33+
sendTwitterShareEvent() {
34+
this._googleAnalytics.sendEvent('Share Twitter', 'button');
35+
}
2736
}

‎src/app/services/google-analytics.service.ts‎

Lines changed: 33 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,33 @@
1+
import { Injectable } from '@angular/core';
2+
declare var gtag: any;
3+
const GOOGLE_ANALYTICS_ID = 'UA-80363801-4';
4+
@Injectable({
5+
providedIn: 'root'
6+
})
7+
export class GoogleAnalyticsService {
8+
constructor() {
9+
}
10+
11+
public sendEvent(
12+
eventName: string,
13+
eventCategory: string,
14+
eventLabel: string = null,
15+
eventValue: number = null
16+
) {
17+
if (!gtag) {
18+
return;
19+
}
20+
gtag('event', eventName, {
21+
'event_category': eventCategory,
22+
'event_label': eventLabel,
23+
'value': eventValue
24+
});
25+
}
26+
27+
public sendPageView(url: string) {
28+
if (!gtag) {
29+
return;
30+
}
31+
gtag('config', GOOGLE_ANALYTICS_ID, { page_path: url });
32+
}
33+
}

‎src/assets/favicon.png‎

17.6 KB
Loading

‎src/index.html‎

Lines changed: 43 additions & 12 deletions
Original file line numberDiff line numberDiff line change
@@ -1,18 +1,49 @@
11
<!doctype html>
22
<html lang="en">
3+
<!--
4+
Project: Angular Tetris
5+
Author: Trung Vo ([email protected])
6+
Homepage: https://github.com/trungk18/angular-tetris
7+
-----
8+
Last Modified: Thursday, 23rd July 2020 8:22:33 am
9+
Modified By: Trung Vo ([email protected]>)
10+
-----
11+
Copyright 2020 Trung Vo
12+
-->
13+
<head>
14+
<meta charset="utf-8">
15+
<title>Angular Tetris built with Akita</title>
16+
<base href="/">
17+
<script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
18+
<!-- Primary Meta Tags -->
19+
<title>Angular Tetris built with Angular and Akita - by trungk18</title>
20+
<meta name="title" content="Angular Tetris built with Angular and Akita - by trungk18">
21+
<meta name="description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
322

4-
<head>
5-
<meta charset="utf-8">
6-
<title>Angular Tetris built with Akita</title>
7-
<base href="/">
8-
<script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
9-
<link rel="icon"
10-
type="image/x-icon"
11-
href="favicon.ico">
12-
</head>
23+
<!-- Open Graph / Facebook -->
24+
<meta property="og:type" content="website">
25+
<meta property="og:url" content="https://tetris.trungk18.com/">
26+
<meta property="og:title" content="Angular Tetris built with Angular and Akita - by trungk18">
27+
<meta property="og:description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
28+
<meta property="og:image" content="assets/img/tech-stack.png">
1329

14-
<body>
15-
<app-root></app-root>
16-
</body>
30+
<!-- Twitter -->
31+
<meta property="twitter:card" content="summary_large_image">
32+
<meta property="twitter:url" content="https://tetris.trungk18.com/">
33+
<meta property="twitter:title" content="Angular Tetris built with Angular and Akita - by trungk18">
34+
<meta property="twitter:description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
35+
<meta property="twitter:image" content="assets/img/tech-stack.png">
36+
37+
<link rel="image_src" href="assets/favicon.png" type="image/png">
38+
<link rel="shortcut icon" href="assets/favicon.png" type="image/png">
39+
<link rel="icon" href="assets/favicon.png" type="image/png">
40+
</head>
41+
42+
<body>
43+
<app-root></app-root>
44+
<script>
45+
var gtag;
46+
</script>
47+
</body>
1748

1849
</html>

‎src/index.prod.html‎

Lines changed: 56 additions & 0 deletions
Original file line numberDiff line numberDiff line change
@@ -0,0 +1,56 @@
1+
<!doctype html>
2+
<html lang="en">
3+
<!--
4+
Project: Angular Tetris
5+
Author: Trung Vo ([email protected])
6+
Homepage: https://github.com/trungk18/angular-tetris
7+
-----
8+
Last Modified: Thursday, 23rd July 2020 8:22:33 am
9+
Modified By: Trung Vo ([email protected]>)
10+
-----
11+
Copyright 2020 Trung Vo
12+
-->
13+
<head>
14+
<meta charset="utf-8">
15+
<title>Angular Tetris built with Akita</title>
16+
<base href="/">
17+
<script>(function () { var w = parseInt(window.screen.width), s = w / 640, u = navigator.userAgent.toLowerCase(), m = '<meta name="viewport" content="width=640,'; if (/android (\d+\.\d+)/.test(u)) { if (parseFloat(RegExp.$1) > 2.3) m += 'minimum-scale=' + s + ',maximum-scale=' + s + ','; } else { m += 'user-scalable=no,'; } m += 'target-densitydpi=device-dpi">'; document.write(m); }());</script>
18+
<!-- Primary Meta Tags -->
19+
<title>Angular Tetris built with Angular and Akita - by trungk18</title>
20+
<meta name="title" content="Angular Tetris built with Angular and Akita - by trungk18">
21+
<meta name="description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
22+
23+
<!-- Open Graph / Facebook -->
24+
<meta property="og:type" content="website">
25+
<meta property="og:url" content="https://tetris.trungk18.com/">
26+
<meta property="og:title" content="Angular Tetris built with Angular and Akita - by trungk18">
27+
<meta property="og:description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
28+
<meta property="og:image" content="assets/img/tech-stack.png">
29+
30+
<!-- Twitter -->
31+
<meta property="twitter:card" content="summary_large_image">
32+
<meta property="twitter:url" content="https://tetris.trungk18.com/">
33+
<meta property="twitter:title" content="Angular Tetris built with Angular and Akita - by trungk18">
34+
<meta property="twitter:description" content="A childhood memory Tetris game built with Angular 10 and Akita.">
35+
<meta property="twitter:image" content="assets/img/tech-stack.png">
36+
37+
<link rel="image_src" href="assets/favicon.png" type="image/png">
38+
<link rel="shortcut icon" href="assets/favicon.png" type="image/png">
39+
<link rel="icon" href="assets/favicon.png" type="image/png">
40+
</head>
41+
42+
<body>
43+
<app-root></app-root>
44+
45+
<!-- Global site tag (gtag.js) - Google Analytics -->
46+
<script async src="https://www.googletagmanager.com/gtag/js?id=UA-80363801-6"></script>
47+
<script>
48+
window.dataLayer = window.dataLayer || [];
49+
function gtag(){dataLayer.push(arguments);}
50+
gtag('js', new Date());
51+
52+
gtag('config', 'UA-80363801-6');
53+
</script>
54+
</body>
55+
56+
</html>

0 commit comments

Comments
 (0)