diff --git a/frontend/package-lock.json b/frontend/package-lock.json
index 4782efe7eed6..946fa902c0dc 100644
--- a/frontend/package-lock.json
+++ b/frontend/package-lock.json
@@ -25,7 +25,7 @@
"@dnd-kit/abstract": "^0.3.2",
"@dnd-kit/helpers": "^0.3.2",
"@dnd-kit/react": "^0.3.2",
- "@flagsmith/flagsmith": "^11.0.0-internal.5",
+ "@flagsmith/flagsmith": "^11.0.0-internal.6",
"@ionic/react": "^7.5.3",
"@react-oauth/google": "^0.2.8",
"@reduxjs/toolkit": "1.9.1",
diff --git a/frontend/package.json b/frontend/package.json
index 27106b6514ee..33f3281631be 100644
--- a/frontend/package.json
+++ b/frontend/package.json
@@ -55,7 +55,7 @@
"@dnd-kit/abstract": "^0.3.2",
"@dnd-kit/helpers": "^0.3.2",
"@dnd-kit/react": "^0.3.2",
- "@flagsmith/flagsmith": "^11.0.0-internal.5",
+ "@flagsmith/flagsmith": "^11.0.0-internal.6",
"@ionic/react": "^7.5.3",
"@react-oauth/google": "^0.2.8",
"@reduxjs/toolkit": "1.9.1",
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx
index 42227eb39165..4ede1c2b5bfc 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer.tsx
@@ -1,4 +1,5 @@
-import React, { useMemo } from 'react'
+import React, { useEffect, useMemo, useRef } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
import { useGetFeatureCodeReferencesQuery } from 'common/services/useCodeReferences'
import RepoCodeReferencesSection from './components/RepoCodeReferencesSection'
import { FeatureCodeReferences } from 'common/types/responses'
@@ -34,6 +35,23 @@ const FeatureCodeReferencesContainer: React.FC<
[data],
)
+ const hasTrackedView = useRef(false)
+ useEffect(() => {
+ if (data.length > 0 && !hasTrackedView.current) {
+ hasTrackedView.current = true
+ const totalRefs = data.reduce(
+ (sum, repo) => sum + repo.code_references.length,
+ 0,
+ )
+ flagsmith.trackEvent('code_references_view', {
+ feature_id: featureId,
+ project_id: projectId,
+ repos_count: data.length,
+ total_refs_count: totalRefs,
+ })
+ }
+ }, [data, featureId, projectId])
+
if (isLoading) {
return (
@@ -59,6 +77,7 @@ const FeatureCodeReferencesContainer: React.FC<
key={codeReferencesByRepo[repo].repository_url}
repositoryName={codeReferencesByRepo[repo].repository_url}
repositoryScan={codeReferencesByRepo[repo]}
+ featureId={featureId}
/>
))}
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
index edeb324c30c0..334a16903db8 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/CodeReferenceItem.tsx
@@ -1,12 +1,17 @@
+import flagsmith from '@flagsmith/flagsmith'
import Icon from 'components/Icon'
-import { CodeReference } from 'common/types/responses'
+import { CodeReference, VCSProvider } from 'common/types/responses'
interface CodeReferenceItemProps {
codeReference: CodeReference
+ featureId: number
+ vcsProvider: VCSProvider
}
const CodeReferenceItem: React.FC = ({
codeReference,
+ featureId,
+ vcsProvider,
}) => {
return (
@@ -25,6 +30,12 @@ const CodeReferenceItem: React.FC = ({
href={codeReference.permalink}
target='_blank'
rel='noreferrer'
+ onClick={() => {
+ flagsmith.trackEvent('code_references_click_permalink', {
+ feature_id: featureId,
+ vcs_provider: vcsProvider,
+ })
+ }}
>
{codeReference.file_path}:{codeReference.line_number}
diff --git a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
index 48adc5f7c5f8..cc8018dea91a 100644
--- a/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
+++ b/frontend/web/components/feature-page/FeatureNavTab/CodeReferences/components/RepoCodeReferencesSection.tsx
@@ -1,4 +1,5 @@
import React, { useState } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
import { FeatureCodeReferences } from 'common/types/responses'
import moment from 'moment'
import CodeReferenceItem from './CodeReferenceItem'
@@ -9,9 +10,11 @@ import CodeReferenceScanIndicator from './CodeReferenceScanIndicator'
interface RepoCodeReferencesSectionProps {
repositoryScan: FeatureCodeReferences
repositoryName: string
+ featureId: number
}
const RepoCodeReferencesSection: React.FC = ({
+ featureId,
repositoryName,
repositoryScan,
}) => {
@@ -42,7 +45,16 @@ const RepoCodeReferencesSection: React.FC = ({
>
setIsOpen(!isOpen)}
+ onClick={() => {
+ if (!isOpen) {
+ flagsmith.trackEvent('code_references_expand_repo', {
+ feature_id: featureId,
+ refs_count: repositoryScan?.code_references?.length,
+ vcs_provider: repositoryScan?.vcs_provider,
+ })
+ }
+ setIsOpen(!isOpen)
+ }}
>
= ({
{repositoryScan?.code_references?.map((codeReference) => (
))}
diff --git a/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx b/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx
index e82c2d10f166..2bbb03f78058 100644
--- a/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx
+++ b/frontend/web/components/modals/create-feature/tabs/UsageTab.tsx
@@ -1,4 +1,5 @@
-import React, { FC } from 'react'
+import { FC } from 'react'
+import flagsmith from '@flagsmith/flagsmith'
import Project from 'common/project'
import FeatureAnalytics from 'components/feature-page/FeatureNavTab/FeatureAnalytics'
import FeatureCodeReferencesContainer from 'components/feature-page/FeatureNavTab/CodeReferences/FeatureCodeReferencesContainer'
@@ -45,6 +46,11 @@ const UsageTab: FC = ({
target='_blank'
href='https://docs.flagsmith.com/managing-flags/code-references'
rel='noreferrer'
+ onClick={() => {
+ flagsmith.trackEvent('code_references_click_docs', {
+ feature_id: featureId,
+ })
+ }}
>
Learn more
diff --git a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
index 19a96788b2c1..e2666ff3355a 100644
--- a/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
+++ b/frontend/web/components/navigation/navbars/ProjectNavbar.tsx
@@ -51,18 +51,18 @@ const ProjectNavbar: FC = ({ environmentId, projectId }) => {
>
Segments
- {Utils.getFlagsmithHasFeature('feature_lifecycle') && (
- }
- id='lifecycle-link'
- to={`/project/${projectId}/lifecycle`}
- isActive={(_, location) =>
- location.pathname.startsWith(`/project/${projectId}/lifecycle`)
- }
- >
- Feature Lifecycle
-
- )}
+ {Utils.getFlagsmithHasFeature('feature_lifecycle') && (
+ }
+ id='lifecycle-link'
+ to={`/project/${projectId}/lifecycle`}
+ isActive={(_, location) =>
+ location.pathname.startsWith(`/project/${projectId}/lifecycle`)
+ }
+ >
+ Feature Lifecycle
+
+ )}