Website: Added More event triggers to website

[OchiengPaul442]

Summary of Changes (What does this PR do?)

• Added more event triggers with proper labels

Status of maturity (all need to be checked before merging):

• I've tested this locally
• I consider this code done
• This change ready to hit production in its current state

How should this be manually tested?

• Please include the steps to be done inorder to setup and test this PR.

What are the relevant tickets?

• Closes #
• Jira_card_number (If exists)

Screenshots (optional)

Summary by CodeRabbit

• New Features
  • Enhanced event tracking has been integrated across multiple user interactions. Key actions—such as form submissions, newsletter sign-ups, navigation button clicks, and video plays—now trigger analytics events to capture engagement insights.
  • The default analytics initialization has been updated for more consistent performance when specific settings are not provided, supporting data-driven improvements without altering the end-user experience.

[coderabbitai]

📝 Walkthrough

Walkthrough

The pull request updates the default behavior for the Google Analytics measurement ID in the RootLayout component by switching the fallback from a hard-coded ID to an empty string. It also integrates event tracking across multiple UI components by adding calls to the trackEvent function. Changes span various interactions including button clicks, form submissions, dialog interactions, and video play events, ensuring that user actions are logged through the Google Analytics integration.

Changes

File(s)	Change Summary
src/website2/src/app/layout.tsx	Changed default for GA_MEASUREMENT_ID from 'G-79ZVCLEDSG' to an empty string.
src/website2/src/components/...	Added trackEvent calls: • EngagementDialog: Tracks form submissions. • Navbar: Tracks "Get involved" and "Explore data" button clicks. • NewsLetter: Tracks newsletter subscription events. • CountrySelectorDialog: Tracks country selector button clicks. • HomePlayerSection: Tracks video play actions.

Sequence Diagram(s)

sequenceDiagram
    participant User
    participant UIComponent
    participant Analytics
    participant GA_Server

    User->>UIComponent: Interact (click, submit, play)
    UIComponent->>Analytics: Call trackEvent(eventParams)
    Analytics->>GA_Server: Send event data
    GA_Server-->>Analytics: Ack/note event logged

Loading

Possibly related PRs

• Website: Script Tag change For GA script #2505: Modifies the GA_MEASUREMENT_ID in the RootLayout, directly relating to the changes here.
• Website: Integrate Google Analytics and dynamic sitemap.xml setup #2494: Also updates the GA_MEASUREMENT_ID in the RootLayout with Google Analytics integration.
• Website: Enhancements to the GA implementations #2500: Alters the RootLayout structure while modifying the GA_MEASUREMENT_ID, indicating a direct code-level relationship.

Suggested reviewers

• Baalmart
• Codebmk
• BenjaminSsempala

Poem

In lines of code where numbers flow,
Analytics whisper, metrics glow.
Each click and submit, a story told,
With trackEvent calls so crisp and bold.
A dance of data in a neat display,
Our code evolves in a cool, precise way.

Warning

Review ran into problems

🔥 Problems

Errors were encountered while retrieving linked issues.

Errors (1)

• JIRA integration encountered authorization issues. Please disconnect and reconnect the integration in the CodeRabbit UI.

---

📜 Recent review details

Configuration used: CodeRabbit UI
Review profile: CHILL
Plan: Pro

📥 Commits

Reviewing files that changed from the base of the PR and between e4c8c8a and 2340198.

📒 Files selected for processing (6)

• src/website2/src/app/layout.tsx (1 hunks)
• src/website2/src/components/dialogs/EngagementDialog.tsx (2 hunks)
• src/website2/src/components/layouts/Navbar.tsx (1 hunks)
• src/website2/src/components/layouts/NewsLetter.tsx (2 hunks)
• src/website2/src/components/sections/footer/CountrySelectorDialog.tsx (2 hunks)
• src/website2/src/views/home/HomePlayerSection.tsx (1 hunks)

⏰ Context from checks skipped due to timeout of 90000ms (1)

• GitHub Check: build-push-website2-deploy-preview

🔇 Additional comments (7)

src/website2/src/components/layouts/NewsLetter.tsx (1)

8-8: Event tracking properly implemented for newsletter subscriptions.

The code now tracks successful newsletter subscriptions through Google Analytics, which is a valuable addition for monitoring user engagement. The implementation correctly tracks the event after confirming a successful API response.

Also applies to: 37-41

src/website2/src/components/sections/footer/CountrySelectorDialog.tsx (1)

8-8: User interaction tracking added to country selector button.

The implementation adds Google Analytics tracking for the country selector button clicks, which helps understand user navigation patterns. The event parameters (action, category, label) are appropriately defined for this UI element.

Also applies to: 229-236

src/website2/src/views/home/HomePlayerSection.tsx (1)

195-199: Video play tracking implemented correctly.

The added tracking for video plays will provide useful analytics on content engagement. The event is properly categorized and uses a descriptive label for the home page video.

src/website2/src/components/dialogs/EngagementDialog.tsx (1)

