Monetization: Add MGID support

.phpstorm.meta.php

@@ -13,6 +13,7 @@
 			'amp_story_player_assets'      => \Google\Web_Stories\AMP_Story_Player_Assets::class,
 			'adsense'                      => \Google\Web_Stories\AdSense::class,
 			'ad_manager'                   => \Google\Web_Stories\Ad_Manager::class,
+			'mgid'                         => \Google\Web_Stories\Mgid::class,
 			'admin'                        => \Google\Web_Stories\Admin\Admin::class,
 			'admin.revisions'              => \Google\Web_Stories\Admin\Revisions::class,
 			'analytics'                    => \Google\Web_Stories\Analytics::class,

includes/Mgid.php

@@ -0,0 +1,141 @@
+<?php
+/**
+ * Class Mgid
+ *
+ * @link      https://github.com/googleforcreators/web-stories-wp
+ *
+ * @copyright 2023 Google LLC
+ * @license   https://www.apache.org/licenses/LICENSE-2.0 Apache License 2.0
+ */
+
+/**
+ * Copyright 2023 Google LLC
+ *
+ * Licensed under the Apache License, Version 2.0 (the "License");
+ * you may not use this file except in compliance with the License.
+ * You may obtain a copy of the License at
+ *
+ *     https://www.apache.org/licenses/LICENSE-2.0
+ *
+ * Unless required by applicable law or agreed to in writing, software
+ * distributed under the License is distributed on an "AS IS" BASIS,
+ * WITHOUT WARRANTIES OR CONDITIONS OF ANY KIND, either express or implied.
+ * See the License for the specific language governing permissions and
+ * limitations under the License.
+ */
+
+declare(strict_types = 1);
+
+namespace Google\Web_Stories;
+
+use Google\Web_Stories\Infrastructure\HasRequirements;
+
+/**
+ * Class MGID
+ */
+class Mgid extends Service_Base implements HasRequirements {
+	/**
+	 * Settings instance.
+	 *
+	 * @var Settings Settings instance.
+	 */
+	private Settings $settings;
+
+	/**
+	 * Analytics constructor.
+	 *
+	 * @since 1.33.0
+	 *
+	 * @param Settings $settings Settings instance.
+	 * @return void
+	 */
+	public function __construct( Settings $settings ) {
+		$this->settings = $settings;
+	}
+
+	/**
+	 * Initializes all hooks.
+	 *
+	 * @since 1.33.0
+	 */
+	public function register(): void {
+		add_action( 'web_stories_print_analytics', [ $this, 'print_mgid_tag' ] );
+	}
+
+	/**
+	 * Get the list of service IDs required for this service to be registered.
+	 *
+	 * Needed because settings needs to be registered first.
+	 *
+	 * @since 1.33.0
+	 *
+	 * @return string[] List of required services.
+	 */
+	public static function get_requirements(): array {
+		return [ 'settings' ];
+	}
+
+	/**
+	 * Prints the <amp-story-auto-ads> tag for single stories.
+	 *
+	 * @since 1.33.0
+	 */
+	public function print_mgid_tag(): void {
+		$widget  = $this->get_widget_id();
+		$enabled = $this->is_enabled();
+
+		if ( ! $enabled || ! $widget ) {
+			return;
+		}
+
+		$configuration = [
+			'ad-attributes' => [
+				'type'        => 'mgid',
+				'data-widget' => $widget,
+			],
+		];
+
+		/**
+		 * Filters MGID configuration passed to `<amp-story-auto-ads>`.
+		 *
+		 * @since 1.33.0
+		 *
+		 * @param array $settings MGID configuration.
+		 * @param string $widget MGID Widget ID.
+		 */
+		$configuration = apply_filters( 'web_stories_mgid_configuration', $configuration, $widget );
+
+		?>
+		<amp-story-auto-ads>
+			<script type="application/json">
+				<?php echo wp_json_encode( $configuration, JSON_UNESCAPED_SLASHES | JSON_UNESCAPED_UNICODE ); ?>
+			</script>
+		</amp-story-auto-ads>
+		<?php
+	}
+
+	/**
+	 * Returns the MGID Widget ID.
+	 *
+	 * @since 1.33.0
+	 *
+	 * @return string Widget ID.
+	 */
+	private function get_widget_id(): string {
+		/**
+		 * Widget ID.
+		 *
+		 * @var string
+		 */
+		return $this->settings->get_setting( $this->settings::SETTING_NAME_MGID_WIDGET_ID );
+	}
+
+	/**
+	 * Returns if MGID is enabled.
+	 *
+	 * @since 1.33.0
+	 */
+	private function is_enabled(): bool {
+		return ( 'mgid' === $this->settings->get_setting( $this->settings::SETTING_NAME_AD_NETWORK, 'none' ) );
+	}
+}

