Summary

Add Segment analytics tracking events for the new DNS Zone selection feature in the OSD GCP Shared VPC wizard. This enables product and UX teams to monitor feature adoption and user behavior.

Acceptance Criteria

• Segment event dns_zone_selected fires when user selects a DNS zone from the dropdown
• Segment event dns_zone_refresh_clicked fires when user clicks the Refresh button
• Events include relevant properties (zone ID, project ID, etc.)
• Events follow existing tracking patterns in the OSD wizard

Additional Resources

JIRA Tickets

• OSDGCP-70 - Parent Feature: Reduce DNS Administrator permissions for Shared VPC
• OCMUI-2998 - UI Epic
• OCM-18691 - Backend Epic (dependency)

Design Documents

• OCMUI DDR - UI Design Document 
• Mockups - Wireframes for DNS Zone section

Implementation Suggestions

1. Add event definitions to analytics.ts

src/common/analytics.ts

export const trackEvents = {
  // ... existing events
  DnsZoneSelected: 'dns_zone_selected',
  DnsZoneRefreshClicked: 'dns_zone_refresh_clicked',
};

2. Implement tracking in DnsZoneSection component

Reference existing tracking patterns in GcpVpcSettings.tsx which uses:

import useAnalytics from '~/hooks/useAnalytics';
import { trackEvents } from '~/common/analytics';

const track = useAnalytics();

// On dropdown selection
const onDnsZoneSelect = (zoneId: string) => {
  track(trackEvents.DnsZoneSelected, {
    resourceType: trackOcmResourceType,
    customProperties: {
      dns_zone_id: zoneId,
    },
  });
  setFieldValue(FieldId.DnsZone, zoneId);
};

// On refresh button click
const onRefreshClick = () => {
  track(trackEvents.DnsZoneRefreshClicked, {
    resourceType: trackOcmResourceType,
  });
  refetchDnsZones();
};

Event Properties

Testing Considerations

• Verify events fire correctly in browser dev tools (Network tab, filter by Segment)
• Unit test that track function is called with correct event names and properties