Track download modal clicks (#117)

* Update dependencies

* Added GA tags for Download modal

* Button cleanup on Getting Started

Also prefix `ga` with `window.`

* Minor changes

* Split tracking names

* Add download feedback modal

Similiar to the one shown on the index page

* Fixed indentation level for "downloadDev()"

package.json

@@ -12,28 +12,28 @@
 	},
 	"private": true,
 	"devDependencies": {
-		"@vuepress/plugin-back-to-top": "^1.2.0",
+		"@vuepress/plugin-back-to-top": "^1.3.1",
-		"@vuepress/plugin-google-analytics": "^1.2.0",
+		"@vuepress/plugin-google-analytics": "^1.3.1",
 		"eslint": "^6.8.0",
 		"eslint-config-airbnb": "^18.0.1",
-		"eslint-config-prettier": "^6.9.0",
+		"eslint-config-prettier": "^6.10.0",
 		"eslint-config-vuepress": "^2.1.0",
 		"eslint-plugin-prettier": "^3.1.2",
-		"node-sass": "^4.13.0",
+		"node-sass": "^4.13.1",
 		"prettier": "^1.19.1",
-		"sass-loader": "^8.0.0",
+		"sass-loader": "^8.0.2",
 		"vue-agile": "^1.0.11",
-		"vuepress": "^1.2.0",
+		"vuepress": "^1.3.1",
 		"vuepress-plugin-clean-urls": "^1.1.1",
 		"vuepress-plugin-container": "^2.1.2"
 	},
 	"dependencies": {
-		"@mdi/font": "^4.7.95",
+		"@mdi/font": "^4.9.95",
-		"axios": "^0.19.1",
+		"axios": "^0.19.2",
 		"iso-639-1": "^2.1.0",
 		"lodash.groupby": "^4.6.0",
 		"lodash.sortby": "^4.7.0",
 		"material-design-icons": "^3.0.1",
-		"vue-sweetalert2": "^3.0.1"
+		"vue-sweetalert2": "^3.0.3"
 	}
 }

src/.vuepress/components/DownloadButtons.vue

@@ -1,103 +1,14 @@
 <template>
-	<ul class="download-list">
+	<div class="downloadContainer">
-		<li>
+		<button class="downloadStableButton" @click="downloadStable">
-			<a
+			Stable
-				class="download-link"
+		</button>
-				rel="noopener noreferrer"
+		<button class="downloadDevButton" @click="downloadDev">
-				:href="
+			Dev
-					browserDownloadUrl ||
+		</button>
-						'https://github.com/inorichi/tachiyomi/releases/latest'
+	</div>
-				"
-				:title="tagName"
-				download
-			>
-				<div class="download-button stable">
-					<span class="download-area">
-						<MaterialIcon
-							name="download-cloud_download download-icons"
-							icon-name="cloud_download"
-						/>
-						<span class="download-text-stable download-text"
-							>Stable release</span
-						>
-					</span>
-				</div>
-			</a>
-		</li>
-		<li>
-			<a class="download-link" href="http://tachiyomi.kanade.eu/latest">
-				<div class="download-button dev">
-					<div class="download-area">
-						<MaterialIcon
-							name="download-bug_report download-icons"
-							icon-name="bug_report"
-						/>
-						<span class="download-text-dev download-text"
-							>Dev release</span
-						>
-					</div>
-				</div>
-			</a>
-		</li>
-	</ul>
 </template>
 
-<style scoped lang="stylus">
-*
-	font-family $buttonFontFamily
-
-ul
-	margin 0.625em 0 0
-	padding 0
-	text-align center
-	user-select none
-	width 100%
-
-li
-	display inline-block
-	margin 0.3125em 0.625em
-
-a.download-link
-	&:hover
-		text-decoration none
-	.download-button
-		align-items center
-		background-color $accentColor
-		border-radius $buttonBorderRadius
-		cursor pointer
-		display flex
-		height 3.75em
-		justify-content center
-		padding 0 1em
-		width 11.25em
-		&.stable
-			background-color $accentColor
-			&:hover
-				filter brightness(110%)
-		&.dev
-			background-color $accentColorSecondary
-			&:hover
-				filter brightness(110%)
-		.download-area
-			align-items center
-			color #ffffff
-			display flex
-			font-size 1.125em
-			.download-icons
-				color #ffffff
-				font-size 0.875em
-				max-width 2em
-			.download-cloud_download
-				margin-left 0.2em
-				margin-right 0.5em
-			.download-bug_report
-				margin-right 0.25em
-			.download-text-stable
-				margin-right 0.375em
-			.download-text-dev
-				margin-right 0.05em
-</style>
-
 <script>
 import axios from "axios";
 