includes/Plugin.php

@@ -70,6 +70,7 @@ class Plugin extends ServiceBasedPlugin {
 		'amp_story_player_assets'      => AMP_Story_Player_Assets::class,
 		'adsense'                      => AdSense::class,
 		'ad_manager'                   => Ad_Manager::class,
+		'mgid'                         => Mgid::class,
 		'admin'                        => Admin\Admin::class,
 		'analytics'                    => Analytics::class,
 		'coi'                          => Admin\Cross_Origin_Isolation::class,

includes/Settings.php

@@ -84,6 +84,11 @@ class Settings implements Service, Registerable, PluginUninstallAware {
 	 */
 	public const SETTING_NAME_AD_MANAGER_SLOT_ID = 'web_stories_ad_manager_slot_id';
 
+	/**
+	 * MGID Widget ID setting name.
+	 */
+	public const SETTING_NAME_MGID_WIDGET_ID = 'web_stories_mgid_widget_id';
+
 	/**
 	 * Active publisher logo setting name.
 	 */
@@ -231,6 +236,17 @@ public function register(): void {
 			]
 		);
 
+		register_setting(
+			self::SETTING_GROUP,
+			self::SETTING_NAME_MGID_WIDGET_ID,
+			[
+				'description'  => __( 'MGID Widget ID', 'web-stories' ),
+				'type'         => 'string',
+				'default'      => '',
+				'show_in_rest' => true,
+			]
+		);
+
 		register_setting(
 			self::SETTING_GROUP,
 			self::SETTING_NAME_ACTIVE_PUBLISHER_LOGO,
@@ -467,6 +483,7 @@ public function on_plugin_uninstall(): void {
 		delete_option( self::SETTING_NAME_ADSENSE_PUBLISHER_ID );
 		delete_option( self::SETTING_NAME_ADSENSE_SLOT_ID );
 		delete_option( self::SETTING_NAME_AD_MANAGER_SLOT_ID );
+		delete_option( self::SETTING_NAME_MGID_WIDGET_ID );
 		delete_option( self::SETTING_NAME_ACTIVE_PUBLISHER_LOGO );
 		delete_option( self::SETTING_NAME_PUBLISHER_LOGOS );
 		delete_option( self::SETTING_NAME_VIDEO_CACHE );

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

@@ -37,6 +37,7 @@ export const defaultSettingsState = {
   adSensePublisherId: '',
   adSenseSlotId: '',
   adManagerSlotId: '',
+  mgidWidgetId: '',
   adNetwork: AD_NETWORK_TYPE.NONE,
   archive: ARCHIVE_TYPE.DEFAULT,
   archivePageId: 0,
@@ -77,6 +78,7 @@ function settingsReducer(state, action) {
         adSensePublisherId: action.payload.adSensePublisherId,
         adSenseSlotId: action.payload.adSenseSlotId,
         adManagerSlotId: action.payload.adManagerSlotId,
+        mgidWidgetId: action.payload.mgidWidgetId,
         adNetwork: action.payload.adNetwork,
         videoCache: action.payload.videoCache,
         dataRemoval: action.payload.dataRemoval,

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

@@ -35,6 +35,7 @@
   adSensePublisherId: response.web_stories_adsense_publisher_id,
   adSenseSlotId: response.web_stories_adsense_slot_id,
   adManagerSlotId: response.web_stories_ad_manager_slot_id,
+  mgidWidgetId: response.web_stories_mgid_widget_id,
   adNetwork: response.web_stories_ad_network,
   videoCache: response.web_stories_video_cache,
   dataRemoval: response.web_stories_data_removal,
@@ -74,6 +75,7 @@
     adSensePublisherId,
     adSenseSlotId,
     adManagerSlotId,
+    mgidWidgetId,
     adNetwork,
     videoCache,
     dataRemoval,
@@ -108,6 +110,10 @@
     query.web_stories_ad_manager_slot_id = adManagerSlotId;
   }
 
+  if (mgidWidgetId !== undefined) {
+    query.web_stories_mgid_widget_id = mgidWidgetId;
+  }
+
   if (adNetwork !== undefined) {
     query.web_stories_ad_network = adNetwork;
   }

packages/wp-dashboard/src/components/editorSettings/adManagement/adNetwork/index.js

@@ -45,6 +45,10 @@ export const TEXT = {
     'Learn how to <a>enable programmatic demand in Web Stories</a> through Ad Manager.',
     'web-stories'
   ),
+  HELPER_MESSAGE_MGID: __(
+    'Learn how to start <a>monetizing Web Stories with MGID Native Solution</a>',
+    'web-stories'
+  ),
   HELPER_LINK_ADSENSE: __(
     'https://support.google.com/adsense/answer/10175505',
     'web-stories'
@@ -57,6 +61,10 @@ export const TEXT = {
     'https://support.google.com/admanager/answer/9416436',
     'web-stories'
   ),
+  HELPER_LINK_MGID: __(
+    'https://help.mgid.com/generate-revenue-with-amp-web-stories?utm_source=wp-plugin&utm_medium=web-stories-by-google',
+    'web-stories'
+  ),
 };
 
 const OPTIONS = [
@@ -72,6 +80,10 @@ const OPTIONS = [
     label: __('Google Ad Manager', 'web-stories'),
     value: AD_NETWORK_TYPE.ADMANAGER,
   },
+  {
+    label: __('MGID', 'web-stories'),
+    value: AD_NETWORK_TYPE.MGID,
+  },
 ];
 
 function AdNetworkSettings({ adNetwork: adNetworkRaw, handleUpdate }) {
@@ -88,6 +100,10 @@ function AdNetworkSettings({ adNetwork: adNetworkRaw, handleUpdate }) {
       return TEXT.HELPER_MESSAGE_ADSENSE;
     }
 
+    if (AD_NETWORK_TYPE.MGID === adNetwork) {
+      return TEXT.HELPER_MESSAGE_MGID;
+    }
+
     return null;
   }, [adNetwork]);
 
@@ -100,6 +116,10 @@ function AdNetworkSettings({ adNetwork: adNetworkRaw, handleUpdate }) {
       return TEXT.HELPER_LINK_ADSENSE;
     }
 
+    if (AD_NETWORK_TYPE.MGID === adNetwork) {
+      return TEXT.HELPER_LINK_MGID;
+    }
+
     return null;
   }, [adNetwork]);
 

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

@@ -36,6 +36,7 @@
 import AdNetworkSettings from './adNetwork';
 import GoogleAdManagerSettings from './googleAdManager';
 import GoogleAdSenseSettings from './googleAdSense';
+import MgidSettings from './mgid';
 
 export const TEXT = {
   SECTION_HEADING: __('Monetization', 'web-stories'),
@@ -67,6 +68,7 @@
   publisherId,
   adSenseSlotId,
   adManagerSlotId,
+  mgidWidgetId,
   siteKitStatus,
 }) {
   const { adsenseActive, installed, adsenseLink } = siteKitStatus;
@@ -94,6 +96,11 @@
     [updateSettings]
   );
 
+  const handleUpdateMgidWidgetId = useCallback(
+    (newMgidWidgetId) => updateSettings({ mgidWidgetId: newMgidWidgetId }),
+    [updateSettings]
+  );
+
   const handleUpdateAdNetwork = useCallback(
     (newAdNetwork) => {
       updateSettings({ adNetwork: newAdNetwork });
@@ -187,6 +194,12 @@
               slotId={adManagerSlotId}
             />
           )}
+          {AD_NETWORK_TYPE.MGID === adNetwork && (
+            <MgidSettings
+              handleUpdate={handleUpdateMgidWidgetId}
+              widgetId={mgidWidgetId}
+            />
+          )}
         </div>
       )}
     </MultilineForm>
@@ -199,6 +212,7 @@
   publisherId: PropTypes.string,
   adSenseSlotId: PropTypes.string,
   adManagerSlotId: PropTypes.string,
+  mgidWidgetId: PropTypes.string,
   siteKitStatus: PropTypes.shape({
     installed: PropTypes.bool,
     active: PropTypes.bool,