13-13: Well-implemented tracking for engagement form submissions.

The implementation intelligently tracks successful form submissions with dynamic labeling based on the selected category. The conditional approach to the label ensures meaningful analytics data even if the category selection flow changes in the future.

Also applies to: 176-185

src/website2/src/components/layouts/Navbar.tsx (2)

228-235: Well-implemented event tracking for user engagement

The addition of tracking events before dispatching the modal action follows good analytics implementation patterns. The event parameters are descriptive and semantically appropriate, with 'engagement' being the right category for this user interaction.

---

241-248: Analytics implementation properly categorizes navigation events

The tracking event for the "Explore data" button correctly uses 'navigation' as the category, maintaining a clear separation of concerns between different types of user interactions. This consistent categorization will improve analytics data quality.

src/website2/src/app/layout.tsx (1)

42-42:

❓ Verification inconclusive

Verify empty string behavior for Google Analytics initialization

Replacing the hardcoded measurement ID with an empty string fallback is safer and more flexible, but ensure the GoogleAnalytics component properly handles empty IDs. Consider adding a comment explaining the expected behavior when no measurement ID is provided.

---

🏁 Script executed:

#!/bin/bash
# Check how the GoogleAnalytics component handles empty measurement IDs
rg -A 10 "export default function GoogleAnalytics" --type ts

Length of output: 870

---

Action: Confirm and Document Empty ID Handling in GA Initialization

The fallback to an empty string for the GA measurement ID is a good, safe approach. However, from the GoogleAnalytics component’s current implementation (it directly logs and utilizes measurementId), there isn’t an explicit check or handling for an empty string scenario. Please verify that the component gracefully skips or adjusts its behavior when an empty ID is provided. In addition, consider adding an inline comment within the component to explain the expected behavior when no measurement ID is present.

✨ Finishing Touches

• 📝 Generate Docstrings

---

Thank you for using CodeRabbit. We offer it for free to the OSS community and would appreciate your support in helping us grow. If you find it useful, would you consider giving us a shout-out on your favorite social media?

❤️ Share

• X
• Mastodon
• Reddit
• LinkedIn

🪧 Tips

Chat

There are 3 ways to chat with CodeRabbit:

• Review comments: Directly reply to a review comment made by CodeRabbit. Example:
  • I pushed a fix in commit <commit_id>, please review it.
  • Generate unit testing code for this file.
  • Open a follow-up GitHub issue for this discussion.
• Files and specific lines of code (under the "Files changed" tab): Tag @coderabbitai in a new review comment at the desired location with your query. Examples:
  • @coderabbitai generate unit testing code for this file.
  • @coderabbitai modularize this function.
• PR comments: Tag @coderabbitai in a new PR comment to ask questions about the PR branch. For the best results, please provide a very specific query, as very limited context is provided in this mode. Examples:
  • @coderabbitai gather interesting stats about this repository and render them as a table. Additionally, render a pie chart showing the language distribution in the codebase.
  • @coderabbitai read src/utils.ts and generate unit testing code.
  • @coderabbitai read the files in the src/scheduler package and generate a class diagram using mermaid and a README in the markdown format.
  • @coderabbitai help me debug CodeRabbit configuration file.

Note: Be mindful of the bot's finite context window. It's strongly recommended to break down tasks such as reading entire modules into smaller chunks. For a focused discussion, use review comments to chat about specific files and their changes, instead of using the PR comments.

CodeRabbit Commands (Invoked using PR comments)

• @coderabbitai pause to pause the reviews on a PR.
• @coderabbitai resume to resume the paused reviews.
• @coderabbitai review to trigger an incremental review. This is useful when automatic reviews are disabled for the repository.
• @coderabbitai full review to do a full review from scratch and review all the files again.
• @coderabbitai summary to regenerate the summary of the PR.
• @coderabbitai generate docstrings to generate docstrings for this PR.
• @coderabbitai resolve resolve all the CodeRabbit review comments.
• @coderabbitai configuration to show the current CodeRabbit configuration for the repository.
• @coderabbitai help to get help.

Other keywords and placeholders

• Add @coderabbitai ignore anywhere in the PR description to prevent this PR from being reviewed.
• Add @coderabbitai summary to generate the high-level summary at a specific location in the PR description.
• Add @coderabbitai or @coderabbitai title anywhere in the PR title to generate the title automatically.

CodeRabbit Configuration File (.coderabbit.yaml)

• You can programmatically configure CodeRabbit by adding a .coderabbit.yaml file to the root of your repository.
• Please see the configuration documentation for more information.
• If your editor has YAML language server enabled, you can add the path at the top of this file to enable auto-completion and validation: # yaml-language-server: $schema=https://coderabbit.ai/integrations/schema.v2.json

Documentation and Community

• Visit our Documentation for detailed information on how to use CodeRabbit.
• Join our Discord Community to get help, request features, and share feedback.
• Follow us on X/Twitter for updates and announcements.

[github-actions]

New Website2 changes available for preview here

[github-actions]

New Website2 changes available for preview here