satellite/analytics: Re-added user click events in Access Management flow (#5151)

* Re-added user click events in Access Management flow
This commit is contained in:
prerna-parashar 2022-09-06 09:55:33 -07:00 committed by GitHub
parent 381c1e1257
commit 54eaf79b5f
No known key found for this signature in database
GPG Key ID: 4AEE18F83AFDEB23
5 changed files with 43 additions and 11 deletions

View File

@ -59,7 +59,7 @@ const (
eventCopyToClipboardClicked = "Copy to Clipboard Clicked"
eventCreateAccessGrantClicked = "Create Access Grant Clicked"
eventCreateS3CredentialsClicked = "Create S3 Credentials Clicked"
eventKeysForCLIClicked = "Keys for CLI Clicked"
eventKeysForCLIClicked = "Create Keys For CLI Clicked"
)
var (

View File

@ -242,21 +242,18 @@ export default class CreateAccessModal extends Vue {
try {
await this.$store.dispatch(ACCESS_GRANTS_ACTIONS.GET_GATEWAY_CREDENTIALS, {accessGrant: this.access});
await this.$notify.success('Gateway credentials were generated successfully');
await this.analytics.eventTriggered(AnalyticsEvent.GATEWAY_CREDENTIALS_CREATED);
await this.$notify.success('Gateway credentials were generated successfully');
this.areKeysVisible = true;
} catch (error) {
await this.$notify.error(error.message);
}
} else if (this.checkedType === 'api') {
await this.analytics.eventTriggered(AnalyticsEvent.API_ACCESS_CREATED);
} else if (this.checkedType === 'access') {
await this.analytics.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED);
}
this.analytics.eventTriggered(AnalyticsEvent.CREATE_KEYS_CLICKED);
this.analytics.eventTriggered(AnalyticsEvent.ACCESS_GRANT_CREATED);
this.accessGrantStep = 'grantCreated';
}

View File

@ -40,7 +40,7 @@
@mouseover="toggleTooltipHover('access','over')"
@mouseleave="toggleTooltipHover('access','leave')"
>
<span class="tooltip-text">Keys to upload, delete, and view your project's data. <a class="tooltip-link" href="https://storj-labs.gitbook.io/dcs/concepts/access/access-grants" target="_blank" rel="noreferrer noopener">Learn More</a></span>
<span class="tooltip-text">Keys to upload, delete, and view your project's data. <a class="tooltip-link" href="https://docs.storj.io/dcs/concepts/access/access-grants" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/concepts/access/access-grants')">Learn More</a></span>
</div>
</div>
<div class="access-grant__modal-container__body-container__type__type-container">
@ -66,7 +66,7 @@
@mouseover="toggleTooltipHover('s3','over')"
@mouseleave="toggleTooltipHover('s3','leave')"
>
<span class="tooltip-text">Generates access key, secret key, and endpoint to use in your S3-supporting application. <a class="tooltip-link" href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway" target="_blank" rel="noreferrer noopener">Learn More</a></span>
<span class="tooltip-text">Generates access key, secret key, and endpoint to use in your S3-supporting application. <a class="tooltip-link" href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/api-reference/s3-compatible-gateway')">Learn More</a></span>
</div>
</div>
<div class="access-grant__modal-container__body-container__type__type-container">
@ -92,7 +92,7 @@
@mouseover="toggleTooltipHover('api','over')"
@mouseleave="toggleTooltipHover('api','leave')"
>
<span class="tooltip-text">Creates access grant to run in the command line. <a class="tooltip-link" href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token" target="_blank" rel="noreferrer noopener">Learn More</a></span>
<span class="tooltip-text">Creates access grant to run in the command line. <a class="tooltip-link" href="https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token" target="_blank" rel="noreferrer noopener" @click="trackPageVisit('https://docs.storj.io/dcs/getting-started/quickstart-uplink-cli/generate-access-grants-and-tokens/generate-a-token')">Learn More</a></span>
</div>
</div>
</div>
@ -178,7 +178,7 @@
</div> -->
</div>
<div class="access-grant__modal-container__footer-container">
<a href="https://docs.storj.io/dcs/concepts/access/access-grants/api-key" target="_blank" rel="noopener noreferrer">
<a href="https://docs.storj.io/dcs/concepts/access/access-grants/api-key" target="_blank" rel="noopener noreferrer" @click="trackPageVisit('https://docs.storj.io/dcs/concepts/access/access-grants/api-key')">
<v-button
label="Learn More"
width="150px"
@ -218,6 +218,9 @@ import DurationSelection from '@/components/accessGrants/permissions/DurationSel
import { ACCESS_GRANTS_ACTIONS } from '@/store/modules/accessGrants';
import { AccessGrant } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
type ShowPermissions = {
show: boolean,
position: string
@ -263,6 +266,8 @@ export default class CreateFormModal extends Vue {
public tooltipHover = '';
public tooltipVisibilityTimer;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
public mounted(): void {
this.showAllPermissions = {show: false, position: "up"};
}
@ -314,6 +319,7 @@ export default class CreateFormModal extends Vue {
this.propogateInfo()
this.$emit('encrypt');
}
this.analytics.eventTriggered(AnalyticsEvent.ENCRYPT_MY_ACCESS_CLICKED);
}
public toggleAllPermission(type): void {
@ -360,6 +366,13 @@ export default class CreateFormModal extends Vue {
}
}
/**
* Sends "trackPageVisit" event to segment and opens link.
*/
public trackPageVisit(link: string): void {
this.analytics.pageVisit(link);
}
}
</script>

