Skip to content
New issue

Have a question about this project? Sign up for a free GitHub account to open an issue and contact its maintainers and the community.

By clicking “Sign up for GitHub”, you agree to our terms of service and privacy statement. We’ll occasionally send you account related emails.

Already on GitHub? Sign in to your account

wip: Track public collection events #2256

Draft
wants to merge 4 commits into
base: public-collections-feature
Choose a base branch
from
Draft
Show file tree
Hide file tree
Changes from all commits
Commits
File filter

Filter by extension

Filter by extension

Conversations
Failed to load comments.
Loading
Jump to
Jump to file
Failed to load files.
Loading
Diff view
Diff view
2 changes: 2 additions & 0 deletions frontend/docs/docs/deploy/customization.md
Original file line number Diff line number Diff line change
Expand Up @@ -220,4 +220,6 @@ plausible.src = "https://plausible.io/js/script.js";
plausible.defer = true;
plausible.dataset.domain = "app.browsertrix.com";
document.head.appendChild(plausible);

window.analytics = window.plausible || function () { (window.plausible.q = window.plausible.q || []).push(arguments); };
Comment on lines +223 to +224
Copy link
Member

Choose a reason for hiding this comment

The reason will be displayed to describe this comment to others. Learn more.

I don't think this is necessary: this only helps track 404 pages, and is an optional addition to Plausible's tracking script; and it also needs to follow the Plausible script itself, so it'd also need to be added to a new script tag and inserted after the main Plausible one.

```
2 changes: 2 additions & 0 deletions frontend/sample.env.local
Original file line number Diff line number Diff line change
Expand Up @@ -3,3 +3,5 @@ DOCS_URL=https://docs.browsertrix.com/
E2E_USER_EMAIL=
E2E_USER_PASSWORD=
GLITCHTIP_DSN=
EXTRA_SCRIPT_URL=
ANALYTICS_NAMESPACE=
13 changes: 13 additions & 0 deletions frontend/src/features/collections/share-collection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -25,6 +25,7 @@ import {
type Collection,
type PublicCollection,
} from "@/types/collection";
import { track, TrackEvent } from "@/utils/analytics";

enum Tab {
Link = "link",
Expand Down Expand Up @@ -113,6 +114,12 @@ export class ShareCollection extends BtrixElement {
?disabled=${!this.shareLink}
@click=${() => {
void this.clipboardController.copy(this.shareLink);

track(TrackEvent.CopyPublicCollectionLink, {
slug: this.slug,
collectionId: this.collectionId,
copiedFromPublicPage: this.navigate.isPublicPage,
});
}}
>
<sl-icon
Expand Down Expand Up @@ -188,6 +195,12 @@ export class ShareCollection extends BtrixElement {
href=${`/api/public/orgs/${this.slug}/collections/${this.collectionId}/download`}
download
?disabled=${!this.collection?.totalSize}
@click=${() => {
track(TrackEvent.DownloadPublicCollection, {
slug: this.slug,
collectionId: this.collectionId,
});
}}
>
<sl-icon name="cloud-download" slot="prefix"></sl-icon>
${msg("Download Collection")}
Expand Down
8 changes: 8 additions & 0 deletions frontend/src/pages/collections/collection.ts
Original file line number Diff line number Diff line change
Expand Up @@ -10,6 +10,7 @@ import { page } from "@/layouts/page";
import { RouteNamespace } from "@/routes";
import type { PublicCollection } from "@/types/collection";
import type { PublicOrgCollections } from "@/types/org";
import { track, TrackEvent } from "@/utils/analytics";
import { formatRwpTimestamp } from "@/utils/replay";

enum Tab {
Expand Down Expand Up @@ -71,6 +72,13 @@ export class Collection extends BtrixElement {
args: () => [this.slug, this.collectionId] as const,
});

firstUpdated() {
track(TrackEvent.ViewPublicCollection, {
slug: this.slug,
collectionId: this.collectionId,
});
}

render() {
return this.collection.render({
complete: this.renderComplete,
Expand Down
36 changes: 36 additions & 0 deletions frontend/src/utils/analytics.ts
Original file line number Diff line number Diff line change
@@ -0,0 +1,36 @@
/**
* Custom tracking for analytics.
*
* Any third-party analytics script will need to have been made
* available through the `extra.js` injected by the server.
*/

// type Track = (
// event: string,
// opts: { props?: { [key: string]: unknown } },
// ) => {};

// ANALYTICS_NAMESPACE is specified with webpack `DefinePlugin`
const analytics = window.process.env.ANALYTICS_NAMESPACE
? (window as any)[window.process.env.ANALYTICS_NAMESPACE as string]

Check warning on line 15 in frontend/src/utils/analytics.ts

View workflow job for this annotation

GitHub Actions / test

This assertion is unnecessary since it does not change the type of the expression

Check failure on line 15 in frontend/src/utils/analytics.ts

View workflow job for this annotation

GitHub Actions / setup-and-build

Unexpected any. Specify a different type

Check warning on line 15 in frontend/src/utils/analytics.ts

View workflow job for this annotation

GitHub Actions / setup-and-build

This assertion is unnecessary since it does not change the type of the expression
: null;

console.log("analytics:", analytics);

export enum TrackEvent {
ViewPublicCollection = "View Public Collection",
CopyPublicCollectionLink = "Copy Share Collection Link",
DownloadPublicCollection = "Download Public Collection",
}

export function track(event: TrackEvent, props?: { [key: string]: unknown }) {
if (!analytics) {
return;
}

try {
analytics(event, { props });
} catch (err) {
console.debug(err);
}
}
3 changes: 3 additions & 0 deletions frontend/webpack.config.js
Original file line number Diff line number Diff line change
Expand Up @@ -166,6 +166,9 @@ const main = {

new webpack.DefinePlugin({
"window.process.env.WEBSOCKET_HOST": JSON.stringify(WEBSOCKET_HOST),
"window.process.env.ANALYTICS_NAMESPACE": JSON.stringify(
process.env.ANALYTICS_NAMESPACE,
),
}),

new webpack.optimize.LimitChunkCountPlugin({
Expand Down
7 changes: 6 additions & 1 deletion frontend/webpack.dev.js
Original file line number Diff line number Diff line change
Expand Up @@ -24,6 +24,11 @@ if (!process.env.API_BASE_URL) {
const RWP_BASE_URL =
process.env.RWP_BASE_URL || "https://cdn.jsdelivr.net/npm/replaywebpage/";

// Enable injected extra.js script (e.g. for analytics)
const extraScript = process.env.EXTRA_SCRIPT_URL
? `let script = document.createElement("script"); script.src = "${process.env.EXTRA_SCRIPT_URL}"; document.head.appendChild(script);`
: "";

const devBackendUrl = new URL(process.env.API_BASE_URL);

module.exports = [
Expand Down Expand Up @@ -79,7 +84,7 @@ module.exports = [
// serve empty analytics script
server.app?.get("/extra.js", (req, res) => {
res.set("Content-Type", "application/javascript");
res.status(200).send("");
res.status(200).send(extraScript);
});

return middlewares;
Expand Down
Loading