mirror of
https://github.com/tachiyomiorg/website.git
synced 2024-12-21 07:31:58 +01:00
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()"
This commit is contained in:
Simon M
GitHub
parent
76e27d966d
commit
32269ed3d1
4237
package-lock.json
generated
4237
package-lock.json
generated
File diff suppressed because it is too large
Load Diff
18
package.json
18
package.json
@ -12,28 +12,28 @@
|
||||
},
|
||||
"private": true,
|
||||
"devDependencies": {
|
||||
"@vuepress/plugin-back-to-top": "^1.2.0",
|
||||
"@vuepress/plugin-google-analytics": "^1.2.0",
|
||||
"@vuepress/plugin-back-to-top": "^1.3.1",
|
||||
"@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",
|
||||
"axios": "^0.19.1",
|
||||
"@mdi/font": "^4.9.95",
|
||||
"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"
|
||||
}
|
||||
}
|
||||
|
||||
@ -1,103 +1,14 @@
|
||||
<template>
|
||||
<ul class="download-list">
|
||||
<li>
|
||||
<a
|
||||
class="download-link"
|
||||
rel="noopener noreferrer"
|
||||
:href="
|
||||
browserDownloadUrl ||
|
||||
'https://github.com/inorichi/tachiyomi/releases/latest'
|
||||
"
|
||||
: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>
|
||||
<div class="downloadContainer">
|
||||
<button class="downloadStableButton" @click="downloadStable">
|
||||
Stable
|
||||
</button>
|
||||
<button class="downloadDevButton" @click="downloadDev">
|
||||
Dev
|
||||
</button>
|
||||
</div>
|
||||
</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>
|
||||
|
||||
@ -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"
|
||||
);
|
||||
}
|
||||
});
|
||||
}
|
||||
|
||||
@ -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.
|
||||
|
||||
|
||||
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.
|
||||
Open and install the `.apk` file you just downloaded.
|
||||
|
||||
<figure class="centered">
|
||||
<img height="145" intrinsicsize="1000x500" width="300"
|
||||
<img height="128"
|
||||
:src="$withBase('/assets/media/installprompt.png')">
|
||||
</figure>
|
||||
|
||||
|
||||
Loading…
Reference in New Issue
Block a user