JakeHillion/storj
1
0
Fork 0
Code Issues Pull Requests Packages Projects Releases Wiki Activity

web/satellite: Add new user events to segment for link clicks

Browse Source 
We'd like to have a better understading of what pages users are clicking on the most

Change-Id: Ib3983cd250a95106acb162c2284fc1d11f2a3152
This commit is contained in:
Malcolm Bouzi 2021-11-10 10:37:29 -05:00
parent 60d03b9e42
commit db0bd38d95
3 changed files with 44 additions and 0 deletions
Show Stats Download Patch File Download Diff File Expand all files Collapse all files

13
web/satellite/src/components/navigation/NavigationArea.vue
View File

@ -10,6 +10,7 @@
:aria-label="navItem.name"
class="navigation-area__item-container"
:to="navItem.path"
@click.native="trackClickEvent(navItem.name)"
>
<div class="navigation-area__item-container__link">
<component :is="navItem.icon" class="navigation-area__item-container__link__icon" />
@ -37,9 +38,11 @@ import ResourcesSelection from '@/components/header/resourcesDropdown/ResourcesS
import SettingsSelection from '@/components/header/settingsDropdown/SettingsSelection.vue';
import TeamIcon from '@/../static/images/navigation/team.svg';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
import { MetaUtils } from '@/utils/meta';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
// @vue/component
@Component({
@ -57,6 +60,9 @@ import { MetaUtils } from '@/utils/meta';
export default class NavigationArea extends Vue {
public navigation: NavigationLink[] = [];
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/**
* Lifecycle hook before initial render.
* Sets navigation side bar list.
@ -88,6 +94,13 @@ export default class NavigationArea extends Vue {
return this.isOnboardingTour || this.isCreateProjectPage;
}
/**
* Sends new path click event to segment.
*/
public trackClickEvent(name: string): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, name);
}
/**
* Indicates if current route is create project page.
*/

26
web/satellite/src/components/navigation/newNavigationStructure/NewNavigationArea.vue
View File

@ -17,6 +17,7 @@
:aria-label="navItem.name"
class="navigation-area__container__wrap__item-container"
:to="navItem.path"
@click.native="trackClickEvent(navItem.name)"
>
<div class="navigation-area__container__wrap__item-container__left">
<component :is="navItem.icon" class="navigation-area__container__wrap__item-container__left__image" />
@ -47,6 +48,7 @@
href="https://docs.storj.io/"
target="_blank"
rel="noopener noreferrer"
@click.prevent="trackExternalLinkClickEvent('https://docs.storj.io/')"
>
<DocsIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
@ -60,6 +62,7 @@
href="https://forum.storj.io/"
target="_blank"
rel="noopener noreferrer"
@click.prevent="trackExternalLinkClickEvent('https://forum.storj.io/')"
>
<ForumIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
@ -73,6 +76,7 @@
href="https://supportdcs.storj.io/hc/en-us"
target="_blank"
rel="noopener noreferrer"
@click.prevent="trackExternalLinkClickEvent('https://supportdcs.storj.io/hc/en-us')"
>
<SupportIcon class="dropdown-item__icon" />
<div class="dropdown-item__text">
@ -146,9 +150,11 @@ import NewProjectSelection from '@/components/navigation/newNavigationStructure/
import GuidesDropdown from '@/components/navigation/newNavigationStructure/GuidesDropdown.vue';
import AccountArea from '@/components/navigation/newNavigationStructure/AccountArea.vue';
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { NavigationLink } from '@/types/navigation';
import { APP_STATE_ACTIONS } from "@/utils/constants/actionNames";
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { APP_STATE_MUTATIONS } from "@/store/mutationConstants";
import LogoIcon from '@/../static/images/logo.svg';
@ -196,6 +202,7 @@ import UploadInWebIcon from '@/../static/images/navigation/uploadInWeb.svg';
})
export default class NewNavigationArea extends Vue {
private readonly TWENTY_PIXELS = 20;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public resourcesDropdownYPos = 0;
public resourcesDropdownXPos = 0;
@ -237,6 +244,7 @@ export default class NewNavigationArea extends Vue {
* Redirects to create project screen.
*/
public navigateToCreateAG(): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "Create an Access Grant");
this.closeDropdowns();
this.$router.push(RouteConfig.AccessGrants.with(RouteConfig.CreateAccessGrant).path).catch(() => {return;});
}
@ -245,6 +253,7 @@ export default class NewNavigationArea extends Vue {
* Redirects to objects screen.
*/
public navigateToBuckets(): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "Buckets");
this.closeDropdowns();
this.$router.push(RouteConfig.Buckets.path).catch(() => {return;});
}
@ -253,6 +262,7 @@ export default class NewNavigationArea extends Vue {
* Redirects to onboarding CLI flow screen.
*/
public navigateToCLIFlow(): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "Upload using CLI");
this.closeDropdowns();
this.$store.commit(APP_STATE_MUTATIONS.SET_ONB_AG_NAME_STEP_BACK_ROUTE, this.$route.path);
this.$router.push({name: RouteConfig.AGName.name});
@ -262,6 +272,7 @@ export default class NewNavigationArea extends Vue {
* Redirects to create access grant screen.
*/
public navigateToNewProject(): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "New Project");
this.closeDropdowns();
this.$router.push(RouteConfig.CreateProject.path);
}
@ -345,6 +356,21 @@ export default class NewNavigationArea extends Vue {
public get isQuickStartDropdownShown(): boolean {
return this.$store.state.appStateModule.appState.isQuickStartDropdownShown;
}
/**
* Sends external link click event to segment and opens link.
*/
public trackExternalLinkClickEvent(link: string): void {
this.analytics.linkEventTriggered(AnalyticsEvent.EXTERNAL_LINK_CLICKED, link);
window.open(link)
}
/**
* Sends new path click event to segment.
*/
public trackClickEvent(name: string): void {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, name);
}
}
</script>

5
web/satellite/src/components/navigation/newNavigationStructure/NewProjectSelection.vue
View File

@ -54,9 +54,11 @@ import { Component, Vue } from 'vue-property-decorator';
import VLoader from "@/components/common/VLoader.vue";
import { AnalyticsHttpApi } from '@/api/analytics';
import { RouteConfig } from '@/router';
import { APP_STATE_ACTIONS, PM_ACTIONS } from '@/utils/constants/actionNames';
import { PROJECTS_ACTIONS } from "@/store/modules/projects";
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
import { LocalData } from "@/utils/localData";
import { OBJECTS_ACTIONS } from "@/store/modules/objects";
import { PAYMENTS_ACTIONS } from "@/store/modules/payments";
@ -85,6 +87,7 @@ export default class NewProjectSelection extends Vue {
private FIRST_PAGE = 1;
private dropdownYPos = 0;
private dropdownXPos = 0;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public isLoading = false;
@ -208,6 +211,7 @@ export default class NewProjectSelection extends Vue {
*/
public onProjectsLinkClick(): void {
if (this.$route.name !== RouteConfig.ProjectsList.name) {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "Manage Projects");
this.$router.push(RouteConfig.ProjectsList.path);
}
@ -219,6 +223,7 @@ export default class NewProjectSelection extends Vue {
*/
public onCreateLinkClick(): void {
if (this.$route.name !== RouteConfig.CreateProject.name) {
this.analytics.linkEventTriggered(AnalyticsEvent.PATH_SELECTED, "Create New Project");
this.$router.push(RouteConfig.CreateProject.path);
}