View File

@ -168,6 +168,9 @@ import AccessKeyIcon from '@/../static/images/accessGrants/accessKeyIcon.svg';
import ThumbPrintIcon from '@/../static/images/accessGrants/thumbPrintIcon.svg';
import DownloadIcon from '../../../../static/images/common/download.svg';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
// @vue/component
@Component({
components: {
@ -190,6 +193,8 @@ export default class EncryptFormModal extends Vue {
private acknowledgementCheck = false;
public currentDate = new Date().toISOString();
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
@Watch('passphrase')
public applyPassphrase(): void {
this.$emit('apply-passphrase', this.passphrase);
@ -220,6 +225,7 @@ export default class EncryptFormModal extends Vue {
public onCopyPassphraseClick(): void {
this.$copyText(this.passphrase);
this.isPassphraseCopied = true;
this.analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
this.$notify.success(`Passphrase was copied successfully`);
}
@ -229,6 +235,7 @@ export default class EncryptFormModal extends Vue {
public downloadPassphrase(): void {
this.isPassphraseDownloaded = true;
Download.file(this.passphrase, `passphrase-${this.currentDate}.txt`)
this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
}
}
</script>

View File

@ -165,6 +165,7 @@
href="https://docs.storj.io/dcs/api-reference/s3-compatible-gateway"
target="_blank"
rel="noopener noreferrer"
@click="trackPageVisit('https://docs.storj.io/dcs/api-reference/s3-compatible-gateway')"
>
<v-button
label="Learn More"
@ -212,6 +213,9 @@ import VButton from '@/components/common/VButton.vue';
import { EdgeCredentials } from '@/types/accessGrants';
import { AnalyticsHttpApi } from '@/api/analytics';
import { AnalyticsEvent } from '@/utils/constants/analyticsEventNames';
// @vue/component
@Component({
@ -237,6 +241,8 @@ export default class GrantCreatedModal extends Vue {
private areCredentialsDownloaded = false;
private isAccessGrantCopied = false;
private readonly analytics: AnalyticsHttpApi = new AnalyticsHttpApi();
/**
* Global isLoading Variable
**/
@ -264,6 +270,7 @@ export default class GrantCreatedModal extends Vue {
public onCopyAccessGrantClick(): void {
this.$copyText(this.restrictedKey);
this.isAccessGrantCopied = true;
this.analytics.eventTriggered(AnalyticsEvent.COPY_TO_CLIPBOARD_CLICKED);
this.$notify.success(`Access Grant was copied successfully`);
}
@ -278,6 +285,7 @@ export default class GrantCreatedModal extends Vue {
}
this.areCredentialsDownloaded = true;
Download.file(credentialMap[this.checkedType], `${this.checkedType}-credentials-${this.currentDate}.txt`)
this.analytics.eventTriggered(AnalyticsEvent.DOWNLOAD_TXT_CLICKED);
}
/**
@ -286,6 +294,13 @@ export default class GrantCreatedModal extends Vue {
public learnMore(): void{
window.open("https://docs.storj.io/dcs/api-reference/s3-compatible-gateway", '_blank');
}
/**
* Sends "trackPageVisit" event to segment and opens link.
*/
public trackPageVisit(link: string): void {
this.analytics.pageVisit(link);
}
}
</script>