@@ -119,6 +30,84 @@ export default {
 		// Set the values.
 		this.$data.tagName = data.tag_name;
 		this.$data.browserDownloadUrl = apkAsset.browser_download_url;
+	},
+
+	methods: {
+		downloadStable() {
+			this.$swal({
+				title: "Downloading",
+				text: "Stable version is being downloaded.",
+				icon: "success",
+				focusConfirm: false,
+				focusCancel: false,
+				timer: 5000,
+				timerProgressBar: true,
+				customClass: {
+					confirmButton: "download-confirm-button",
+					container: "download-container"
+				},
+				showClass: {
+					popup: "animated pulse faster"
+				},
+				hideClass: {
+					popup: "animated zoomOut faster"
+				}
+			});
+			window.location.assign(this.$data.browserDownloadUrl || RELEASE_URL);
+			window.ga("send", "event", "Button", "Click", "Stable download - Getting Started");
+		},
+		downloadDev() {
+			this.$swal({
+				title: "Downloading",
+				text: "Dev version is being downloaded.",
+				icon: "success",
+				focusConfirm: false,
+				focusCancel: false,
+				timer: 5000,
+				timerProgressBar: true,
+				customClass: {
+					confirmButton: "download-confirm-button",
+					container: "download-container"
+				},
+				showClass: {
+					popup: "animated pulse faster"
+				},
+				hideClass: {
+					popup: "animated zoomOut faster"
+				}
+			});
+			window.location.assign("http://tachiyomi.kanade.eu/latest");
+			window.ga("send", "event", "Button", "Click", "Dev download - Getting Started");
+		}
 	}
 };
 </script>
+
+<style lang="stylus">
+.downloadContainer
+	user-select none
+	text-align center
+	margin 0.3125rem
+	.downloadStableButton
+	.downloadDevButton
+		border-style none
+		padding 0.625 2em
+		margin 0.3125rem
+		border-radius $buttonBorderRadius
+		font-family $buttonFontFamily
+		font-size 1.125em
+		color white
+		height 3rem
+		width 8.5rem
+		&:focus
+			outline none
+			outline-style solid
+		&:hover
+			cursor pointer
+			text-decoration none !important
+			background-image linear-gradient(rgba(0, 0, 0, 0.1), rgba(0, 0, 0, 0.1))
+	.downloadStableButton
+		background-color $accentColor
+	.downloadDevButton
+		background-color $accentColorSecondary
+</style>

src/.vuepress/theme/components/Home.vue

@@ -133,6 +133,13 @@ export default {
 						this.$data.browserDownloadUrl ||
 							"https://github.com/inorichi/tachiyomi/releases/latest"
 					);
+					window.ga(
+						"send",
+						"event",
+						"Button",
+						"Click",
+						"Stable download"
+					);
 				} else if (result.dismiss === "cancel") {
 					this.$swal({
 						title: "Downloading",
@@ -154,6 +161,13 @@ export default {
 						}
 					});
 					window.location.assign("http://tachiyomi.kanade.eu/latest");
+					window.ga(
+						"send",
+						"event",
+						"Button",
+						"Click",
+						"Dev download"
+					);
 				}
 			});
 		}

src/help/guides/getting-started.md

@@ -9,17 +9,14 @@ lang: en-US
 
 <DownloadButtons/>
 
-You can download the latest version of `Tachiyomi` from the [GitHub releases](https://github.com/inorichi/tachiyomi/releases/latest).
+You can download the latest version of **Tachiyomi** from any of the above buttons.
 
-<Badge text="tachiyomi-vX.Y.Z.apk"/>
+If you want to try new features before they get to the stable release, you can download the dev version.
 
-
+Open and install the `.apk` file you just downloaded.
-If you want to try new features before they get to the stable release, you can download the dev version [here](http://tachiyomi.kanade.eu/latest).
-
-Open and install the `.apk` file you just downloaded from GitHub.
 
 <figure class="centered">
-	<img height="145" intrinsicsize="1000x500" width="300"
+	<img height="128"
 	  :src="$withBase('/assets/media/installprompt.png')">
 </figure>