Settings: Add new dropdown for choosing analytics behavior

includes/Integrations/Site_Kit.php

@@ -31,6 +31,7 @@
 use Google\Web_Stories\Analytics;
 use Google\Web_Stories\Context;
 use Google\Web_Stories\Service_Base;
+use Google\Web_Stories\Settings;
 
 /**
  * Class Site_Kit.
@@ -64,17 +65,26 @@ class Site_Kit extends Service_Base {
 	 */
 	private Plugin_Status $plugin_status;
 
+	/**
+	 * Settings instance.
+	 *
+	 * @var Settings Settings instance.
+	 */
+	private Settings $settings;
+
 	/**
 	 * Constructor.
 	 *
 	 * @param Analytics     $analytics     Analytics instance.
 	 * @param Context       $context       Context instance.
 	 * @param Plugin_Status $plugin_status Plugin_Status instance.
+	 * @param Settings      $settings      Settings instance.
 	 */
-	public function __construct( Analytics $analytics, Context $context, Plugin_Status $plugin_status ) {
+	public function __construct( Analytics $analytics, Context $context, Plugin_Status $plugin_status, Settings $settings ) {
 		$this->analytics     = $analytics;
 		$this->context       = $context;
 		$this->plugin_status = $plugin_status;
+		$this->settings      = $settings;
 	}
 
 	/**
@@ -85,7 +95,19 @@ public function __construct( Analytics $analytics, Context $context, Plugin_Stat
 	public function register(): void {
 		add_filter( 'googlesitekit_amp_gtag_opt', [ $this, 'filter_site_kit_gtag_opt' ] );
 
-		if ( $this->is_analytics_module_active() ) {
+		$handler = $this->settings->get_setting( $this->settings::SETTING_NAME_TRACKING_HANDLER );
+
+		if ( 'web-stories' === $handler ) {
+			add_filter(
+				'googlesitekit_analytics-4_tag_amp_blocked',
+				function ( $blocked ) {
+					if ( $this->context->is_web_story() ) {
+						return true;
+					}
+					return $blocked;
+				}
+			);
+		} elseif ( 'site-kit' === $handler && $this->is_analytics_module_active() ) {
 			remove_action( 'web_stories_print_analytics', [ $this->analytics, 'print_analytics_tag' ] );
 		}
 	}

includes/Settings.php

@@ -144,6 +144,11 @@ class Settings implements Service, Registerable, PluginUninstallAware {
 	 */
 	public const SETTING_NAME_DEFAULT_PAGE_DURATION = 'web_stories_default_page_duration';
 
+	/**
+	 * GA Tracking Handler.
+	 */
+	public const SETTING_NAME_TRACKING_HANDLER = 'web_stories_ga_tracking_handler';
+
 	/**
 	 * Shopping_Vendors instance.
 	 *
@@ -403,6 +408,22 @@ public function register(): void {
 				'show_in_rest' => true,
 			]
 		);
+
+		register_setting(
+			self::SETTING_GROUP,
+			self::SETTING_NAME_TRACKING_HANDLER,
+			[
+				'description'  => __( 'Tracking Handler', 'web-stories' ),
+				'type'         => 'string',
+				'default'      => 'site-kit',
+				'show_in_rest' => [
+					'schema' => [
+						'type' => 'string',
+						'enum' => [ 'site-kit', 'web-stories', 'both' ],
+					],
+				],
+			]
+		);
 	}
 
 	/**
@@ -495,6 +516,7 @@ public function on_plugin_uninstall(): void {
 		delete_option( self::SETTING_NAME_SHOPIFY_ACCESS_TOKEN );
 		delete_option( self::SETTING_NAME_DEFAULT_PAGE_DURATION );
 		delete_option( self::SETTING_NAME_AUTO_ADVANCE );
+		delete_option( self::SETTING_NAME_TRACKING_HANDLER );
 	}
 
 	/**

packages/wp-dashboard/src/api/reducers/settings.js

@@ -20,6 +20,7 @@ import {
   AD_NETWORK_TYPE,
   ARCHIVE_TYPE,
   SHOPPING_PROVIDER_TYPE,
+  GOOGLE_ANALYTICS_HANDLER_TYPE,
 } from '../../constants';
 
 export const ACTION_TYPES = {
@@ -49,6 +50,7 @@ export const defaultSettingsState = {
   shopifyAccessToken: '',
   autoAdvance: true,
   defaultPageDuration: 7,
+  googleAnalyticsHandler: GOOGLE_ANALYTICS_HANDLER_TYPE.SITE_KIT,
 };
 
 function settingsReducer(state, action) {
@@ -89,6 +91,7 @@ function settingsReducer(state, action) {
         shopifyAccessToken: action.payload.shopifyAccessToken,
         autoAdvance: action.payload.autoAdvance,
         defaultPageDuration: action.payload.defaultPageDuration,
+        googleAnalyticsHandler: action.payload.googleAnalyticsHandler,
       };
     }
 

packages/wp-dashboard/src/api/settings.js

@@ -46,6 +46,7 @@
   shopifyAccessToken: response.web_stories_shopify_access_token,
   autoAdvance: Boolean(response.web_stories_auto_advance),
   defaultPageDuration: response.web_stories_default_page_duration,
+  googleAnalyticsHandler: response.web_stories_ga_tracking_handler,
 });
 
 /**
@@ -86,6 +87,7 @@
     shopifyAccessToken,
     autoAdvance,
     defaultPageDuration,
+    googleAnalyticsHandler,
   } = queryParams;
 
   const query = {};
@@ -154,6 +156,10 @@
     query.web_stories_default_page_duration = defaultPageDuration;
   }
 
+  if (googleAnalyticsHandler !== undefined) {
+    query.web_stories_ga_tracking_handler = googleAnalyticsHandler;
+  }
+
   const path = addQueryArgs(apiPath, query);
 
   return apiFetch({

packages/wp-dashboard/src/components/editorSettings/editorSettings.js

@@ -85,6 +85,7 @@
     shopifyAccessToken,
     autoAdvance,
     defaultPageDuration,
+    googleAnalyticsHandler,
   } = useEditorSettings(
     ({
       actions: {
@@ -117,6 +118,7 @@
           shopifyAccessToken,
           autoAdvance,
           defaultPageDuration,
+          googleAnalyticsHandler,
         },
         media: { isLoading: isMediaLoading, newlyCreatedMediaIds },
         publisherLogos: { publisherLogos },
@@ -155,6 +157,7 @@
       shopifyAccessToken,
       autoAdvance,
       defaultPageDuration,
+      googleAnalyticsHandler,
     })
   );
 
@@ -329,6 +332,12 @@
     [setPublisherLogoAsDefault]
   );
 
+  const handleUpdateGoogleAnalyticsHandler = useCallback(
+    (newGoogleAnalyticsHandler) =>
+      updateSettings({ googleAnalyticsHandler: newGoogleAnalyticsHandler }),
+    [updateSettings]
+  );
+
   return (
     <Layout.Provider>
       <Wrapper data-testid="editor-settings">
@@ -346,6 +355,10 @@
                   usingLegacyAnalytics={usingLegacyAnalytics}
                   handleMigrateLegacyAnalytics={handleMigrateLegacyAnalytics}
                   siteKitStatus={siteKit}
+                  googleAnalyticsHandler={googleAnalyticsHandler}
+                  handleUpdateGoogleAnalyticsHandler={
+                    handleUpdateGoogleAnalyticsHandler
+                  }
                 />
                 <PublisherLogoSettings
                   onAddLogos={handleAddLogos}