Integrate <ConversionTrackingToggle /> Component Into Ads and GA4 Module <SettingsView /> Components

[10upsimon]

Feature Description

With the Conversion Tracking UI toggle component and associated settings/datastore now complete (see #8616), the toggle is ready to be integrated into both the settings area of the Ads module, as well as the GA4 module.

This issue focusses on the read only / view settings area of said modules, i.e the <SettingsView /> component of each module.

The enabled/disabled status for Conversion Tracking should be displayed in read-only form based on the state of the toggle (i.e if conversion tracking enabled (true) via the applicable datastore selector).

Please reference the "Conversion Event Tracking Toggle & Settings" area of the design doc for more detailed information.

---

Do not alter or remove anything below. The following sections will be managed by moderators only.

Acceptance criteria

• The SettingsView component of Ads and Analytics modules should display the Conversion tracking label and value
• Value should be sourced from Conversion Tracking datastore and displayed as Enabled or Disabled text
• It should match figma designs for both modules

Implementation Brief

• Update assets/js/modules/ads/components/settings/SettingsView.js:
  • Use the selector added in Create conversion-tracking.js Datastore #8615 to pull the conversion tracking enabled setting value
  • Use DisplaySetting component to render Enabled or Disabled text when adsPax feature flag is enabled
  • Use Enhanced conversion tracking for label
  • Follow the figma design
• Update assets/js/modules/analytics-4/components/settings/SettingsView.js
  • Do the same as in Ads module settings view component
  • Follow the figma design

Test Coverage

• Update VRT images

QA Brief

• Setup Site Kit with conversionInfra feature flag
• Configure Ads and GA4
• Go to the Ads setting screen (Site Kit > Settings > Ads) and paste the following snippet into the browser console to enable Conversion tracking:
  • await googlesitekit.api.set( 'core', 'site', 'conversion-tracking', { settings: { enabled: true } } );
• Reload the page
• Validate that the Enhanced conversion tracking setting label is present with a value of "Enabled" as per the screenshot below:

• Change the setting to be disabled using the following snippet in console: await googlesitekit.api.set( 'core', 'site', 'conversion-tracking', { settings: { enabled: false } } );
• Reload the page
• Validate that the Enhanced conversion tracking setting label is present with a value of "Enabled" as per the screenshot below:

• Perform the same steps for the GA4 settings view

Changelog entry

• Add "Enhanced Conversion Tracking" to settings views for Ads and GA4.

[10upsimon]

AC ✅

[10upsimon]

IB ✅

[aaemnnosttv]

Note for QA: I've made a few changes which don't match the designs above but, these were already inconsistent relative to the current state there (mostly for GA). I've left a note in Figma too, so we should mostly be reviewing this visually for consistency with the rest of the settings.

[mohitwp]

QA Update ✅

• Tested on dev environment.
• Figma have different design and current is more aligned with existing styles.
• Verified toggled settings for both Analytics and Ads module.
• Verified the SettingsView component of Ads and Analytics modules display the Conversion tracking label and value.
• Verified value are sourced from Conversion Tracking datastore and displayed as Enabled or Disabled text.

Ads module

Recording.1038.mp4

Recording.1037.mp4

Analytics module

Recording.1039.mp4