feat(tracking) Add tracking events to our chrome extension page (#7967)

datahub-web-react/src/app/analytics/event.ts

@@ -64,6 +64,8 @@ export enum EventType {
     SelectAutoCompleteOption,
     SelectQuickFilterEvent,
     DeselectQuickFilterEvent,
+    EmbedProfileViewEvent,
+    EmbedProfileViewInDataHubEvent,
 }
 
 /**
@@ -495,6 +497,18 @@ export interface DeselectQuickFilterEvent extends BaseEvent {
     quickFilterValue: string;
 }
 
+export interface EmbedProfileViewEvent extends BaseEvent {
+    type: EventType.EmbedProfileViewEvent;
+    entityType: string;
+    entityUrn: string;
+}
+
+export interface EmbedProfileViewInDataHubEvent extends BaseEvent {
+    type: EventType.EmbedProfileViewInDataHubEvent;
+    entityType: string;
+    entityUrn: string;
+}
+
 /**
  * Event consisting of a union of specific event types.
  */
@@ -557,4 +571,6 @@ export type Event =
     | DeleteQueryEvent
     | SelectAutoCompleteOption
     | SelectQuickFilterEvent
-    | DeselectQuickFilterEvent;
+    | DeselectQuickFilterEvent
+    | EmbedProfileViewEvent
+    | EmbedProfileViewInDataHubEvent;

datahub-web-react/src/app/embed/EmbeddedPage.tsx

@@ -1,4 +1,4 @@
-import React from 'react';
+import React, { useEffect } from 'react';
 import { useParams } from 'react-router';
 import styled from 'styled-components/macro';
 import { useGetGrantedPrivilegesQuery } from '../../graphql/policy.generated';
@@ -9,6 +9,8 @@ import { decodeUrn } from '../entity/shared/utils';
 import CompactContext from '../shared/CompactContext';
 import { useEntityRegistry } from '../useEntityRegistry';
 import { useGetAuthenticatedUserUrn } from '../useGetAuthenticatedUser';
+import analytics from '../analytics/analytics';
+import { EventType } from '../analytics';
 
 const EmbeddedPageWrapper = styled.div`
     max-height: 100%;
@@ -29,6 +31,14 @@ export default function EmbeddedPage({ entityType }: Props) {
     const { urn: encodedUrn } = useParams<RouteParams>();
     const urn = decodeUrn(encodedUrn);
 
+    useEffect(() => {
+        analytics.event({
+            type: EventType.EmbedProfileViewEvent,
+            entityType,
+            entityUrn: urn,
+        });
+    }, [entityType, urn]);
+
     const authenticatedUserUrn = useGetAuthenticatedUserUrn();
     const { data } = useGetGrantedPrivilegesQuery({
         variables: {

datahub-web-react/src/app/entity/shared/embed/EmbeddedHeader.tsx

@@ -10,6 +10,8 @@ import { IconStyleType } from '../../Entity';
 import { useEntityData } from '../EntityContext';
 import { getDisplayedEntityType } from '../containers/profile/header/PlatformContent/PlatformContentContainer';
 import { ANTD_GRAY } from '../constants';
+import analytics from '../../../analytics/analytics';
+import { EventType } from '../../../analytics';
 
 const HeaderWrapper = styled.div`
     display: flex;
@@ -61,6 +63,14 @@ export default function EmbeddedHeader() {
     const appConfig = useAppConfig();
     const themeConfig = useTheme();
 
+    function trackClickViewInDataHub() {
+        analytics.event({
+            type: EventType.EmbedProfileViewInDataHubEvent,
+            entityType,
+            entityUrn: entityData?.urn || '',
+        });
+    }
+
     const typeIcon = entityRegistry.getIcon(entityType, 12, IconStyleType.ACCENT, ANTD_GRAY[8]);
     const displayedEntityType = getDisplayedEntityType(entityData, entityRegistry, entityType);
     const entityName = entityRegistry.getDisplayName(entityType, entityData);
@@ -86,6 +96,7 @@ export default function EmbeddedHeader() {
                         href={`${window.location.origin}/${entityTypePathName}/${entityData?.urn}`}
                         target="_blank"
                         rel="noreferrer noopener"
+                        onClick={trackClickViewInDataHub}
                     >
                         view in DataHub <ArrowRightOutlined />
                     </StyledLink>

metadata-io/src/main/java/com/linkedin/metadata/datahubusage/DataHubUsageEventType.java

@@ -63,7 +63,9 @@ public enum DataHubUsageEventType {
   UPDATE_QUERY_EVENT("UpdateQueryEvent"),
   SELECT_AUTO_COMPLETE_OPTION("SelectAutoCompleteOption"),
   SELECT_QUICK_FILTER_EVENT("SelectQuickFilterEvent"),
-  DESELECT_QUICK_FILTER_EVENT("DeselectQuickFilterEvent");
+  DESELECT_QUICK_FILTER_EVENT("DeselectQuickFilterEvent"),
+  EMBED_PROFILE_VIEW_EVENT("EmbedProfileViewEvent"),
+  EMBED_PROFILE_VIEW_IN_DATAHUB_EVENT("EmbedProfileViewInDataHubEvent");
 
   private final String type;